If you are thinking of creating your own wordpress theme, you are at the right place. Creating a wordpress theme for the first time may be little confusing but once you get hold of the way wordpress themes are developed, you will feel lot better. The first and foremost thing that you need to understand before we start developing a wordpress theme is WordPress Theme Structure which we have already covered in our previous post but let me remind the important points
- WordPress themes are modularly developed by splitting the code into multiple template files.
- These template files will have a targeted purpose with a unique name.
- style.css, header.php, footer.php, index.php, single.php, sidebar.php, comments.php …, are some of the template files in a WordPress theme.
Pr-requisites:
- HTML, CSS, PHP
- Text Editor ( I will be using Sublime Text )
- Local WordPress Installation
- WordPress Theme Structure
Theme Structure
There are many other template files like page.php, 404.php, archive.php that I did not mention in the above image because a theme can be developed without having these template files but the two important template files that we should have are “index.php” and “style.css” without which WordPress will not allow to proceed any further. Hope you are geared up for coding these files, let us begin
Theme Development
Create a new folder inside of your “/wp-content/themes/” folder and give it a name (generally theme name). This folder will contain all your theme files like images, scripts etc. Now, create the two important template files “style.css” and “index.php” inside this folder. After creating these two important template files if you look at Themes list in WordPress Dashboard at “Appearance->Themes”, you will find that your new theme is not being displayed, this is because of the fact that WordPress reads any theme information by the declaration maintained in theme Stylesheet(style.css) which we did not maintain yet. This declaration has a specific syntax and following snippet is a sample of such declaration
/* Theme Name: Basic Theme Theme URI: http://technophileshub.com/?p=1575 Author: Pavan Kumar Author URI: http://technophileshub.com/about/ Description: A basic WordPress theme Version: 1.0 License: N/A License URI: N/A Tags: basic theme Theme developed to demonstrate wordpress theme development at technophileshub */
Please go ahead and maintain this declaration in your “style.css” file of your theme. After defining this declaration, if you refresh the Themes list, you will find your new theme with the given Theme Name in Themes list.
Probably if you notice, the new theme is not showing any logo or image while displaying the theme list, this is because we did not maintain any “screenshot.png” image file in the theme directory which WordPress will need to display the image in this list. Never mind, let’s go ahead and activate our new theme. If you look at your blog, Now you are running your blog on a theme that you have created. Yay !!!, our new theme is live but as we haven’t written single line of code a blank page will appear.
Now it’s time for some real coding but nothing to be worried, we will work in a series of progressive steps from top to down of a page and understand every line of code that we are writing. So, let’s begin with header.php template file.
header.php Template File
I believe I need not explain what is header of a webpage and what does it contain as most of us are already aware of this and this is no different than what you already know. header.php is a template file that contains the code written for header section of your blog. It is not a strict rule that you have to maintain only header part of your blog in header.php file but to leverage the full potential WordPress, it is good to put the code in header.php that is common for every page of your theme like Logo, Navigation menu’s etc. After all that’s the purpose of having these template files than individual page where we repeat our code. Isn’t it ?
There are many things that go into header file but since we are focused on creating only a theme, Let’s make it simple. Following is the snippet for a basic header.php file
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<html <?php language_attributes(); ?>>
<head id="#" profile="http://gmpg.org/xfn/11">
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page-wrap">
<header id="header">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div><?php bloginfo('description'); ?></div>
</header>
To explain the code written in header,
- First line is basic Document type declaration for HTML5 document type.
- From line number 2 to line number 7, we have conditional comments to identify Internet Explorer browser so that we can write IE specific CSS based on ie7 and ie8 classes declared. You can learn more about conditional style sheets in a blog post by Chris at CSS-Tricks.
language_attributes();is a PHP function by WordPress which will return HTML tag language attributes, in my case it will return “en-US” .- Then we have our head with important meta tags for Charset and Viewport.
bloginfo( $show );is a WordPress function that takes a keyword($show) as input and returns the blog information based on keyword used.wp_title();is a wordpress function that will help us to use different titles for different pages of wordpress theme.wp_head();is an essential action hook usually inserted in header of a wordpress theme.body_class();helps us style better with CSS. You can read more about the classes that it assigns for body tag at wordpress codex page for body_class.get_option('home')returns the URL for home page.
These are very basic lines of code that will go into header of our blog page. Now, Let’s create a header.php file and paste the code from above snippet into that file. To test these changes we still need to write one line of code
|
1
|
<?php get_header(); ?> |
in our “index.php” file for our code to trigger. Write this one line in index.php and open your blog home page, you must see title of your blog with hyperlink and a description below.
I hope you are with me, I understand that I have introduced many wordpress functions in a single go but can’t help it. Now let’s finish our blog home page from where we have left and then take a look at individual post page.
index.php Template file
index.php is the template file for your blog home page and generally displays the list of blog posts (THE LOOP) with header, footer and sidebar. As of now, we have written only one line of code, which will call the header code from our index.php file. Now we are developing index.php to output blog posts and call functions to display template files for sidebar and footer. Following is the snippet for index.php file
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content(); ?>
</div>
</article>
<?php endwhile; ?>
<?php else : ?>
<h2>Not Found</h2>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Paste the above snippet which is called as WordPress Loop in the index.php file of your theme folder. For the purpose of conceptual clarity, I want to say
<?php get_header(); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> //POST content <?php endwhile; ?> <?php else : ?> <h2>Not Found</h2> <?php endif; ?>
is exactly same if we write as
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// Post Content here
//
} // end while
} else{ ?>
<h2> Not found </h2>
<?php
} // end if
?>
where have_posts() is a boolean function which will return true if there are any more posts to fetch else it will return false.
While looping through the posts we are using post_class() and the_ID() functions of WordPress to take advantage of CSS styling.
the_permalink(), the_title() and the_content(); will return article link, article title and article content respectively.
get_sidebar(); and get_footer(); will fetch the code in the template files of sidebar(sidebar.php) and footer(footer.php) respectively.
With this we are done with index.php, We now have only 3 more template files single post, sidebar and footer.
sidebar.php Template file
Generally in WordPress, you will control the sidebar section of your blog by using widgets. These widgets dynamically will be loaded onto sidebar section but for that Sidebar section to be there in your widgets section, you need to register sidebar with WordPress.
Create a file with name “functions.php” in your theme folder and paste the following snippet of code
<?php
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'Sidebar Widgets',
'id' => 'sidebar-widgets',
'description' => 'These are widgets for the sidebar.',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
}
?>
Now let us have these dynamic sidebar widgets in our sidebar section. Copy the below snippet into sidebar.php file, it will show the dynamic sidebar if any is in use
<aside id="sidebar">
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar Widgets')) : else : ?>
//Content for if no dynamic sidebar widgets goes here
<?php endif; ?>
</aside>
functions.php is theme functions file where you can write your essential function declarations in this file. This functions.php file will be executed before any of our other theme files can be executed. In the above snippet we have used only three wordpress functions
function_exists('register_sidebar')which will return a boolean value of true if the mentioned function declaration exists.register_sidebar(array())will register our dynamic sidebar widget.dynamic_sidebar('Sidebar Widgets')will be calling our dynamic sidebar.
Now let us quickly finish our footer section and see how our blog looks like
footer.php Template file
Similar to sidebar section you can chose to have dynamic widgets for footer with the section split into multiple columns. Here for the simplicity, I am going to insert only Credit links without any dynamic widgets.
<footer id="footer">
<small>©<?php echo date("Y"); echo " "; bloginfo('name'); ?></small>
</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>
echodate("Y");echo" "; bloginfo('name');wp_footer();is the footer hook. We must always use this hook before we are closing the body tag because there are many other plugins that will use this footer hook to insert code.
So, these are all the basic things that we need to set up to create a WordPress theme, If you have followed me through the post, your theme must be looking something like below.
There are plenty of other things that we can do to improve our theme but you can consider that these are the important files that needs to be in place for our theme to work. In the next post, let us add the remaining template files to the theme and take a look at CSS to design our blog UI.
