Sometimes after installing a WordPress theme, there are tiny things that we want to change, for example:
- To remove the copyright text at the end of the theme
- To change some styles of the theme, for example link style, fonts or colors
- To install Google Analytics or Google Tag Manager tracking code, or Google Optimize for running A/B Test
- To display the modified date instead of published date of a post
Or bigger things such as:
- To redesign the homepage
- To add / change page templates
And so on. The purpose of this article is to provide some methods to implement them.
Before getting our hands dirty, there are some rules:
- Never touch the base code of a theme. Because in the future when you update the theme, it will wipe away all of your hard work. Instead, you should make a child theme that holds all the customization.
- Always make a backup of your website before changing anything.
Table of contents
- 1. Additional CSS with WordPress’s Customize
- 2. Snippets: To Modify WordPress Themes Without FTP
- 3. Using a Child Theme to Customize a WordPress Website
- Why Do We Need to Use a Child Theme in WordPress?
- How to Customize WordPress with a Child Theme
- WordPress Theme Anatomy
- Example 1. Display modified date from a WordPress post instead of published date
- Example 2: Remove the “Powered by WordPress | Theme Name” credit line
- Example 3: Add a new page template
- Example 4: Remove custom scripts and styles from plugin/theme
- Why Do We Need to Use a Child Theme in WordPress?
- 4. WordPress hooks: actions and filters
- Conclusion
- References
Before touching the code from a code editor, there are helpful WordPress tools and plugins you should know for simple tasks:
1. Additional CSS with WordPress’s Customize
To make simple CSS changes, you only need to have access to the Theme section of the WordPress dashboard.
In the Dashboard, the tool is located at Appearance > Customize. Or you can find it in the admin bar.
This tool lets you add extra CSS code without the need of installing a child theme. If you have knowledge of CSS, you can start inspecting the elements from your web browser and change the style in here.
2. Snippets: To Modify WordPress Themes Without FTP
Snippets is an amazing plugin to do customization without the need of making a child theme and uploading the changes in FTP. You will need to have the right to install plugins from WordPress Dashboard.
This plugin allows you to add custom code into your website, no matter which theme you are using. Sounds wonderful!
So some examples what you can do with this tool:
- Add custom tracking code, e.g Google Analytics, Tag Manager, Adsense, Amazon OneTag, Facebook Pixel, etc.
- Using WordPress actions and filters hooks to change content or add actions.
- Custom code integration, e.g Hotjar or MailChimp popup.
And when you do not want to have that code anymore, just disable the piece of code and it’s done!
Even better: You can export the code snippets and import it to other WordPress websites.
Example 1: Add Google Analytics tracking code with Snippets and WordPress add_action hook
Let’s make a new Snippet with this code:
Then choose one of these options:
- Run snippet everywhere
- Only run in administration area
- Only run on site front-end
- Only run once
For the GA tracking code, we only need to run it on the site front-end.
If you are not familiar with WordPress hooks, we will talk about it a bit later. Now in this example: we hook into the “wp_head” action and inject our GA tracking code right in the beginning of <head> tag with priority “1”.
Then Delete Cache, go to the web browser, right click and “View Page Source” to see if the code is installed successfully.
Example 2: Add MailChimp exit pop-up to WordPress with Snippets
The MailChimp email automation tool provides a useful exit pop-up for a website to collect emails. You can create/config/design the pop ups on MailChimp end and then integrate a piece of Javascript code on your website so it will run automatically.
Then activate the Snippet and choose to run it on front-end site.
Similar to the example of Google Analytics, here we inject the code into the footer with the hook “wp_footer“.
Why not use “wp_head“? We can, but we should not.
Unlike the analytics, which should be fired as soon as possible so that it can capture important user behavior e.g events, the exit pop-up has lower priority so that it can wait until all of the website content loads before being triggered.
Example 3: Add a custom message at the end of a post
So this piece of code is helpful if you want to add a small line at the end of all articles. For example, if you have a message that you would like to promote, it is easier to add the message this way, rather than opening all articles and manually adding the text line.
This time we use “add_filter” and “the_content” to modified the content of a page.
We need to wrap the code snippet in the conditional is_singular(‘post’) because we do not want to show the message on all the pages, but only on posts.
Hopefully these three examples above can help you to understand what the Snippets plugin can help.
Now we can move out of the in-built tools and come to the next section: a Child Theme.
3. Using a Child Theme to Customize a WordPress Website
Why Do We Need to Use a Child Theme in WordPress?
You are probably very familiar with WordPress themes.
Earlier when WordPress is mainly for the purpose of blogging, a theme decides how your website will look like. Because the blogs run in a similar structure with the same custom post types, when switching themes, users do not worried about the site to break up, because only the styles will change.
Nowadays WordPress are getting more complicated to serve many purposes: business websites, porfolios, listing directories, and so on. The website structures are not as simple as before.
For example, with Superlist theme, you can have a listing directory website with useful features such as maps, filtering information, claiming a property, etc.
Or, with Newspaper theme, you will have stunning websites that are optimized for speed and provide plenty of ad spaces to display advertisements.
That is to say, nowadays a theme is also an engine to run a website of specific purpose. Theme makers update their themes frequently not only to fit in with the WordPress updates, but also to release new features, fix old bugs, and so on.
When you update a theme from the WordPress dashboard, all of the old theme code will be replaced with the new one. That means, if you edit a line of code in the theme, after next update, it will not be there anymore.
That’s where a child theme come into play.
A child theme purpose is simple: to keep all your customization not to be overwritten by updates of the parent theme.
It is also very simple to install a child theme, please refer to this post for a step-by-step tutorial.
How to Customize WordPress with a Child Theme
After creating a child theme, we will have at least two files in that child theme folder:
- styles.css: to overwrite CSS in the parent theme
- functions.php: to write custom functions
To make further changes, we will need to copy the file from the parent theme to this child theme folder and start modifying here.
WordPress Theme Anatomy
Before making any modifications, we would need to know where the files are located. Inside a theme folder, you will find:
- header.php: The header of a page, usually have meta tags, title, etc.
- footer.php: The footer of a page, usually have footer widgets, or a credit line “Powered by WordPress | Theme name” for a free theme version
- single.php: The template for a single post
- home.php: The template for blog page
- archive.php: The template for categories / tags archive pages
- front-page.php: Not included by default, but you can add this as the template for homepage
- sidebar.php: Contains sidebar info + sidebar widgets
So if you want to modify a page, you need to do:
- Find the correct template
- Make changes
- Upload to the child theme folder so that it overwrites content in the parent theme.
Please note: The hierarchical should be the same, for example if the file is located inside a folder called inc/ in a parent theme, it should also be in the same folder name in the child theme.
If you want to find a popular theme to start with, try Genesis, or Divi. Genesis framework was said to be the cleanest framework for WordPress and Divi is also very popular among websites.
Example 1. Display modified date from a WordPress post instead of published date
Displaying the modified date is a good way to inform the visitors that the blog is not out of date. And also, it is good for SEO CTR because users tend to visit the post that is not too old.
Theoretically, the date is a meta information that will be found in single.php page templates. Some themes even make it into a function.
The basic principal: You would need to find the right place and change the get_the_date() (or the_date()) function with get_the_modified_date() (or the_modified_date())
The difference between get_the_modified_date() and the_modified_date():
Because each theme is different, it’s hard to say where it is. But, starting from single.php or content-single.php in the loop, you will find the clue.
For example, if it is like this, that mean the meta has been embedded inside a function, you should find this function somewhere:
Here you can find some of the examples:
1. Newspaper theme:
- wp-content/plugins/td-composer/legacy/common/wp_booster/td_module_single_base.php
- wp-content/plugins/td-composer/legacy/common/wp_booster/td_module.php
2. Accelerate theme:
The meta information in Accelerate theme is written into a function, so let’s just overwrite it by adding the same function in our functions.php in the child theme.
This piece of code is from Accelerate 1.4.3
You can copy and paste the function (accelerate_entry_meta()) into your child theme’s functions.php, changing this line:
Into this:
And replace this:
With this:
And you can see the change on front end, from published date into Updated on:
3. UnderStrap theme:
The meta information in Understrap theme is written into a function, so let’s just overwrite it by adding the same function in our functions.php in the child theme.
This piece of code is from Understrap 3.
Example 2: Remove the “Powered by WordPress | Theme Name” credit line
Normally the credit line is in the footer.php. When you open the file it is easily to spot this line, maybe in hard-coded text or in a function.
For example, the Accelerate theme holds this line in an action called “accelerate_footer_copyright“. You would need to go to footer.php, find and remove this line:
Other themes may have this ability for you with the Customize tool so in some cases you do not need to remove it from the code line.
However, I think in some cases it is not necessary to remove this line. If the theme is good and you are using it for free, you may want to allow the theme makers to advertise themselves on your website.
Example 3: Add a new page template
A new page template can be added by creating a PHP file name, for example:
- page-{id}.php: a custom page template for the page with id = {id}
- page-{about}.php: a custom page template for the web page with slug = about
A page template start with:
Then you can save the file as example-template.php. Some themes have a folder page-templates/ (for example Understrap and Accelerate), you can make a template with PHP, HTML, CSS and upload it to the page-templates/example-template.php
So when creating a page, you will see the template to be available in the dropdown in Page Attributes.
This reference might be good for you for a more detailed guide on how to make a custom page template.
Example 4: Remove custom scripts and styles from plugin/theme
Sometimes we would want to remove the styles and scripts from a plugin, so that we can design from scratch to blend it with the styles of our current website.
WordPress has a wp_dequeue_style() and wp_dequeue_script() functions to remove unwanted stylesheet, or scripts. All you need to do is to find the appropriate handle.
Normally the handle is the id without “-css”. Or, if a plugin has documentation, you can have a look to see what handle they use to enqueue the style, and then dequeue it.
Remove LuckyWP Table of Contents styles
LuckyWP Table of Contents is used to display quicklinks to different sections of a blog post. This provides a better user experience that visitors can immediately jump to the section they want to see.
Although this plugin also provides a field in the settings for custom CSS, we can save 1 http request if we remove totally the CSS stylesheet from this plugin from front end, and then include the styles in our child theme’s styles.css.
In this example of LuckyWP Table of Contents, the handle is “lwptoc-main”. Just place this in your child theme’s functions.php:
Then come back to View Page Source and you can see that the stylesheet request was removed.
Remove TablePress styles
The case of TablePress is quite simple. The plugin has a hook for you to remove its default stylesheet.
4. WordPress hooks: actions and filters
Last but not least, let’s talk a bit about WordPress hooks. Knowing hooks is very useful when you want to make advance edits to a theme.
The WordPress site runs by performing many actions in a sequence. We can add our custom function to WordPress’s action flow thanks to its actions and filters hook. That way, WordPress will also perform our functions when loading the pages.
The purpose of WordPress hooks is that you do not touch the code base of WordPress. Instead, you write your own custom function, and blend it smoothly with the flow of other WordPress functions.
What is the difference between add_action and add_filter?
Actions and Filters are essential in WordPress theme and plugin development. The difference between them are confusing sometimes. To use them properly, theories are not enough, but a lot of practice is needed. But at this point, if you are not familiar with the hooks, you can simply understand that:
- add_action, is something new that we add that should be implemented after or before some process takes place. For example, we want to add the Google Analytics tracking code right after the <head> tags is loaded.
- add_filter, is to modify things and control how it will be displayed on front end. In other hand, it makes changes to some code which already exists.
In the example above, add_filter to the_content will retrieve the content, and then add a custom message at the end of it, then return both the content and the message to the browser.
Naturally, the article won’t change. If we come back to edit the post, we will not see this custom message in the WordPress editor at all. It will only be added before the post was displayed to the visitors.
From the beginning of this post, you already see some examples using hooks (e.g with wp_head and wp_footer), and here you can find one more example:
Using hooks to remove unnecessary scripts and styles from the WordPress front-end
WordPress is a heavy system. For a simple blog, there are some unnecessary scripts that do not need to be there at all in order to run the whole website. Removing them will reduce http requests, so that the web page will load faster.
Some scripts and styles that can be removed from running WordPress:
- Weblog client link: enable you to write a post without being online
- Windows Live Writer Manifest Link: enable a blog editing client
- WordPress Generator: informing users that you are using WordPress + WordPress version
- WordPress Shortlink: a URL shortening link based on your post id. This is much ugly and useless than pretty permalinks which are nowadays used widely.
Depending on your needs, you also can remove the RSS feed, comments feed (if your website does not allow comments), or disable emojis, wp-embed and Gutenberg, and so on.
Honestly, the above mentioned features have some uses (if not, why to make it in the first place?). However, nowadays those features are not very much in need with websites of other purposes rather than blogging, and may open up security holes. In addition, removing them will also clear out a bunch of redundant code that block the header.
So, we will use remove_action to remove the code from wp_head. In your child theme’s functions.php, (or make a new Snippet and add this code):
Then Delete Cache, go to View Page Source, you will see that those unnecessary line has gone. If you check with GTMetrix, you also can see that there is a decrease in the http request.
Conclusion
Editing a WordPress theme is not an easy task, but I hope this article will provide some viewpoints of where to start and how to modifying the theme based on your needs.
In short:
- You can use WordPress Customize to make small changes to CSS file
- Use Snippets plugin to add fast codes that can be switched on or off on site-wide (no matter what theme is currently used)
- A Child Theme should be used for big changes because it keeps your customization not to be overwritten by updates
- Some basic knowledge on WordPress hooks: actions and filters are appreciated in order to make more complicated changes
References
- List of all WordPress hooks: https://codex.wordpress.org/Plugin_API/Action_Reference
- How to Create a WordPress Child Theme – WPBeginner
- A detailed guide on making a custom page template
Leave a Reply