WordPress is a great product. It’s easy-to-use, quite powerful, and flexible. Fundamentally, the WordPress Theme system is a way to “skin” your weblog. Yet, it is more than just a “skin.” Skinning your site implies that only the design is changed. A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. A Theme modifies the way the site is displayed, without modifying the underlying software.
The WordPress Theme Directory is the official site for WordPress Themes which have been checked and inspected, and are free for downloading. The site features the ability to search by type and style, and offers a demonstration of the page view elements of the Theme.
To start building your theme, first create a folder in the wp-content/themes directory in your WordPress folder. For the purpose of this tutorial, we will call the folder “mytheme”. The name of the folder should correspond to the name of the theme you want to create.
We will develop a WordPress theme that consist of a header, sidebar, content and a footer area.
While the most minimal of WordPress Themes really only needs an index.php Template and a style.css file (or just the style file if itтАЩs a Child Theme) most WordPress Themes need something a little more solid.
To do this we will have to create the these files into the “mytheme” folder:-
header.php – This file will contain the code for the header part of the theme
index.php – This is the main file for the theme. It will contain the code for the Main Content 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 be your footer
style.css – This file will handle the styling of your new theme
In this file you should add the following code:
<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER</h1>
</div>
This is simple HTML code with some php code and a WordPress function. In this file you can specify your seo meta tags such as the title of your website, meta description and the keywords for your page.
The Line with
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>
tells WordPress to load the style.css file.
The
<?php bloginfo(‘stylesheet_url’); ?>
part of the line is a WordPress function that actually loads the stylesheet file.
Next, 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.
<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Main Area</h1>
<?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; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>
The code in this file begins with <?php get_header(); ?> which will include the header.php file and the code in it in the main page. It uses an internal WordPress function to do this. Then we have placed a Main Area text to indicate which section of your theme is displayed in this area.
The next few lines consist of a PHP code and standard WordPress functions. This code checks whether you have posts in your blog created through the WordPress administrative area and displays them.
Next, we include the sidebar.php file with this line <?php get_sidebar(); ?>
In this file you can display your post categories, archives etc in sidebar of theme.
Finally, we add one last line <?php get_footer(); ?> which will include the footer.php file in your page.
In the sidebar.php we will add the following code:
<div id="sidebar">
<h2 ><?php _e('All Categories'); ?></h2>
<ul >
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul >
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
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).
You should add these lines to the footer.php file:
<div id="footer">
<h1>© 2014 All Rights Reserved.</h1>
</div>
</div>
</body>
</html>
With this code we add a simple text in footer. In this code you can add links, additional text, the copyright information for your theme and additional objects.
The first thing we need to do is add a section at the top of this file bracketed by what are called CSS тАЬcommentsтАЭ (/* and */). ItтАЩs here that we need to put the info that tells WordPress about your theme. Without it, your theme wonтАЩt show up in the themes panel.
Add the following lines to the style.css file:
/*
Theme Name: My Theme
Theme URI: http://vivacityinfotech.com/
Description: A search engine optimized website framework for WordPress.
Author: You
Author URI: http://vivacityinfotech.com/
Version: 1.0
Tags: Comma-separated tags that describe your theme
.
Your theme can be your copyrighted work.
Like WordPress, this work is released under GNU General Public License, version 2 (GPL).
http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
.
*/
body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
#header { border: 2px #a2a2a2 solid; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
#delimiter { clear: both; }
#footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }
This simple css file sets the basic looks of your theme. Those lines set the background of your page and surround the main parts of your site with borders for convenience.
Once youтАЩve got that done you can activate your theme and navigate to your test site. WeтАЩve made the ultimate blank theme! Things should start to get interesting right about now.
Internal WordPress functions are often used in the code of the theme. You can take a look at the complete Function Reference at the official website of WordPress for more information about each function.
From now on you can modify the CSS file, add images, animations and other content to your theme in order to achieve the looks you want for your blog!
Phone: