How to Customize Your WordPress Theme?

WordPress (WP) comes with an array of high quality features, one of which is the ability to customize the interface to suit the requirements of the user. For those of you who are new to this concept, we’ve got you covered. This feature, within the WP admin, is created for users to adjust the settings to their preference, which include colours, fonts, text, etc. Here’s our simple, yet comprehensive, guide that will take you through the end-to-end process and allow you to maximise the potential of WP.

Accessing the WP Customization Page

First, to access the WP customization page, go to the Appearance > Theme Pages as shown below:

(Insert screenshot)

Once you are on this page, you will see the active theme. Click on the Customize button on the right end of this theme as shown below:

(Insert screenshot)

Once you have clicked on the Customize button, you will come to a screen that looks as below:

(Insert screenshot)

The above is the screen, wherein you can begin your customization process. As shown below, the left hand side of the screen is meant for you to insert customizations based on your preference. As you undertake this, the right hand side of the screen will give you a preview of the manner in which these customizations will change your website.

(Insert screenshot)

Modifying WordPress Titles and Taglines

As shown below, to modify your website’s titles and taglines, along with an immediate preview of how it will look on your website, expand the setting of the Site Title and Tagline group and modify the text according to your preference. While you are in the process of doing this, you will be able to view the look and feel of the changes on the right side. If and when you are satisfied with the modifications made, click on the Save & Publish button to implement the changes across your website.

(Insert screenshot)

Modifying the WP Front Page

The WP front page has a choice of two options – static or a list of posts with a glimpse of the content. Both the above options, further allow you to choose from any of your published pages. As shown below, you can choose your preferred setting by expanding the Static Front Page tab:

(Insert Screenshot)

The Basics of Child Themes

It is a viable concern, for many users, to avoid customization of themes due to the risks involved. We, therefore, are highlighting the safest way to undertake WordPress theme customizations that will not only mitigate the risks, but also give you the final result that you desire.

The safest way to undertake WP theme customizations is to steer clear from making direct changes to themes. Instead, choose to create child themes and offline flies. This will keep you safe from altering original files, and in the event that you need to revert to original themes, they are easily accessible since they have been untouched. The basic meaning of a child theme is that it inherently has the same styling and function of a parent theme (the original theme). You can use the child theme and make changes to your preference, while keeping the parent theme unaltered.

Now, let’s take a look at how you can work with WordPress child themes for customization. This is a fairly easy task, one that involves creating a folder and a file on your machine with the name of the child theme. We recommend using the parent theme name followed by the word ‘childtheme’ for the sake of clarity. Now within the folder, you should create a file. Before anything else, go to the text editor of the file and remember to choose ‘style.css’. Then add in the below mentioned code:

(Do not use the below sample code. Insert original code screenshot here as shown in this example)

/*

Theme Name: My Child Theme

Theme URI: http://mysite.com/

Description: This is a custom child theme I have created.

Author: My Name

Author URI: http://mysite.com/

Template: parenttheme

Version: 0.1

*/

As you can see above, most of the information entered into the code is of a general nature. However, there is one important part of this code that requires close attention for the correct functionality of your child theme. The ‘Template’ line must carry the name of the parent theme that you want the child theme to reflect. This is highlighted below for further clarity.

(Insert screenshot of template line highlighted).

Now, to go to the next step, your current child theme has no information added that gives it styling direction. To do this, you need to add in the style code as below and add in the parent theme that you have selected. Once completed, save your file.

(Do not use the below example. Use original screenshot of styling code)

@import url(“../parenttheme/style.css”);

To add your newly created child theme to your WP installation, connect to your web host with an FTP program of your choice, along with the browsing details as follow: /wp-content/themes/ folder and upload the child theme. It will look like this:

(insert relevant screenshot here)

You are now ready to make all sorts of design and styling tweaks towards your preference, while being secured that your parent theme will remain unaffected.

WP Design Customizations in Child Themes

