WordPress – I can certainly give dozens of reasons why I always choose and suggest using this CMS over any other platform available to build websites. Among those dozens of reasons, the best one that stays on top is that WordPress is a free and open source platform. It’s highly customizable and does not charge even a single penny for using it. This means you can build your own site with an entirely unique look. We’ll show you how to create a custom WordPress Theme.
Did I forget to tell you that WordPress can help you build a variety of sites ranging from personal blogs to online stores?
So, overall it does a pretty good job in helping any business establish an online brand without having any technical knowledge and programming skills.
Today’s tutorial is all about custom theme development where I am going to show you how to create a simple WordPress theme.
Creating Your Custom Theme
Outside of setting up WordPress, almost everything you do in this CMS will be in the wp-content folder; you would not want to change anything outside it since it is core code.
You have to start with creating a sub-folder in the wp-content folder/themes directory, where you can see the WordPress’s default themes – twentythirteen, twentyfourteen, twentyfifteen as well as index.php file. I called mine custom_theme.
But remember, the name you choose for your folder should correspond to the theme you are planning to create.
To create to a sub-folder, you can either use File Manager tool in your cpanel or your FTP client.
Upon creating a sub-folder, it is time to decide the layout and design of your website. For this tutorial, I am going to design a website that will have a header, sidebar on the right, content area, and a footer.
Before we get started, it is important for you to know that a WordPress theme requires only two files to exist – index.php and style.css.
index.php
Index.php is a core file that loads your theme, and also acts as an homepage. This file will also specify where other files will be included. Create index.php file and save it in the themes folder “custom_theme”.
style.css
Create another file called style.css in the same folder. It basically includes a comment that alerts the CMS that a theme exists here.
Change the name, author, description, and so on according to your theme.
To create a theme, we will have to create the following files into the custom_theme directory:
- header.php – It will include the code for theme’s header section;
- index.php – As mentioned above, this is the main file for the theme.
- sidebar.php – This file will include the code for the sidebar;
- footer.php – Footer file will contain code for your footer
- style.css – This file will handle the styling of your new theme.
Separate your page into sections
Right now, everything is in the index.php file. But of course, we need the header, sidebar and footer on all the webpages to be the same, right? (perhaps certain webpages will have few modifications, but that comes later).
It’s time to divide your main file i.e. index.php into different sections including – header.php, footer.php, sidebar.php and content.php.
Here’s the original index.php. Now let’s start cutting and pasting.
<?php get_header(); ?> <!-- Main hero unit for a primary marketing message or call to action --> <div class="hero-unit"> <h1>Hello, world!</h1> <p>This is a template for a blog or informative website. It contains a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p><a class="btn btn-primary btn-large">Learn more »</a></p> </div> <!-- Example row of columns --> <div class="row"> <div class="span4"> <h2>Heading</h2> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p> <p><a class="btn" href="#">View details »</a></p> </div> <div class="span4"> <h2>Heading</h2> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn" href="#">View details »</a></p> </div> <div class="span4"> <h2>Heading</h2> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn" href="#">View details »</a></p> </div> </div> <?php get_footer(); ?>
Style.css
Adding the following code to your style.css file
/*
Theme Name: Custom Theme
Theme URI: Your theme URI
Description: A demo theme built to help you create a custom theme
Author: Your name
Author URI: Your website URI
Version: 1.0
Tags: bootstrap
*/
@import url('bootstrap/css/bootstrap.css');
@import url('bootstrap/css/bootstrap-responsive.css');
body {
padding-top: 60px;
padding-bottom: 40px;
}
Header – header.php
The header file will including everything from <!DOCTYPE html> to the main blog. It basically includes all the necessary the top navigation and head styles to the website. The only change I will make to header file’s code is inserting <?php wp_head(); ?> right before the closing
</head>.
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le styles -->
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a>
<div class="nav-collapse collapse">
<ul class="nav">
<?php wp_list_pages(array('title_li' => '', 'exclude' => 4)); ?>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
Footer – footer.php
The same rule applies with the footer of the website. It will contain everything you have in your footer, your JS links (for now) and <?php wp_footer(); ?> right before </body>. Since we have added the .container div in the header, we are going to close it in the footer.
</div> <!-- /.container --> <footer class="blog-footer"> <p>© Company 2012</p> </footer> <?php wp_footer(); ?> </body> </html>
Sidebar – sidebar.php
You probably have noticed a majority of websites with a sidebar that includes content like ads, categories, tags, archives and more.
<div class="col-sm-3 col-sm-offset-1 blog-sidebar"> <div class="sidebar-module sidebar-module-inset"> <h4>About</h4> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> </div> <div class="sidebar-module"> <h4>Archives</h4> <ol class="list-unstyled"> <li><a href="#">March 2014</a></li> <!-- More archive examples --> </ol> </div> <div class="sidebar-module"> <h4>Elsewhere</h4> <ol class="list-unstyled"> <li><a href="#">GitHub</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> </ol> </div> </div><!-- /.blog-sidebar -->
Content – content.php
Since sidebar contains all the secondary information, Content includes all the primary information of the website such as blogs, main content of the site or more.
<div class="blog-post"> <h2 class="blog-post-title">Sample blog post</h2> <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p> <p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p> <hr> <!-- the rest of the content --> </div><!-- /.blog-post -->
Updated Index.php should now look like this:
<?php get_header(); ?> <div class="row"> <div class="col-sm-8 blog-main"> <?php get_template_part( 'content', get_post_format() ); ?> </div> <!-- /.blog-main --> <?php get_sidebar(); ?> </div> <!-- /.row --> <?php get_footer(); ?>
Even though you have never even heard of PHP before, the above code is quite self-explanatory. get_footer();, get_sidebar();, and get_header(); are all functions of WordPress that searches for their corresponding .php files and replaces the code with the function name at the execution time.
However, the content function is quite different from others, but it performs the same job.
Main settings
If you’d look closely at the code, you will notice that there are certain things that are hardcoded such as blog title, description and h1 tag.
To dynamically load them, you have to replace the contents of your description, h1 tag and blog title with the following lines of code:
<div class="blog-header">
<h1 class="blog-title"><a href="<?php bloginfo('wpurl');?>"><?php echo get_bloginfo( 'name' ); ?></a></h1>
<p class="lead blog-description"><?php echo get_bloginfo( 'description' ); ?></p>
</div>
Adding the loop to the Index.php Page
Whether you are planning to create a simple blog or a business site, you probably want to add blog posts to your website, which you would obviously want to dynamically add. Therefore, we need to add the Loop. In WordPress, all your blog posts are generated through a loop.
The Loop is extremely easy to understand.
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <!-- contents of the loop --> <?php endwhile; endif; ?>
Let’s see what this code means. The first line of code checks a condition that if there are posts, while there are posts, show the post. Whatever is inside the loop will be repeated. For a simple blog, this will be comments, the content, the date, and the post title. Where the loop ends, each individual post should also end.
Let’s add this loop to our index.php file.
<?php get_header(); ?> <div class="row"> <div class="col-sm-8 blog-main"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); get_template_part( 'content', get_post_format() ); endwhile; endif; ?> </div> <!-- /.blog-main --> <?php get_sidebar(); ?> </div> <!-- /.row --> <?php get_footer(); ?> Content.php is the only thing in your loop, which will include the content of a single post. So go to your content.php file and update the content to this: <div class="blog-post"> <h2 class="blog-post-title"><?php the_title(); ?></h2> <p class="blog-post-meta"><?php the_date(); ?> by <a href="#"><?php the_author(); ?></a></p> <?php the_content(); ?> </div><!-- /.blog-post →
The update code is interestingly simple where the_title(); is the fetching the title of the blog post, the_content(); is your post content, the_author(); is the author, the_date(); displays the date.
DesignWall
The Home of WordPress
Premium Themes and Plugins
