Log In | Register | December 15, 2018

Share
 

WordPress Development - September 9, 2010

Quickly Build a Basic Custom WordPress Theme with Ease

After this tutorial, you should be able to build completely custom WordPress themes in no time. I will take you through the files needed, as well as the PHP functions needed to make the site functional.

First things first, lets create a folder within the themes folder of your site. /wp-content/themes/. In this tutorial I created a folder called basic_theme. This folder will be where we store all of our template files for the entire site.

Lets start with the primary files needed to build a WordPress theme that can handle your content pages as well as a blog.  Start by creating the following blank files.

1.     style.css
2.     header.php
3.     footer.php
4.     index.php
5.     sidebar.php

That’s it. With those files you can manage an entire site. This is your basic integration and you can get more advanced by specifying different looks for different parts of the site, but for this tutorial we will just cover the basics.

So now that we have these files created, you may be wondering what we need to put into each of them. Lets start with file number 1 “style.css”. Within the style.css file you will need to store all of your CSS styles for your site. Not only will this file contain your styles, but at the top of the file it is very important that you include this block comment below.

/*
* Theme Name: DevBlog Test Theme
* Theme URI: http://www.devblog.co/
* Description: Theme for tutorial purpose.
* Version: 1.0
* Author: Frank Perez
* Author URI: http://www.frankperez.net
* Tags: custom theme, devblog theme, tutorial theme
*/

Without this block comment your theme will not work. This comment defines the theme name which WordPress will use in theme management area to reference your theme. All of the other details are just extra, that give more information on the theme for the frontend users.

After we have our CSS in place and our block comment as well. We can then move onto the header.php file. Within the header.php file you need to include your entire html that would be considered apart of your header. The header may include the logo, top navigation, and more. The header would never include the site content, or posts, and even footer elements. In the header you will need to make sure to include some WordPress PHP functions that will allow you to have a dynamic title for each page and more.

For this theme we used the functions:

wp_title();
get_bloginfo();
wp_head();
home_url();
wp_nav_menu();

The wp_title() function returns the title of your current page.

The get_bloginfo() function returns you information about your blog.

The wp_head() function allows wordpress to insert meta information, as well as other plugin meta information when installed.

The home_url() function returns the URL back to the homepage for your site.

The wp_nav_menu() function displays a navigation page menu in list format.

Plugging in those functions within your header will allow the elements of your sites header to be dynamic and integrated with the WordPress platform. Lets take a look at how I used them below.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php wp_title('-', true, 'right'); echo wp_specialchars( get_bloginfo('name'), 1 ); ?></title>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="header">
<?php wp_nav_menu( array('depth' => 1) ); ?>
<!-- end #menu -->
</div>
<!-- end #header -->
<div id="logo">
<h1><a href="<?php echo home_url(); ?>"><?php echo get_bloginfo('name'); ?></a></h1>
<p><em><?php echo get_bloginfo('description'); ?></em></p>
</div>
<hr />
<!-- end #logo -->
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="content">

You will notice that I passed through certain array values to each of these functions. Each function contains an assortment of different values that you can pass to obtain different results. To get all of the different types of values that you can pass through visit the WordPress codex page located here.

http://codex.wordpress.org/

Now that our header is taken care of, lets move on to the next file which is our footer.php. Our footer file will need to have all of our closing html that we started from the header.php. Not only that, but for this footer.php file, I am also including the sidebar.php using another WordPress function called get_sidebar() as well as a wp_foot().

Like I said earlier. The get_sidebar() function when called will automatically include the sidebar.php file. The wp_foot() function on the other hand allows WordPress to inject any necessary information from future plugins you may install. The wp_foot() function also includes the </body></html> tags so you will not need to include those in your HTML. Below is the sample of my footer.php file so you can see exactly how I plugged in these functions:

</div>
<?php get_sidebar(); ?>
</div>
</div>
</div>
<div id="footer">
<p>Copyright (c) <?php echo date('Y'); ?> <?php echo get_bloginfo('url'); ?>. All rights reserved.<br />
Theme by <a href="http://www.frankperez.net/">Frank Perez</a>.
Featured by <a href="http://www.devblog.co/">DevBlog.co</a>.
Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
<!-- end #footer -->
<?php wp_foot(); ?>

Now that we have completed the footer.php file, lets jump into the index.php file which will handle all of our content. To accomplish this we need to open the PHP file and insert first the get_header() and get_footer() functions. Within those functions we will be creating a while loop that will handle our content displays. I’ll start by showing you my code and then breaking it down so you can understand what’s going on.

<?php get_header(); ?>
<?php while( have_posts() ) : the_post(); ?>
<div class="post">
<div class="post-bgtop">
<div class="post-bgbtm">
<h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="meta"><span class="date"><?php echo get_the_date(); ?></span> - Posted by <?php the_author(); ?></p>
<div class="entry">
<?php
if ( is_category() || is_archive() || is_home() ) {
the_excerpt();
} else {
the_content();
}
?>
<?php comments_template(); ?>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php get_footer(); ?>

As you see from the loop, we are using the function have_posts() as our expression. What this function does is checks the WordPress system to see if we have any posts or content available, based off of the page and or category we are currently on. After the while loop we then reference the the_post() function which only sets up the data for each post to be used and displayed.

Within the while loop we also include our HTML which we wish to include for each post for styling. Theres a few more functions which you will need to know from this loop. These are:

the_permalink():
the_title();
get_the_date();
the_author();
is_category();
is_archive();
is_home();
the_excerpt();
the_content();
comments_template():

The function the_permatlink() returns the URL for the post within the loop.

The function the_title() returns the title of each post or page within the loop.

The get_the_date() function returns the date on which the page and or post was created.

The function the_author() returns the name or username of the person which created the page or post.

The is_category() function returns a true/false Boolean value if you are currently on a category page.

The is_archive() function returns a true/false Boolean value if you are currently on a archives page.

The is_home() function returns a true/false Boolean value if you are currently on a home page.

The function the_excerpt() displays a preview of the content for each post.

The function the_content() returns the content for the current post and or page.

Lastly the comments_template() function which returns the comments for the current post and or page as well as a form to post more comments.

That wraps up the index.php file, so now it’s time for the sidebar.php our final file. This file will contain all of our HTML for the right column as well as some pre defined wordpress functions which we will go over.

First off, here’s the code for our sidebar.php file.

<!-- end #content -->
<div id="sidebar">
<ul>
<li>
<h2>Categories</h2>
<ul>
<?php wp_list_categories( array('title_li' => '') ); ?>
</ul>
</li>
<li>
<h2>Pages</h2>
<ul>
<?php wp_list_pages( array('title_li' => '') ); ?>
</ul>
</li>
<li>
<h2>Archives</h2>
<ul>
<?php wp_get_archives( 'type=monthly' ); ?>
</ul>
</li>
<li>
<h2>Account Links</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
</ul>
</li>
</ul>
</div>
<!-- end #sidebar -->

This file includes our HTML for our right column as well as the following WordPress functions.

wp_list_categories();
wp_list_pages();
wp_get_archives();
wp_register();
wp_loginout();

The function wp_list_categories() returns us a list of categories in list format. So we stick it within our <ul></ul> tags to populate that menu.

The wp_list_pages() function handles similarly to wp_list_categories(), but it returns a list of content pages for the site.

Function wp_get_archives() retrieves and returns a  list of archives by type specific. In this case we used monthly.

The wp_register() function returns a registration URL for people to sign up with your site.

The wp_loginout() function returns a URL for Log in or Log out, depending on your status.

You will notice that within these functions I passed through some parameters. For a list of parameters for these functions, please visit the WordPress codex.

http://codex.wordpress.org/

I have attached the files used for this tutorial below, I hope you learned a lot and enjoy. If you have any issues just let me know in the comments below.

WordPress Theme Creation Tutorial Download

Example:
DevBlogTutorialTheme 1284209113572 300x255 Quickly Build a Basic Custom WordPress Theme with Ease

Post By: | FavoriteLoadingAdd to favorites

4 Comments

David T
Tuesday, September 21, 2010

Great tutorial. It was very helpful my first time installing and integrating Word Press. Thanks Frank!

Vamsi
Friday, June 22, 2012

Got my very first and simple wordpress theme running. Thanks for the tutorial. I think you should have added your “css” code that should be added to style.css. I was looking for it !!

Setting up a Wordpress website with custom template | Webdesign Den Haag Wordpress Setup Site
Saturday, February 23, 2013

[...] Welcome to this WordPress setup website, starting with a brief story on making a custom wordpress theme. There are losts of sort introductions to setting up a custom theme for wordpress ie. siteground and devblog [...]

Yuri
Wednesday, September 11, 2013

Good day, I’m using cpanel and I just started learning WordPress a few hours ago. Now, I want to know how to customize a basic wordpress site just to be familiar with things around wordpress. You know, like there are basic examples/exercises in making a very simple website just using html and css so maybe, …you have a basic exercise for wordpress with a step by step instructions?

And about your post above, will I just upload those files into the wordpress? or?
Thank you.

Leave a Comment



Need Help? Ask a Question

Ask anything you want from how to questions to debug. We're here to help.

You Must Be Logged In To Post A Question.

Log In or Register