WordPress is among the most popular and efficient content management systems out there. It is a free and open source platform that is highly customizable, and doesn’t charge even a dime for using it. What this means is that you can build your own website with a completely unique look. To do this, however, you need to know how to create a WordPress Theme, and this article will show you just that.
Creating a WordPress Theme
To begin building your theme, you need to first create a subfolder in the folder in the wp-content/themes directory in your WordPress folder. Let’s call the folder “my_theme”, for the purpose of this tutorial.
You should note, however, that the name of the folder needs to correspond to the name of the theme you’re creating. To do this, you can either use the File Manager tool in your cPanel or your favourite FTP client.
Before you start developing your theme, you need to decide how your website’s layout will look like. For this tutorial, let’s create a WordPress theme that consists of a header, a footer, sidebar, and content area.
Therefore, we have to create the following file into the my_theme directory:
- php – As the the main file for the theme, it will contain the code for the Main Area, and will specify where other files will be included;
- php – The file will contain the code for the header part of the theme;
- php – It will contain information about the sidebar;
- php – This file will handle the footer;
- css – This file handles the styling of your new theme.
There are two ways of creating these files:
- Use a simple text editor, like notepad, to create the files locally and then upload them via FTP
- Create the files directly on the hosting account using the File Manager tool in your cPanel
Now, let’s take a detailed look at each file:
The header.php
You need to add the following code in this file:
<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 just a simple HTML code, with a single line comprising a php code and a standard WordPress function. Here, you can specify your meta tags, including your website’s title, meta description, and the keywords for your page.
Immediately after title, we add the line:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
This instructs WordPress to load the style.css file. It’ll handle your website’s styling.
The <?php bloginfo('stylesheet_url'); ?> segment of the line is a WordPress function that loads the stylesheet file.
Then, we’ve added the beginning of a “div” with a class wrapper. This will be the main container of your website. We’ve set class for it, in order to be able to modify it via the style.css file.
Afterwards, we’ve included a simple label HEADER, wrapped in a “div” with class “header”. This will be specified later in the style.css file.
The index.php 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 starts with <?php get_header(); ?>, which will include the header as well as the code in it, in the main page. The code uses a WordPress function to do that. Next, we’ve placed a Main Area text to show which section of the theme is displayed in this area.
In the next few lines, we have PHP code and standard WordPress functions. The work of the code is to check whether you have posts in your website created through the WordPress administrative area, and then displays them.
Then, the sidebar.php file is included using the following line:
<?php get_sidebar(); ?>
After the line, we insert an empty “div”, which will separate the Sidebar and the Main Area from the footer.
Lastly, we add the following line:
<?php get_footer(); ?>
This will include the footer.php file in your web page.
The sidebar.php file
In this file, the following code should be added:
<div id="sidebar">
<h2 ><?php _e(‘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 the sidebar.php file, we apply WordPress functions to display the posts’ Archives and Categories, which are returned as list items by the function. Hence, we’ve wrapped the actual functions in unsorted lists.
Footer.php
In this file, add the following lines:
<div id="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
You can replace the FOOTER label with links, your theme’s copyright information, and additional text or objects.
The stylesheet
You should add these lines to the style.css file:
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; }
The css file sets the basic look of your theme. The lines set your page’s background and surround your site’s main parts with borders for convenience.
Afterwards, you can modify your CSS file; add images, animations, and other content to your theme to achieve the looks you desire for your website.
Conclusion
Creating a WordPress theme, such as Spine Theme, isn’t as difficult as you may fear. This is because there are plenty of resources that will help you learn how to make something that looks exactly the way you want. You just have to be ready to experiment and to risk making mistakes, since it’s the best way to master the art of creating themes, as well as to develop a better sense of what sort of design will work best for your site. You can check out webcreationuk reviews for more insight on Content Management Systems and other useful information related to web design and development.
ALorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl. Quisque quis urna in velit dictum pellentesque. Vivamus a quam. Curabitur eu tortor id turpis tristique adipiscing. Morbi blandit. Maecenas vel est. Nunc aliquam, orci at accumsan commodo, libero nibh euismod augue, a ullamcorper velit dui et purus. Aenean volutpat, ipsum ac imperdiet fermentum, dui dui suscipit arcu, vitae dictum purus diam ac ligula.