Hi All, this post is intended for the beginners and anyone can follow who wants to create their own Website or Blog from WordPress. For the beginners to let you know WordPress is an open source Content Management Software which lets you create beautiful Websites or Blog as simple as that.

On the way we learn some below mentioned things:

  • What is a child theme?
  • Why need a child theme and how to create it ?
  • How to create custom template files e.g about us or contact us page for your Website.
  • Finally Activate child theme.

Before going further let’s have a system check to develop your Website or Blog from WordPress.

  • A server to run your Website or Blog .My favourite is wamp even though there are so many available and while downloading it be carefully about your machine’s Bits(32 or 64).
  • An editor to play with the codes. My favourite one is Notepad++.

Once you have both these two softwares installed in your machine, you are ready to go. Let’s get started.

Step 1 Downloading WordPress

The first thing you need to do while creating a Website or Blog from WordPress is download it from WordPress.org. Now extract the downloaded zip file and you should get a directory folder like shown below.
w1

Step 2 Starting the wamp Server and moving the extracted WordPress folder

Now assuming WAMP server already installed in your machine which usually does in Computer->OS(C)->wamp and running, move the extracted directory folder into the www root directory of wamp as shown below.
w2

Note : You can rename the wordpress directory name to your Website or Blog name e.g myWebsiteBlog or anything to avoid further confusion.

Step 3 Creating Database

We need a Database to hold your Website or Blog content , so to create a Database open your favourite browser and hit the URL http://localhost/ which should open the wamp server web page. Now clicking on the phpMyAdmin link under the Tools leads to the phpMyAdmin home page where we can create the Database. Now enter the Database name you want in the input field and click on the Create button.
That’s all you need to do to hold your contents and the rest WordPress will take care for you .

w3

Step 4 Configuring WordPress Installation

Now go inside your WordPress directory and you will see exactly the below shown file structures:

w4

Just rename the wp-config-sample.php file as wp-config.php and open it in your favourite editor to do the edit like below and save it.

......
// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'myWebsiteBlog');
 
/** MySQL database username */
define('DB_USER', 'root');
 
/** MySQL database password */
define('DB_PASSWORD', '');
 
/** MySQL hostname */
define('DB_HOST', 'localhost');
.....

Finally enter your wordpress url http://localhost/myWebsiteBlog/ in your browser and follow the instructions to complete the installation. Once wordpress is installed in your machine , you are ready to see the magic!

Step 5 Wordpress theme

WordPress comes with some default themes which we call the parent theme to start with, even though there are thousands of it available. Now open the wp-content folder to locate the themes in wp-content ->themes.

If you are not satisfied with the available themes, you can always download from here https://wordpress.org/themes/ to suite your needs. After downloading your selected theme ,copy it into the themes folder(wp-content->themes). For demo purpose I gonna download casper and will make a child theme of it.

A child theme is a theme which inherits all the functionality of its parent theme. Now a question might arise for you as a beginner, why do I need to create a child theme when there is an entire parent theme available to develop my Website or Blog. To answer this wonderful question I pointed out some reasons below :

  • WordPress is an open community and in most likely cases it tends to change things very frequently. So if you use the parent theme to develop your Website then any future changes or version updation will override any changes that you have made to it . Hence you lost all your hard work in a flash !
  • Develoment from a child theme is considered as the safest, fastest and easiest way to do as you can have here only what you want. Easy maintenance bro!!
  • By doing this it could be a great learning curve for a beginner to develop WordPress theme.

Remember when you are using a child theme ,you are not developing a new theme. You are just adding some new features or modifying the original one e.g layout design, some functionality etc to the parent theme only.

5.1 Creating a child theme

We have to follow some rules to create a child theme as follow :

  • Create a new folder in the child theme directory and rename it as exactly as your parent name along with appended term “-child”. Now your child theme name should look like this casper-child.
  • Copy the screenshot.png file from parent directory into casper-child. This will show your theme image in the admin panel .
  • Create a style.css file in the child theme folder to override or add new features into the parent theme.
  • Create a functions.php file in the child theme folder to load the stylesheet or add more functionality of the parent theme.
  • Copy all the files and folders from parent theme directory to child theme that you want to modify. In most cases we need index.php, header.php, page.php, sidebar.php, footer.php, includes, images etc.

The style.css file should look like as below :
*The Theme Name and Template field are mandatory only.

/*
 Theme Name:   Casper Child
 Theme URI:    https://github.com/lacymorrow/casper-child/
 Description:  Moesia Child Theme
 Author: Lacy Morrow
 Author URI: http://lacymorrow.com
 Template: casper
 Version: 1.1.0
 Tags: responsive-layout, black, white, one-column, fluid-layout, custom-header, custom-menu, editor-style
Text Domain: casper 
*/
/* =Theme customization starts here-------------------------------------------------------------- */

The functions.php file should look like as below :

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
// Your other customize code goes here
?>

Now your child theme directory should look like as below :

child theme

5.2 Activate Child Theme

Log in to your site’s dashboard http://localhost/myWebsiteBlog/wp-admin/ , and go to Appearance -> Themes. Here you see your child theme listed, just click the activate button folks!

Step 6 Creating custom template file

Create a new file from your editor and name it something meaningful which ends with ‘-page.php’ and save it in the child directory. We named it about-page.php for our demo purpose as it could be anything as you like.Then at the very top of the page we need to give template a name.

Now open index.php file from parent theme and copy the contents from it and paste into our newly created about-page.php file. We modify the contents by removing casper_paging_nav() and get_sidebar() functions. This is my way of creating custom template file as it could vary from person to person.

The about-page.php file should look like as shown below:

<?php
/*
Template Name: About Me
*/
 get_header(); ?>
<?php if ( have_posts() ) : ?>
 
			<?php /* Start the Loop */ ?>
			<?php while ( have_posts() ) : the_post(); ?>
				<?php
					/* Include the Post-Format-specific template for the content.
					 * If you want to override this in a child theme, then include a file
					 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
					 */
					get_template_part( 'content', get_post_format() );
				?>
			<?php endwhile; ?>				
		<?php else : ?>
			<?php get_template_part( 'content', 'none' ); ?>
		<?php endif; ?>
<?php get_footer(); ?>

Now lets get some contents for our about page. To do this navigate to pages->Add New from your site’s dashboard and add whatever just you like. Now set the custom template page from template dropdown under page attributes on right side. Now click the Update button and you are ready to go!

w5

Ya that’s All. If I missed anything or if you notice any typos kindly leave a comment and let everyone know it.

Content credits : www.wordpress.org