Customize Your WordPress Theme’s CSS

You’ve installed your WordPress theme, and now you want more. How do you learn how to customize a WordPress theme so it looks the way you want it to? You can write to support. Or, you can do yourself; it’s easy, fun and fast.

In most cases, you only need to know basic information to change the appearance of your website. The appearance and layout of your website is controlled by Cascading Style Sheets or CSS. You can find the lines of CSS in the main stylesheet file of the theme: style.css.

CSS works by specifying selectors and applying properties. The HTML provides indicators, called ID’s and classes, that allow it to target all kinds of different parts of your website.

.hero {
   color: red;
   height: 450px;
   font-size: 36px;
}

You can learn a lot more about CSS from this reputable source.

There is a simple and useful tool for understanding and editing your website’s appearance built right into two major web browsers: Google Chrome and Safari. Google Chrome calls it DevTools and Safari calls it Web Inspector. These tools give you the power to make CSS changes on your website.

I will show you how to use this tool when working with Google Chrome.

To access the DevTools, open a web page or web app of interest in Google Chrome. You can open the tool in one of two ways. Either select the Chrome menu at the top-right of your browser window, then select Tools > Developer Tools (for Mac Chrome browser: View > Developer > Developer Tools). Alternatively, you can right-click on any page element and select Inspect Element. The DevTools window will then open at the bottom of your Chrome browser.

Look at the Inspector panel. There is code on the left and right: the code on the left is the HTML (website structure) and the code on the right is the CSS (website appearance). This screen may seem is a little complicated at first, but this is just only the beginning. – With a little practice, and it using this tool will become easy.

css edit wordpress

When you hover the cursor over a line to the left, you will see the corresponding area of the page highlighted. The appearance of that part of the page is shown in the code on the right.

To show you what I mean, check out this video:


So, you can change the values of the selectors. Once it’s changed, copy the edited code from the right (css rows) and insert it into your site’s custom CSS via custom CSS plugins.

How to Add Custom CSS to Your WordPress Theme

To use this plugin, the first thing you need to do is install and activate the Simple Custom CSS plugin. Upon activation, simply go to Appearance > Custom CSS and enter or paste your custom CSS.

Don’t forget to press the Update Custom CSS button to save your CSS.
You can now view your website to see the CSS changes. Don’t forget to refresh the page in the browser.

WordPress Source Code Editor

To edit the CSS and templates code, you can use the editor built into WordPress. This is a fast and easy way to make a few minor changes.

To edit your theme stylesheet inside WordPress, first make sure your theme is active. Next, log in to your admin area and go to Appearance > Editor. You should see your theme stylesheet in the editor. If you don’t see it, click Stylesheet (style.css) in the right hand column.

template edit wordpress

You can make your edits here and save them.

You can also change the templates of the theme. For example, consider an edit to the template our Planar theme. In this case, we want to remove the line with the theme credits. Normally, credits appear in the footer of the theme.

First, locate the file footer (right column): Theme Footer (footer.php).

Find the line

do_action( 'planar_credits' );

and comment it out:

// do_action( 'planar_credits' );

Press Update File button.

Customize WordPress Theme with Action Hooks

Customizing the appearance of the theme is great, but what if you also want to modify the theme’s functionality? WordPress is so popular due to the fact that it is highly customizable.

The WordPress Core offers with different hooks that enable modifications of the default functionality. Moreover, developers of themes and plugins can to include custom hooks in their themes and plugins.

WordPress hooks are similar to fishing hooks. In this comparison, the fish are different functions, which cling to the hooks.

There are two different kind of hooks in WordPress: actions and filters. Here we will take a look at how can make use of action hooks for theme customization. If you look at the source code of some templates, you can will find action hooks: they are added to the code with do_action().

For example, in our Planar theme, hooks look like this one that can be found in the footer.php file from Planar theme folder:

do_action( 'planar_footer' );

When you want to add your own action, you need to create a custom function and bind this function to a specific action hook by using the add_action() WordPress function.

You can use them as in this example:

Turn on the edit Functions file. In the editor, click Theme Functions (functions.php) in the right hand column.

At the end of the file, add the lines:

add_action( 'planar_footer', 'my_message_footer' );
 
function my_message_footer() {
	echo ‘<p>This is my custom footer message!</p>’;
}

These lines will print in the footer of your message.

Customization WordPress Theme using Child Theme

The correct way to make changes to a website is to create a child theme and make changes in it. Almost all of our Premium themes come with a folder with the child theme. Consider this example of a business WordPress theme called Planar. Unzip the archive planar-files.zip and there you will find a folder planar-child.

In this folder, there is a file functions.php. You can edit it using WordPress Source Code Editor (see above). First, activate the child theme. This activation is the same for any theme. A child theme can be activated if the themes folder has a parent theme.

First, make sure your child theme is active. Next, in the your admin area go to Appearance > Editor. You should find your theme Functions in the editor. Click Theme Functions (functions.php) in the right hand column.

For example, you may want to remove the line of theme credits. To do this, in the end of the file, add new lines:

// Unhook credits functions
function unhook_credits_functions() {
    remove_action( 'planar_credits','planar_txt_credits' );
}
add_action( 'init', 'unhook_credits_functions' );

Click the button Update File.

To learn more about using hooks in your child themes to customise WordPress theme, you can visit this resource.

Now you have briefly learned the basic methods of theme customization: modifying CSS, overwriting template files and using hooks.