How To Edit WordPress Template Files? 3 Easy Methods

What Are WordPress Template Files?

WordPress theme files or template files are actually collections of PHP, CSS, js, or JSON-type files. According to WordPress.org:- Template 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 file editing, directly from your browser. Here one should know, only privileged users can access and modify template files, if you are restricted to access or modifying these files in the theme editor, please contact your website administrator to grant you a proper level of privileges.

How To Access:

Administration Screens >>  Appearance >> Theme Editor

Appearance:

By default currently, active theme template files appear in the right-hand sidebar navigation of the theme editor Windows.

You can also edit other installed themes by selecting them from the drop-down menu in the right-hand sidebar navigation, don’t worry editing any other installed theme can’t activate them.

Theme Selection.

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 tasks.

Step 1: Log in

Log in 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.

Step 2: File Download.

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

Step 3: Upload Files.

Upload edited files again to the host server.

Using cPanel?

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

Step 1: Log in

Login to your cPanel with your User name and password provided by the web hosting company.

Step 2: Accessing Files.

Click on the file manager like a module in cPanel, here you can access all your hosted files.

Step 3: Editor Download.

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

Step 4: Save or Upload.

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

Examples of Editing Theme Files

How to change the site’s background color?

One of the answers to this question is to go and edit your style.css, write some CSS codes and it’s done. Style.css is the main stylesheet file required to customize visual components like the 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 the site background color.

Select style.css from the hand sidebar navigation.

body {
	background-color: #aaf;
}

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

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

How To Remove Version Number From WordPress?

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

WordPress Version Appeared in view page source.

Now we are going to edit functions.php in Theme Editor.

Dashboard >> Appearance >> Theme Editor
Select functions.php from the right-hand sidebar navigation.

Just write the code given below at the end of the file and click on the update file.

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

New code is added at the end of functions.php

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

Version No is now removed from the view page source.

How to add a Javascript snippet in functions.php?

There are different places and several available methods to add Javascript snippets to a 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.

Also Read: Here’s How to Remove category from WordPress post

Example Methods:

Use of plugins, wp_head, wp_footer, wp_enqueue_script() hooks, and 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 the functions.php file.

Step 2: Adding Javascript Snippet.

Paste the code given below at the bottom of the file.

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”.

Another confirmation check is, pressing F12 to get the 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 offer additional CSS settings. 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

Step 2: Click On Additional CSS.

Click on Additional CSS

Step 3: Adding CSS Code.

body {
	background-color: #aaf;
}

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 the WordPress repository, offering a 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.