How To Create WordPress Themes: Tutorial 2

How to create WordPress Themes:

So far we have done all the basic foundation required WordPress theme development. From this tutorial on wards we will be doing the core coding for developing the first WordPress theme. At the end of this tutorial series you will have created a WordPress theme.

Also See : Creating A fully Functional Website

Creating Root Folder for Theme:

To create a WordPress theme you will need a root folder to store all your files and folders. Follow the steps below to create one.

  • Go to c drive >> XAMPP >> htdocs >>wordpress>>wp-content>>themes
  • In themes folder create a new folder for your theme and name it as innovation.

All the WordPress themes are present in themes folder. All the theme files we are going to create will be present inside this folder.

Go to innovation(theme folder) you just created and create the following files.

  • Index.php
  • Sidebar.php
  • Footer.php
  • Header.php
  • Functions.php
  • Style.css

NOTE: The stylesheet file name should be strictly style.css WordPress does not recognise stylesheet with different name.

We will need following files to create our theme. To make theme more functional we need additional files which we will add later on. Right now let’s keep it simple.

From the above image it is very much clear that we will be creating different pages for header, footer and  sidebar.

Basic difference between WordPress theme and static HTML website:

Also See : Learning HTML for Beginners

In most simple words the comparison is as follows:

HTML Website WordPress Website
No database Database used to store data
Articles not added automatically in hierarchical manner Articles added in hierarchical manner
No dashboard to add articles, menus etc User interface dashboard to add articles, categories, menus etc.
User need to understand code No coding knowledge is required for user

In WordPress the data is not related to design while in static webpage data is related to design. Whenever we need to edit article we need to edit code while in WordPress blog we can edit it from WordPress dashboard without touching the code.

The data is stored in mysql database and is called using php functions whenever browser makes a request. So if the design of webpage is messed up we need not to worry about the data as it is safe in database.

Configuring  stylesheet file:

Open the style.css file which is currently blank and paste the below code in it.


/*

Theme Name: Innovation

Theme URI: http://www.brainytuts.com

Author: brainytuts

Author URI: http://brainythemes.com/

Description: This is the demo theme we are creating for this tutorial series

Version: 1.0

*/

Now save it and go to localhost/wordpress/wp-admin and open your wordpress dashboard. Under appearance>> themes you must see the theme name innovation or the name you have given. But you cannot see the image for you theme. To see image you need to add an image in root folder and name it as screenshot. Once you have added the image once again check the wordpress dashboard and you can see the image above theme name.

Creating header of the theme:

Open the header.php file and paste the following code in it. Once you save it go to themes section in WordPress dashboard and activate the innovation theme and check how your theme looks at http://www.localhost/wordpress/ .I will explain the code in later on. If you have followed all the steps correctly your webpage should look like this.

creating WordPress themes

The code is as follows:


<b> </b>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title><?php bloginfo('title');?> | <?php bloginfo('url'); ?></title>

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

<div id="header">

<?php bloginfo('name'); ?>

</div>

Code Explanation:

  • Function <?php bloginfo(‘title’); ?> is used to display the title of website where as function  <?php bloginfo(‘url’); ?> is used to display url of website.
  • Function <?php bloginfo(‘stylesheet_url’); ?> is used to link the stylesheet file. It automatically detects the stylesheet file.
  • We have created a container is for whole webpage which closes in footer and header is for header. In header is all the header information is present. We will later on create navigation and logo in header section.

CSS code for header:

Copy and paste the following code in style.css file. It contains the layout attributes for header and container id.

CSS code:


body {

margin: 0px;

padding: 0px;

}

#container {

background-color: #E3E3E3;

width: 100%;

}

#header {

color: #FFF;

background-color: #96C;

height: 150px;

width: 100%;

margin-bottom: 10px;

font-family: Arial, Helvetica, sans-serif;

font-size: 36px;

text-align: center;

}

How to Create Homepage of WordPress Theme:

index.php file is the homepage of our wordpress blog/website. It consists of wordpress loop and a call to header, footer, sidebar and other files.

The wordpress loop:

WordPress loop is responsible to add the posts in hierarchical manner. Whenever a new post is added it shows it on top of previous one. WordPress loop is a php function.

<?php if (have_posts()): while(have_posts()): the_post(); ?>

<?php endwhile; else:  ?>

<?php  _e(‘We apologize for any inconvenience, please hit back on your browser );  ?>

<?php endif; ?>

  • From the above code we can see that we check if the posts are available using the loops.
  • If the posts are not available we show the error message saying “’We apologize for any inconvenience, please hit back on your browser”
  • The <?php _e ?> or <?php echo ?> is used to print the statements.

Index.php code:

Note: If you are using Dreamweaver cc to create a theme I have a small useful tip for you. Go to site>> site-specific code hints >> structure >> wordpress. Now whenever you press ctrl+space you will get code hinting for wordpress.

Below is the code for homepage.


<?php get_header(); ?>

<div id="content">

&nbsp;

<?php if (have_posts()): while(have_posts()): the_post(); ?>

<h2><?php the_title(); ?></h2>

<p>posted by <?php the_author(); ?> on <?php the_date(); ?> </p>

<?php the_excerpt(40); ?>

<?php endwhile; else:  ?>

<?php  echo "We apologize for any inconvenience, please hit back on your browser";  ?>

<?php endif; ?>

&nbsp;

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?> 

CSS code for index.php file:

