Skip to content Skip to main navigation Skip to footer

How To Edit WordPress Template Files? 3 Easy Methods

What Are WordPress Template Files?

WordPress theme files or template files are actually collection of php, css, js or josn type files. According to WordPress.org:- Templates files exist within a theme and express how your site is displayed.

How Can I Edit My Template Files On WordPress?

There are several ways to edit WordPress template files, some common online and offline theme editing practices are introduced here.

Using Theme Editor

Introduction:

WordPress offers a built-in theme editor. This allows online theme files editing, directly from your browser. Here one should know, only privileged user can access and modify template files, if you are restricted to access or modifying these files in theme editor, please contact your website administrator to grant you proper level of privileges.

How To Access:

Administration Screens >>  Appearance >> Theme Editor

theme-Editor-option-in-dashboard-3

Appearance:

By default currently active theme template files are appeared in right hand sidebar navigation of theme editor Windows.
theme-Editor--1
You can also edit other installed themes by selecting them from drop down menu in right hand sidebar navigation, don’t worry editing any other installed theme can’t activate them.

Theme Selection.

Edit WordPress template files

Using FTP?

If you want to download, edit and upload your theme files to or from a remote server then FTP is one of the options to perform such offline theme editing task.

Step 1: Login

Login to your host Server with your FTP credentials like User name, Password and FTP host URL. We also need an FTP Client like FileZilla, a free FTP client.

Screen Shot: Server Side File Hierarchy, File Downloads.
ftp_downlods1-1

Step 2: File Download.

Edit downloaded file in any text editor like Notepad or Sublime text.
ftp3

Step 3: Upload Files.

fto-upload-7
Upload edited files again to host server.

Using cPanel?

Currently almost all hosts providing cPanel with several different modules like file manager, allowing direct access, upload and manage files from cPanel without any use of FTP client. Of course cPanel offers FTP module. You can also make use of this FTP module to access and upload your files.

Step 1: Login

Login to your cPanel with your User name and password provided by web hosting company.
panel-login-screen

Step 2: Accessing Files.

Click on file manager like module in cPanel, here you can access all your hosted files.
panel-inteface1

Step 3: Edit or Download.

You can either edit any file online or download the file for offline editing.
file-options

Step 4: Save or Upload.

Save the changes you made in online file editing or upload offline edited file either via cPanel or FTP.

Examples of Editing Theme Files

How to change site background color?

One of the answer of this question is go and edit your style.css, write some css codes and it’s done. Style.css is the main stylesheet file requited to customize visual components like appearance, layout, design, color, fonts etc. of web pages. Because it is available in every theme, that’s why we have taken this file as our example file. Here Twenty Nineteen Ver 1.5 is our working example theme.

A step by step procedure to change site background color.

Select style.css from hand sidebar navigation.style.css-editing

body {
	background-color: #aaf;
}

Write the code above at the end of the file, and then click on update file.

See the difference between default background and blue color background after modification.

How To Remove Version Number From WordPress?

WordPress Version number appears in View Page Source, as you know for the security reason it a good practice to remove or hide WordPress version number. One of the ways to remove it is adding some php codes in functions.php file.

WordPress Version Appeared in view page source.
we-version
Now we are going to edit functions.php in Theme Editor.

Dashboard >> Appearance >> Theme Editor
Select functions.php form right hand sidebar navigation.
functions-php-1
Just write the code given below at the end of the file and click on update file.

function wphow_wpversion_remove() {
	return ' ';
}
addfilter('thegenerator', ' wphow_wpversion_remove ');

New code is added at the end of functions.php
functions-php-code-added2

Now just for a test go and open your site in a browser and check the Version No in view page source.
version-removed
Version No is now removed in view page source.

How to add a Javascript snippet in functions.php?

There are different places and  several available methods to add Javascript snippets in WordPress site, no matter which method or place you prefer to add your snippet, it will affect either, entire the site or a particular area i.e. a page or a post.

Example Places:

Functions.php, header.php, footer.php files, Gutenberg editor, <head> section of the page, before the </body> tag of the page are example places where you can add the snippet.

Example Methods:

Use of plugins, wp_head, wp_footer, wp_enqueue_script() hooks, adding custom .js files are some example methods where you can add the Javascript snippet.

Step 1: Them Editor & File Selection.

Go to Theme Editor and select functions.php file.
functions-php

Step 2: Adding Javascript Snippet.

Paste the code given below at the bottom of the file.
js-code-in-functions-php
Click On Update file.

function wphow_js_snippet() { 
    ?>
    <script>
	console.log("It’s a testing message");
	alert( 'Welcome to wpHow.co' );
    </script>
    <?php
 }
add_action('wp_head', 'wphow_js_snippet');

Step 3: Test The Code.

When you will refresh your homepage, you will get an alert box message “Welcome to wpHow.co”.
js-alert2

Another confirmation check is, press F12 to get console and you will see “It’s a testing message”. If everything goes fine then it’s done

Customizer Additional Features.

Not all but some themes like our example theme Twenty Nineteen Version: 1.5 offers additional css setting. It means without going to edit any css file, you can modify your theme’s look. Here is the step by step procedure.

Step 1: Click on Customizer.

Click on Dashboard >> Customize
customize

Step 2: Click On Additional CSS.

Click on Additional CSS
additional-css1

Step 3: Adding CSS Code.

body {
	background-color: #aaf;
}

additional-css-code
It’s a live feature means before publishing you can add additional css and also get these code effects side by side. Finally click on publish to accomplish the task.

Theme Editing Plugins

A lot of free or paid plugins are available in WordPress repository, offering simple GUI to customize your theme, without directly going to edit any of the theme template files. Hence without writing a single line of css or php code, these plugins are a cool way of doing things.

You can search for such plugins by searching for “theme editor” within your WordPress plugin installation screen.

Theme Editing Plugins Search Results

Was This Article Helpful?

0
0 Comments

There are no comments yet

Leave a comment

Your email address will not be published. Required fields are marked *