July 19, 2015

How To Customize WordPress Theme Without Worries For Non-Techies

|
For non-techies who try to customize or tweak your WordPress theme can be a very scary and frustrating ordeal.

Yes, you can screw up big time!

Suddenly you find your site has disappeared.

The next thing you found out that you cannot even login to your site.

In other words, you are left stranded outside in the lurch.

One safe and easy way to avoid unforeseen incident, you create a child theme.

What is a child theme?


Basically it is a WordPress theme that has the same functions as the WordPress theme which you are using now.

This theme which you are using is called the parent theme.

This so-called child theme which you need to create, so that you can use it to customize or modify your site.

Probably you want to change the font size or color, or even the spacing of the layout.

With the child theme, you can customize it without disturbing the parent theme.

 In other words, you keep the customization separate from parent theme functions.

In future, when there is an update to the parent theme, you don't have to worry about losing all the changes or modifications which you have made.

So, want to know how to create a child theme?

Keep reading...

How To Create Child Them For Non-Techies


This is an easy-to-understand guide on how to create a WordPress child theme.

There are three main steps:

1. Create a child theme folder in host server

2. Create CSS file inside the child theme folder

3. Upload and activate child theme

Step One: Create Child Theme Folder In Host Server

1. Log into your host server (Bluehost, HostGator, etc).

2. Click "File Manager".

3. Double click on wp-content.

4. Double click on themes.

5. Click "New Folder" icon which is on top of the page.

6. Type in the name of your folder as "parentthemename-child".

Note: The folder name should be, your parent theme name, dash child.

Example: If the parent them is called abc, then child name should be: abc-child.

7. Click on "Create New Folder" button.

8. Now you should see this newly-created folder "abc-child" next to your parent theme.

Note: The child them folder should be next to the parent theme and not inside the parent theme!

Step Two: Create CSS File Inside Child Theme File

1. Open your Notepad: and paste this code

/*
 Theme Name:     ABC Child 

 Template:       abc
Description: Child theme for abc design
*/

@import url("../abc/style.css");


Note: ABC and abc is the name of your theme which you want to create a child theme.

This is just an example, so you need to replace them with your own theme name.

Important: Be careful  with the last line @import url("../abc/style.css");

Particularly the name of the theme. It is case sensitive. In other words, make sure both (parent and child) must be of the same case.

If the parent theme template in the directory is in small letters, then the last line "abc" must in small letters as well.

2. Save this file as: style.css

3. Go back to your host server where you have created a child folder in Step One. Click on it.

4. Then click "Upload" icon which is on top of the page.

5. Click "Browse" button.

6. Select the style.css file which you just created.

7. Click on the "Open" button" and it will start to upload it into the child folder.

Step Three: Install And Activate Child Theme

1. Go to your WordPress Dashboard.

2. Go "Appearance", click on "Themes".

3. Now you should see your newly created  child theme below the page.

4. Click on "Activate" button.

5. That's all.

At this point you won't see any change in your blog design style, as you have not customize it yet.

To do that you need to add certain CSS code to it and click "Update File" button.

Note: This is a just a basic child theme for you to make changes to your style sheet.

Of course you need to know some basic CSS knowledge to modify or customize your site.

Modify WordPress Templates Files


Each section of WordPress is control from different template file with the name ends with .php.

There are:  function.php, single post.php, header.php, footer.php, etc.

If you want to make any change or add any code on these template files, you need to select the template file which you want to modify.

For example, you need to add or modify the footer.php, you copy the footer.php file.

To get to the footer.php, this is what you do:

1. Click to "Theme Editor" on the Dashboard.

2. Then you can see a list of .php templates on the right side of the page.

3. Scroll until you see footer.php.

4. Click on it.

5. It opens a page with code.

6.  Copy the code from here and paste it on the Notepad.

7.  After make the changes to the code, then you saved it as: footer.php.

8. Then you upload it to the child theme folder.

 Another method of  customizing template files is via child theme function.php.

Modify Template Files Via Child Theme function.php

1. Go to the child theme folder and create a file called function.php.

2. Just copy the part of the code which you need to modify and paste it in the function.php.

Note: Do not copy the full content of functions.php of the parent theme into functions.php in the child theme.

 
Note: For those of you who are still afraid of messing up anything, then they can use the One-Click Child plugin at:  https://wordpress.org/plugins/one-click-child-theme/