How to Customize WordPress Themes Like A Pro? Ultimate Guide for Beginners

Spread the love
  • 3

With WordPress themes, you can very easily change the look and feel of your website. There are thousands of free and premium WordPress themes available online. Premium themes offer more advanced features and functionality. If you want to create custom landing pages or add your own styling to your theme, you can do customize your theme. There are different ways to customize WordPress themes.

If you want to add custom CSS, you can do it very easily without installing new plugins or creating a child theme. But if you want to customize some template files, edit footer, header or any other section of your theme, you should create WordPress child theme.

In this article, I will show you how to customize WordPress themes. Never ever, edit theme files directly, always create a child theme to customize theme files. To add custom styling with CSS, use Additional CSS feature, don’t add new styles in your theme’s default style.css file.

How to Add Custom CSS styles?

Login to your WordPress dashboard, go to Appearance > Customize > Additional CSS and add your new custom CSS styles. If you are using an older version of WordPress, update your WordPress installation to 4.7.

Additional CSS feature is introduced in WordPress 4.7, the purpose of this feature is to let users easily add Custom CSS via Customizer without installing a CSS plugin.

You can see the live preview of your new CSS styles and changes immediately – without saving and refreshing. The new Additional CSS feature surely helps users to customize the theme styles more efficiently than before.

READ  How to Build a Website Without Coding - Step by Step

For example, if you want to change the default link color to red, add the following code: a{color: red;}. To change the size of the post titles, add the following code h1{font-size: 2rem;}

You can use chrome developer tools to easily find and edit default CSS styles. Open front-end of your website in Chrome browser. Press Ctrl+Shift+I or right click anywhere on the page and select Inspect to open Element Inspector.

Under Elements tab, you can see two columns. On the left columns, You can see all the HTML of your page and in the right side columns, you can see all the CSS styles.

You can click on any element to edit it. If you want to see all the styles of a post title, right click on the heading and click inspect to see all the related styling.

In the screenshot below, you can see h1 has a class of entry-title and we can use this class to change the default size of the title.

Now, You can copy this new style rule and paste in the Additional CSS box. You can also see the live preview of all changes.

How to Edit Theme Files Without Losing Your Changes

If you want to customize header, footer, sidebar or any other section of your theme, you should create a child theme. With child themes, You can create custom pages for categories or products pages.

With child themes, you can even create beautiful landing pages for products or offer ethical bribe to grow your email list. You can read this tutorial at pagely blog to learn how to code a highly converting custom landing page.

READ  The Best WordPress WebP Plugins - And How to Use Each of Them

How to Create a Child Theme?

Creating child theme is simple and easy. Create a new folder in your themes folder and name it themename-child or anything your want.

For example, if you want to create a TentySixteen child theme, create a new folder and save it as twentysixteen-child. In your child theme folder, create two files:

  • functions.php
  • style.css

Both of these files are required. Now open styles.css file in your child theme and add following code:

Open functions.php file and add following code:

where parent-style is the same $handle used in the parent theme when it registers its stylesheet.

How to Remove Powered By WordPress Link?

Many people want to remove Powered By WordPress from footer, there are two ways to remove this, you can find the related CSS class and hide it with CSS or remove the code from footer.php file.

If you are using Twenty Sixteen theme, you can use following CSS to hide the link from the footer.

Or you can create a footer.php file in your child theme and customize it. Copy footer.php file from Twenty Sixteen theme and paste in your child theme folder.

Now open footer.php file and remove the following code. This function generates powered by WordPress link.

     * Fires before the twentysixteen footer text for footer customization.
     * @since Twenty Sixteen 1.0
    do_action( 'twentysixteen_credits' );

If you want to add a new widget area in the header section of your theme, copy header.php from parent theme and then add all new code and other changes in this file.

READ  Photography WordPress Themes - The Ultimate Collection

How to Add Google MDL Lite CSS to Your Theme

To register new widgets, navigation menus or other function, create a functions.php file and use this file to register new fonts, widgets, menus etc. You can also add support for Bootstrap, Foundation Zurb, Google MDL and other CSS frameworks and libraries.

If you want to use Google Material Design Lite CSS in your theme, copy material.min.css file in your child theme and use this function to register the material design CSS:

Now you can use Google Material Design on your WordPress website. Material Design Lite is a light-weight CSS framework, which lets you add Material Design look and feel to your websites.

Add Bootstrap CSS and JavaScrit to Your Theme

Bootstrap is one of the most popular front-end development framework to easily build responsive and mobile friendly websites. There are hundreds of free and premium Bootstrap based WordPress themes available.

If your default theme does not support Bootstrap framework, you can add it by using the following function. Just add this code to your theme’s functions.php file:

You can read my tutorial to learn how to get started with Bootstrap framework.

Final Words

That’s all for this article, I hope now you will be able to customize WordPress themes easily.

(Visited 366 times, 1 visits today)
  • 3

Tahir Taous

Tahir Taous is the founder of JustLearnWP. He loves to write about WordPress, Theme Development, Responsive Design, and Blogging. He is an expert when it comes to using awesome tools and techniques to create and customize WordPress Themes. You can Download Free WordPress Theme Development Toolkit, which reveals the best tools to create Responsive WordPress themes.

dapibus eget accumsan diam tristique mattis dolor.

Pin It on Pinterest

Do you find this interesting?

Share it with your friends!