• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Ani's Webdev Blog

A learning diary of website development

  • Home
  • Demo
    • Ajax Contact Form
  • WordPress
  • Front-end
  • Backend

Customizing WordPress Themes: Basic Principles & Examples

Modified on: March 13, 2023

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.

Warning

This is only applied to self-hosted WordPress.com, not for blogs created with WordPress.org.

Table of contents

  1. 1. Additional CSS with WordPress’s Customize
    1. 2. Snippets: To Modify WordPress Themes Without FTP
      1. Example 1: Add Google Analytics tracking code with Snippets and WordPress add_action hook
        1. Example 2: Add MailChimp exit pop-up to WordPress with Snippets
          1. Example 3: Add a custom message at the end of a post
          2. 3. Using a Child Theme to Customize a WordPress Website
            1. Why Do We Need to Use a Child Theme in WordPress?
              1. How to Customize WordPress with a Child Theme
                1. WordPress Theme Anatomy
                  1. Example 1. Display modified date from a WordPress post instead of published date
                    1. Example 2: Remove the “Powered by WordPress | Theme Name” credit line
                      1. Example 3: Add a new page template
                        1. Example 4: Remove custom scripts and styles from plugin/theme
                        2. 4. WordPress hooks: actions and filters
                          1. What is the difference between add_action and add_filter?
                            1. Using hooks to remove unnecessary scripts and styles from the WordPress front-end
                            2. Conclusion
                              1. 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.

                                wordpress customize tool
                                You can find the Customize in Appearance tab.

                                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.

                                wordpress customize tool content

                                Warning

                                This is theme-scale, meaning if you change the theme, you have to add the same code to the new theme.

                                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.

                                Using Snippets to easily adding custom to your WordPress website
                                Using Snippets to easily adding custom functions to your WordPress website

                                Example 1: Add Google Analytics tracking code with Snippets and WordPress add_action hook

                                Let’s make a new Snippet with this code:

                                PHP

                                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.

                                add mailchimp exit pop-up code to wordpress
                                Add Mailchimp exit pop-up code to wordpress
                                PHP

                                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.

                                PHP

                                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.

                                Auto add a custom message at the end of all WordPress posts.
                                Auto add a custom message at the end of all WordPress 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.

                                Information

                                In order to use child theme, you will need to have both the parent theme and child theme in the wp-content/themes/ folder. Activate the child theme. After that, you may need to re-save the Menu once it is activated.

                                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.

                                A child theme has to exist together with its parent
                                A child theme has to exist together with its parent

                                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():

                                PHP

                                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:

                                A piece of content from content-single.php
                                A piece of content from content-single.php

                                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:

                                PHP

                                Into this:

                                PHP

                                And replace this:

                                PHP

                                With this:

                                PHP

                                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.

                                Plain Text

                                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:

                                PHP

                                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:

                                PHP

                                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.

                                Find your custom page template in WordPress
                                Find your custom page template in WordPress

                                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.

                                Using Table of Contents to help readers find what they need fast
                                Using Table of Contents to help readers find what they need fast

                                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.

                                From the page source of a blog post, you can easily spot the CSS file from the plugin

                                In this example of LuckyWP Table of Contents, the handle is “lwptoc-main”. Just place this in your child theme’s functions.php:

                                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.

                                PHP

                                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:

                                • Making a simple view count plugin
                                • Add modified date to posts

                                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.

                                PHP

                                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

                                Filed Under: Backend, Featured, Front-end, Wordpress, Wordpress Plugins, WordPress Themes Tagged With: add_filter, php, wordpress hooks

                                Recent posts

                                [WordPress] Let’s Make Plugin E01: A Simple View Count Plugin

                                [WordPress] Create custom post type programmatically

                                [WordPress] Open Images in Posts into Lightboxes On Clicks (Without Plugins)

                                Reader Interactions

                                You are here: Home / Backend / Customizing WordPress Themes: Basic Principles & Examples

                                Leave a Reply Cancel reply

                                Your email address will not be published. Required fields are marked *

                                Primary Sidebar

                                Hi! I am a Vietnamese coder living in Oulu, Finland. Currently I am working with PHP, MySQL, HTML, CSS, and JavaScript. This blog is my learning diary, in which I share knowledge from my own experience or research. Hopefully you can find something useful here and don’t hesitate to open a discussion or leave a feedback!

                                FOLLOW MY BLOG

                                Thank you for visiting this website! I hope you find something useful here :). Contact me by email: anh@anhkarppinen.com.