The options for design customizations are numerous and you will, therefore, have plentiful options to choose from with regard to the colour scheme, typography, text size, navigations, image styling, etc.

Adding links to your site creates different link style options. We have highlighted some of the important links that you might consider:

(do not use the below example. Insert relevant screenshot here)

  • a:link (or just “a”)– this is a normal, unvisited link
  • a:hover– this is what happens when you hover over a link
  • a:visited– this is a link the user has already visited
  • a:active– this is a link at the moment it is clicked

Choosing Custom Codes over Plugins

When it comes to WP customization, plugins have always been a popular feature. Even though these plugins come with an array of attractive options of customization, they are quite heavy and can considerably increase the load time of your website. This is due to the fact that plugins require more amount of coding for their interaction with the core WP software. Moreover, there is always a security risk with plugins, if not duly uploaded. This is not to say that plugins should be completely avoided. However, only use where the feature and advantage of them is necessary. But in most situations, custom codes can do the job in an easier and cleaner manner than plugins.

Let’s take a look at some additional tips to smoothen the WP customization process.

Handy Tips for WordPress Customization

Every code in WordPress is empowered to offer theme customization. To make your customization process as smooth as possible, we have put together some WordPress Customizations tips. All you have to do is add these codes in your function.php file of your WordPress theme.

  1. Keep the Excerpts Word Count Minimal: This simply means that you restrict the word count before the ‘more’ tag to 8-10 words. This will make sure that text heavy pages are not marred by too many words in the excerpt. Even though you could manually change this count, it is a fairly long process to do it individually for each page. Keeping this as a general rule will save a lot of time and effort. This is how it should look in your coding (insert coding screenshot here)
  2. Use Hooks for Increased Flexibility: Keeping the template untouched, the use of hooks will allow you to insert custom codes. This helps when you need to make modifications, since it limits the modifications to only that particular hook, as opposed to the entire template. (insert a hook screenshot here). As you can see above, the hook file should be at the centre of your theme. These can be conveniently used for saving a certain section of your site, for user registration, etc.
  3. Mobile-centric Safari Sensor: This is a smart tool to detect if the website user is using a mobile device and then automatically identifies the Safari feature on the device. This function allows you to create customized styles and layouts for users that access your website on an IPhone or IPad. All you need is insert a variable ‘$is_iphone’ and apply the settings that you would like for mobile viewing. (insert code example screenshot here)
  4. Insert a Logo in the Login Page: For this, all you need to do is apply the ‘login_head’ hook that implements every function related to the login page’s ‘head’ section. (insert hook example screenshot here)
  5. Restrict Content Display for Registered Users: If you have the kind of website, wherein you want to limit the entire content to be visible only to the users that are logged in or registered, and hidden from the newcomers or casual readers, here is how to do it. Insert a short code, such as the one shown below – (insert code example screenshot here) You can do the same to display content only to RSS subscribers.
  6. Pull Traffic to the Website: If you want to limit the content that viewers can see on your RSS feeds, and encourage them to visit the website for the entire show, there is a way. Limit your RSS feeds to short excerpts or partial images by using the following code. (insert code example screenshot here).
  7. Keep Header Elements Minimal: Restrict your viewers from irrelevant information in the header by using the following code. Remove the ‘generator’ meta tag that will erase the version of WordPress being used from being displayed. Similarly, other elements that are not being used can be removed too. (insert code example screenshot here)
  8. Get User Statistics: There is a way for you to insert coding that will show you the statistics of your viewers or subscribers. This can be done through ‘FeedBurner’. Use the following code, to redirect yourself to FeedBurner. (insert code example screenshot here)
  9. Be Creative with Social Media: If you are looking for a way to highlight your social media, apart from the standard images, there is a way to do it with WP customization. You can add your own codes that relate to your social media page through the following code. (insert code example screenshot here)
  10. Use the Live Previews Function: This function allows you to preview any Java changes as you enter your modifications. This way you can see the changes as you go along (insert code example screenshot here)
>