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!
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:
- 404.php - if WordPress can't find an URL, this page is shown
- archive.php - post archives by date
- category.php - posts by a category
- comments.php - template to display comment list and reply form
- footer.php - this template is used on all pages to display footer section of the webpage
- functions.php - all theme functions goes here like navigation, theme option pages, widget area handling, etc.
- header.php - this template is used on all pages to display heading of the webpage
- index.php - it displays all posts, this page is shown if nothing is set in Settings - Reading menu
- page.php - this template displays the pages
- search.php - search results
- searchform.php - search form with input fields
- sidebar.php - sidebar widget area
- single.php - shows a single post
- tag.php - posts by a tag
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
First 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). 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!