How to create your own Theme for WordPress

In this post I’m going to explain the most basic steps I have collect to create your own theme for WordPress.

wordpress-water

The main idea is to get the main structure to learn the different parts of WordPress themes as a base for future design and functional enrichments.

You could download files of the ikerbitwp theme I’m going to try to explain briefly.

I have built the theme from this basic HTML Web page.

 

 

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"><title>ikerbitwp theme</title>
	</head>
	<body>
		<h1>Hello world. I’m ikerbitwp theme</h1>
		<p>My first paragraph.</p>
		<div>
		Visit us at <a href='http://www.ikerbit.com'><a href="http://www.ikerbit.com/">ikerbit</a></a>.
		</div>
	</body>
</html>

First, access to “/wp-content/themes” path where WordPress is installed. The “themes” folder contains a folder for each theme.

In the same path, create a new folder for the new theme, in this case “ikerbitwp”.

Now, we will create the files for the new theme in “/wp-content/themes/ikerbitwp”.

We will separate in 3 parts the static HTML code we are going to use. The first one, the header in header.php file. The second one, the contain, in the index.php file and finally, the last part, the footer in the footer.php file.

1.- screenshot.png file

We need an image file to identify our theme. Create or get 300×225 px size image file and save it as screenshot.png. Our new theme will appear with this image in the list of themes.

2.- index.php file

Index.php is considered the main page. We will create a simple index.php file with a simple structure: The load of the header (header.php), 3 lines of HTML code (title and paragraph) and finally the footer or footer (footer.php).

2.1.- get_header() and get_footer() tags

We will insert the label get_header() at the beginning of the file. This tag will load the top header content of the site, concretely the content of the file header.php we will discussed later. Also insert the label get_footer() at the end of the file to load the contents of the footer. This format works for other custom pages that can be created in the future.

index.php code

<?php get_header(); ?>
	<!-- HTML -->
	<h1>Hello world. I’m ikerbitwp theme</h1>
	<p>My first paragraph.</p>
<?phpget_footer(); ?>

3.- style.css file

Now let’s create the “style.css” file on the same path.
This file contains the style CSS code to display the content of the site with our theme. Style.css file contains too a comment which contains the information of the specifications of the theme.
In this case we insert in the comment some specifications such a, THEMENAME, Author, etc.
At the end of the file we include some basic css instructions for the body.

style.css file

/*
Theme Name: ikerbitwp
Theme URI: http://ikerbit.com
Version: 1.0
Description: Simple base WP theme
Author: Iker Zazpe
Author URI: http://ikerbit.com
Template: ikerbitwp
Tags: wordpress, basic, theme
License URI: http://creativecommons.org/licenses/by-sa/3.0/
License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
*/
/*----------------- changes start here---------*/
body {
     padding-top: 60px;
     padding-bottom: 40px;
}

4.- header.php file

We will create the header.php file in the theme folder.
This file contains the code for the site header. It is assumed that the same header will be charged at the beginning of each page so a call will be made to this file each time.
First, insert the HTML header code.

 

4.1.- bloginfo() tag

We use this tag to load the CSS style sheet file implementing the following line in the header.php file.

<link href="<?phpbloginfo('stylesheet_url');?>" rel="stylesheet">

 

4.2.- wp_enqueue_script() tag

This tag implements a way to add  javascript content in WordPress generated pages.

<?php wp_enqueue_script("jquery"); ?>

 

4.3.- wp_head() tag

Insert wp_head ()” label. This label will permit that Javascript or CSS content can be modified by plugins.

<?phpwp_head(); ?>

header.php file

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>ikerbitwp theme</title>
  <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
  <?php wp_enqueue_script("jquery"); ?>
  <?php wp_head(); ?>
  </head>
  <body>

5.- footer.php file

We create the footer.php file in the same path and we insert the wp_footer() tag. This tag has the same function as the wp_head ()tag in the header.php file, but in this case will load the footer on each page.

Insert the tag just before the closing body tag.

<?php wp_footer(); ?>
</body>

footer.php file

<div>
	Visit us at <a href='http://www.ikerbit.com'>ikerbit</a>.
</div>

<?php wp_footer(); ?>

</body>
</html>

6.- home.php page

This page will be the static page of the theme. Using the index.php file as a template, copy the content of the file and create the home.php file with the same content. The static load page of the theme (home) can be set in the theme administration area.

ikerbitwp1

The result should be the next:

ikerbitwp2

7.- front-page.php page

This file is used in WordPress as dynamic home page (Your latest posts) and it can be set as default selecting theme properties in administration area.

ikerbitwp3

Using index.php file as a template we are going to create a new front-page.php file with the same content. Then we will modify the content to display dynamically recent posts or entries.
We change the title for POSTS” before the content of the posts.

<h1>Posts</h1>

7.1.- Insert the loop of WordPress.

WordPress loop displays dynamically the contents of pages and posts associated on the database. We put this loop between get_header() and get_footer() tags.
In this case we will show in the loop the title with “the_title()” tag and the content of posts with the_content() tag.

front-page.php file

<?php get_header(); ?>
	<!-- HTML -->
	<h1>Posts</h1>

	<!-- Loop WordPress -->
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<h2><?php the_title(); ?></h2>
		<?php the_content(); ?>
	<?php endwhile; else: ?>
		<p><?php _e('Sorry, this page does not exist.'); ?></p>
	<?php endif; ?>

<?php get_footer(); ?>
When the page is loaded the content should be load like this:

Posts(HTML tittle)
Loop (each post)
– Post tittle
– Post content

ikerbitwp4

To finish our theme we will create 3 empty files that are not essential (functions.php, sidebar.php and comments.php). We will code those files in future additions.

8.-functions.php file

The functions.php file is not a prerequisite for WordPress and its functions only run if WordPress finds it in the root folder of theme.

The functions.php file encodes functions that implement specific features of theme and connects them with other functions of WordPress.

9.- sidebar.php file

This file manages the widgets, sidebar, links to categories, etc.

10.- comments.php file

This file functions are coded to manage comments that users can leave in posts.

This is all for now I hope you find it interesting.