If you know html and css, WordPress then it is simple to create a custom theme in WordPress.
This overview shows the process of how a custom WordPress theme can be built from a design concept in to a completed theme.
Before starting to build the theme you should have a very clear idea about your design layout as shown below. As an example, it consists of a Header, Sidebar, Main Content in the middle and Footer.
To start building your theme, create a custom theme template folder in wp-content/themes directory. As an example in this blog, we can give a name as mytheme.
To do this we will have to create the following files into the mytheme directory:
header.php – This file will contain the code for the header section of the theme;
index.php – This is the main file for the theme. It will contain the code for the Main Area and will specify where the other files will be included;
sidebar.php – This file will contain the information about the sidebar;
footer.php – This file will handle your footer;
style.css – This file will handle the styling of your new theme;
Each of these file then contains a series of PHP template tags. These tags tell WordPress where to insert the dynamic content. A good example is the <?php the_title(); ?> tag, which pulls in the post title and displays it in your theme:
Now let’s take a closer look at each file and what it should contain:
Basically, this is simple HTML code with a single line contains a PHP code and a standard WordPress function. In this file you can specify your Meta tags such as the title of your website, Meta description and the keywords for your page.
add wp_head();, this is where any additional head elements are placed by WordPress plugins etc.
We have added the beginning of a “div” with class wrapper which will be the main container of the website. We have set class for it so we can modify it via the style.css file.
After that we have added a simple label HEADER wrapped in a “div” with class “header” which will be later specified in the stylesheet file.
Create index.php in your theme and copy paste the below code.
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time(‘F jS, Y’) ?></h4>
<p><?php the_content(__(‘(more…)’)); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>
<?php get_footer(); ?>
This is where all the meaty stuff begins! At the top we have the get_header(); and get_sidebar(); tags, these call the header.php and sidebar.php files and render the content according to where the tags appear.
The WordPress loop is then used to check for content, if there’s content available it’s rendered onto the page. Within the loop we have various tags that display the post information, such as the_title();, the_time();, the_content();.
Skipping down a little, the loop then displays an else tag, which will display if no posts are found, and the loop is finally closed with an endif. At the bottom we can use get_footer(); to call the rest of the page, which resides in the footer.php file.
The sidebar.php file
In the sidebar.php we will add the following code:
The sidebar in my design is where the list of pages and categories are held. The sidebar.php file was called from the index using the get_sidebar (); tag
In this file we use internal WordPress functions to display the Categories and Archives of posts. The WordPress function returns them as list items; therefore we have wrapped the actual functions in unsorted lists (the <ul> tags).
The footer.php file
You should add these lines to the footer.php file:
The footer.php file is probably the simplest file for this theme. The only thing that goes in here is the wp_footer(); tag just before the </body>, so that any extra info can be inserted in the correct place.
With this code we add a simple FOOTER label. Instead of this code you can add links, additional text, the copyright information for your theme and additional objects.
The style.css file
All the details of a WordPress theme are contained within the stylesheet. At the top of your style.css add the following code and then amend the details to suit.