Add the code below in style.css file. Once you add it save all the files and refresh the webpage that is localhost/wordpress. You must see the webpage as shown in the  below image.

Building WordPress theme


#content {

color: #FFF;

background-color: #CCC;

height: auto;

width: 70%;

float: left;

padding-left: 1%;

font-family: Arial, Helvetica, sans-serif;

}

Code Explanation:

  • Function <?php the_title(); ?> is used to show title.
  • Function <?php the_author(); ?> is used to show the author name.
  • <?php the_date(); ?> is used to display the date.
  • <?php the_excerpt(); ?> is used to display the post summary.

The functions <?php get_header(); ?>

 <?php get_footer?> and <?php get_sidebar(); ?> are used to call the respective files.

We are using the div id #container to display the content of website. If you check the look of website it may look dull but we can make it attractive using the css properties. So don’t worry about the look of website right now.

Creating Sidebar of WordPress Theme:

Sidebar.php is the sidebar file of your website. It contains widgets, advertising banners and social network icons. To enable widgets we need to add a widget function in functions.php file. After adding that function the widgets option will be available in WordPress dashboard>> appearance >> widgets which is not present right now.

Widget function in Functions.php File:

To enable widget function we first need add the widget function. Copy and paste the below code in functions.php file.


<!--sidebar -->

<?php

if ( function_exists('register_sidebar') )

// Sidebar Widget

register_sidebar(array('name'=>'right-Sidebar',

'before_widget' => '<li>',

'after_widget' => '</li>',

'before_title' => '<h3>',

'after_title' => '</h3>',

));

?> 

This is the core WordPress function to add widgets to blog. The name of that function is function widgets(). Here the name of the sidebar is sidebar 1.

Sidebar.php file:

Now go back to sidebar.php file and paste the following code there.


&nbsp;

<div id=”sidebar”>

<ul class=”sidebar_list”>

<?php if ( ! dynamic_sidebar( ‘Sidebar’ )) : ?>

<li id=”sidebar-search” class=”widget”>

<h3><?php _e(‘Search’, ‘brainytuts’); ?></h3>

<?php get_search_form(); ?>

</li>

<li id=”sidebar-archives” class=”widget”>

<h3><?php _e(‘Archives’, ‘brainytuts’) ?></h3>

<ul>

<?php wp_get_archives( ‘type=monthly’ ); ?>

</ul>

</li>

<li id=”sidebar-meta” class=”widget”>

<h3><?php _e(‘Meta’, ‘brainytuts’) ?></h3>

<ul>

<?php wp_register(); ?>

<li><?php wp_loginout(); ?></li>

<?php wp_meta(); ?>

</ul>

</li>

<?php endif; ?>

</ul>

</div>

CSS code for sidebar:

Copy and paste the following code in styl.css file. I will explain every part of it in detail later on.

Code start here:


<b> </b>

#sidebar {

color: #000;

background-color: #dbbdbd;

padding-left: 2%;

height: auto;

width: 25%;

float: left;

margin-bottom: 10px;

margin-left: 10px;

}

&nbsp;

.sidebar_list {

font-size: 16px;

background-color: #dbbdbd;

margin-right: 4%;

}
  • Here we are using div id sidebar for sidebar and div class sidebar_list for the widgets that are to be placed in sidebar.

Code Explanation for sidebar.php:

We are going to show 3 default widgets if the user has not used nay of the widgets. It means if no widgets are active this three widgets will be active. They are search, Archive and login for wordpress dashboard.

  •  <?php if ( ! dynamic_sidebar( ‘Sidebar’ )) : ?>  The if condition states that if dynamic sidebar is not used show the default widgets and below that we have written code for the default widgets.
  • Function <?php get_search_form(); ?> displays the search form.
  • Function <?php wp_get_archives( ‘type=monthly’ ); ?> displays the archives. You can also change archives to daily by changing its tye.
  • <?php wp_register(); ?> <?php wp_loginout(); ?> <?php wp_meta(); ?> These three functions are used for login, logout and registeration purpose.

Now go to browser and refresh the page. Your blog should look as shown in image below.

How to create WordPress themes

If it shows something else verify the code. You can also download the source files which are available in the last tutorial of this series.

Creating Footer:

Finally we are at the end of this tutorial with only footer left. We are going to display the copyright information in footer. Later on in next tutorial we will make widgetized footer. Type the following code into your footer.php file.

Code start here:


<div id="footer">

<a href="<?php echo home_url(); ?>/" title="<?php bloginfo('description'); ?>">

<?php bloginfo('name'); ?></a> Copyright &copy; <?php echo date("Y") ?>

</div>

</div>

<!-- [end of container] -->

</body>

</html>

CSS code for Footer:

Add the below code in style.css file and refresh the browser.


#footer {

color: #fff;

background-color: #222;

font-family: Arial, Helvetica, sans-serif;

font-size: 18px;

height: 60px;

width: 100%;

float: left;

text-align: center;

}

Where to go from here:

We have now done the basic functionality needed for WordPress theme. In next tutorials we will work on the design of theme and we will make it more attractive. After that we will add more functions to our theme to make it more functional. We will be adding functions such as different post types, short codes, theme admin panel and many more. So go through the next tutorials to make more out of wordpress themes.

We are at the end of hectic tutorial. Are you feeling satisfied? Have you got what you were looking for? Please let us know so we can improve quality of our tutorials.

Next Tutorial : Building WordPress themes: Tutorial 3