IE Warning
YOUR BROWSER IS OUT OF DATE!

This website uses the latest web technologies so it requires an up-to-date, fast browser!
Please try Firefox or Chrome!

Advanced WordPress Theme Editing - Customizing WordPress theme with a Child theme


February 3, 2015.

You need to change or remove a line in the theme but don't know where to start? This tutorial is just for you! However please note that a little PHP and HTML knowledge is required for this task! In case you're not familiar with these languages I suggest you to hire a coder!

The Basics

WordPress theme filesUsually a WordPress theme consists of JavaScript, CSS, PHP and image files. JavaScript (JS) is most commonly used to alter the displayed webpage content real time in your browser. It makes web pages interactive, you can move or hide site elements, etc. A good example for JS in action is a slider, like Revolution Slider for example. CSS is used to style and position all elements on the site. Without it there would be just some raw text and unordered images. So if you want to change just a color, font size, margin or any other stylings then you need to modify the main CSS file (style.css) only. For more information read my other tutorial about How to customize your WordPress theme.

The PHP files are responsible to load the content from MySQL database and display it on the site. So you'll have to edit one of them if you want to change some text or site element. I created a list of possible WP theme template files and their functions to give you a quick overview without going too deep:

Some of these are optional like the 404 page, because in most webservers there is already a custom 404 template usually. Therefore it's not required to create that. Sometimes there are more, sometimes there are less files. It depends on the theme and its developer's methods. For example in my themes I also create a content-blog-small.php for the loop (querying posts from database) to display posts in my way (e.g.: with small thumbs) and I can use this template multiple times for example to show posts in index.php or to list search results in search.php. Similarly I also usually create a content-blog-large.php file which displays posts with large featured image (if set), etc. So if you want to remove the comments number from blog list then you'll need to edit one of these files most likely.

If you want to learn more about template files and hierarchy, please visit this page: http://codex.wordpress.org/Template_Hierarchy


Find Your String in the Code

find a string in WordPress theme filesFirst you have to find the line you want to modify. The quickest way is to use a file explorer which is able to search strings within files like Total Commander (see image on the right). Alternatively you can open all theme files with .php extension from the theme's root directory in a text editor like NotePad++ and search in all opened documents. If you want to remove the comments number, the keyword you're looking for is comments obviusly. This will give you a few results but if you read the section above about page templates then you might already know which file is your target. Usually I leave useful comments in my code so it shouldn't be that hard to find what you need.

If you're still unsure which file is the one you need just put an exclamation mark at the beginning of the file, upload it to your server and refresh your site. If you see the mark, then you're editing the right file!


Editing Theme Files with Child Theme

Once you've found the file I assume you would probably edit and save it. However with the next theme update you'll overwrite these modifications. Thats why you should use the child theme. A child theme is basically another folder of a theme where you copy only the files you want to change from the original theme folder. This way when you update (overwrite) the original theme, your changes will remain intact.

All of my themes contain an already prepared child theme folder. To set it up just upload the child theme in yourserver.com/wp-content/themes/ folder or upload it in a ZIP file via WordPress admin and activate it. Now you can copy the file you want to edit into the child theme's folder. After that you'll be able to modify it in the WP code editor (Appearance - Editor menu, see image below). WordPress text editor Or alternatively you can use a text editor to modify the file, save it and upload it into the child theme folder.

That's it! I really hope this article will help you. Don't hesitate to send me a message and ask me if you don't understand something!