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.
Before touching the code from a code editor, there are helpful WordPress tools and plugins you should know for simple tasks:
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.
Code Snippets: To Modify WordPress Themes Without FTP
Code 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.
See examples from this post: Using Code Snippets to Modify Themes Without Child Theme.
Using a Child Theme to Customize a WordPress Website
Using Child Theme is a recommended method to keep custom changes when theme gets updated.
This post explains deeper how to make a child theme: Using Child Themes.
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. But to make it simple:
- 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.
// Remove weblog client link
remove_action ('wp_head', 'rsd_link');
// Remove Windows Live Writer Manifest Link
remove_action( 'wp_head', 'wlwmanifest_link');
// Remove WordPress Generator
remove_action('wp_head', 'wp_generator');
// Remove wordpress shortlink
remove_action( 'wp_head', 'wp_shortlink_wp_head');
So, we will use remove_action to remove the code from wp_head. In the 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 requests.
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.