Create a custom WordPress theme: Step 6

There are many different WordPress themes available, but sometimes you just cannot find the one that will fit your needs. When that happens, it is time to create your very own custom theme. I will show you in a series of six steps how to do just that.

In step 1 we learned how the themes work, a first step in creating your own custom theme for WordPress. In step 2 we learned to create the template files.

Step 3 taught us about the header file, step 4, the footer and step 5, the sidebar. Do you see how the initial index.php file template set the outline for how these components  interconnect?

Now, for the final elements, your cascading style sheets, or CSS.

Step 6.

The CSS File: name it style.css

In the top portion of the css file you will place information about the template:

/*

                Theme Name: my custom theme

                Description my first theme.

                Author: me

                Author URI: you can place your website link here (http://)

                Version: 1 (or you can start with any number you like)

*/

Next you will place any extra fonts usually google web fonts that you would like displayed on your website.

/* Fonts

------------------------------------------------------------ */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

/*------------------------------------------------------------ */

This is where you will begin your css information:

Remember for each element in your theme you can give it style here:

For example  your main body style

body {

                background: url(images/blue_background.jpg) repeat center top;

}

This will give you a background with the image called blue_background.jpg found in your images folder ( you can use any image or give it a color instead of image like this:

body {

                background-color: #09F;              

}

This would give your body a blue background the color hex color 0F9

For each element in you template you can create a css style to go along with it.

To link your stylesheet to you website you will need to add a link to the header file. You will notice that the header file  that you created earlier has a link to the style sheet.

<link rel="stylesheet" type="text/css">

This will tell the header to look for the stylesheet and connect it to all the pages of your website.

Congratulations! You now have all of the information you need to create your own custom WordPress theme.  Go forth and design, construct, and have fun.

Create a custom WordPress theme: Step 5

There are many different WordPress themes available, but sometimes you just cannot find the one that will fit your needs. When that happens, it is time to create your very own custom theme. I will show you in a series of six steps how to do just that.

In step 1 we learned how the themes work, a first step in creating your own custom theme for WordPress.

In step 2 we learned to create the template files.

Step 3 taught us about the header file and step 4, the footer.  Now, let’s consider the sidebar.

Step 5.

The side bar is located on the side of your website page, you can choose to have it on either right or left side. Most commonly people choose the left, but you should put it where you are most comfortable. To create the sidebar file:

The Sidebar File: name it sidebar.php

<div id="sidebar">

<h2 class="sidebartitle"><?php _e('Categories'); ?></h2>

<ul>

<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>

</ul>

<h2 class="sidebartitle"><?php _e('Archives'); ?></h2>

<ul class="list-archives">

<?php wp_get_archives('type=monthly'); ?>

</ul>

</div>

The sidebar will contain the categories , archives, text widgets and other sidebar attributes.

So, you’re almost there in creating your own custom theme for WordPress! You should now have an understanding of how custom themes work and the technical knowledge on how to create your files.  Stay tuned for step 6, the final lesson.

Create a custom WordPress theme: Step 4

There are many different WordPress themes available, but sometimes you just cannot find the one that will fit your needs. When that happens, it is time to create your very own custom theme. I will show you in a series of six steps how to do just that.

In step 1  we learned how the themes work, a first step in creating your own custom theme for WordPress.

In step 2 we learned to create the template files and step 3 taught us about the header file. Now, let’s look at the footer.

Step 4.

The footer of the website is where the copyright information is located.  Other items can be placed there as well, if you’d like, such as a menu, contact information, resource links,  or any similar type of information that you would like to convey to your audience. But let’s start with the basics.

The Footer File:  name it:  footer.php

<div id="footer">

<h1>This is the footer</h1>

</div>

</div>

< ?php wp_footer(); ? >

</body>

</html>

So, this is fourth step in creating your own custom theme for WordPress. You should now have an understanding of how custom themes work and the technical knowledge on how to create your template files as well as your header and footer.  It should feel like it’s all coming together at this point. Stay tuned for the final steps!

Create a custom WordPress theme: Step 3

There are many different WordPress themes available, but sometimes you just cannot find the one that will fit your needs. When that happens, it is time to create your very own custom theme. I will show you in a series of six steps how to do just that.

In step 1 we learned how the themes work, a first step in creating your own custom theme for WordPress.

In step 2 we learned to create the template files. Now, it’s time to look at creating the header file.

Step 3.

As you know, the theme will need a header file which is the top portion of the website, usually where the logo and other top elements reside.  Other components can be added, but for now let’s keep it simple.

The Header File: name it header.php

<html>

<head>

<title>My Theme</title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

</head>

<body>

<div id="wrapper">

<div id="header">

<h1>This is the header</h1>

</div

You should now have a solid understanding of how custom themes work and the technical knowledge on how to create your template and header files. Stay tuned for step 4.

Create a custom WordPress theme: Step 2

There are many different WordPress themes available, but sometimes you just cannot find the one that will fit your needs. When that happens, it is time to create your very own custom theme. I will show you in a series of six steps how to do just that.

In step 1 we learned how the themes work, a first step in creating your own custom theme for WordPress. Our second step is to create the template files.

Step 2.                              

The first file we are going to create is the index.php file.

Open up your text editor and create a new file called index.php where you will enter the following code:

<?php get_header(); ?>

<div id="main">

<div id="content">

<h1>Main Content </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, we couldn’t find the post you are looking for.'); ?></p>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

</div>

<div id="delimiter"></div>

<?php get_footer(); ?>

You can make changes between the <h1> tags and the text that reads "Posted on" after the <h4> tag can be customized to something else that works for you. You can make the changes now or at a later time, but it is important to remember that, since these are template files, the changes will be reflected across your entire site.

So, this is second step in creating your own custom theme for WordPress. Stay tuned for step 3 when we'll talk about your header file.

Create a custom WordPress theme: Step 1

---

There are many different WordPress themes available, but sometimes you just cannot find the one that will fit your needs. When that happens, it is time to create your very own custom theme. I will show you in a series of six steps how to do just that.

Step 1.

First of all, we should start off knowing how themes work. The theme works off of a series of template files. However, only two files are needed to get you going: style.css and index.php, both of which will be discussed in this series.

There are other template files used, too:

• rtl.css
• comments.php
• front-page.php
• home.php
• single.php
• single-<post-type>.php
• page.php
• category.php
• tag.php
• taxonomy.php
• author.php
• date.php
• archive.php
• search.php
• attachment.php
• image.php
• 404.php

Before you begin, you should know what you want your theme foundation will look like. The foundation usually includes a header, main content, sidebar and footer.

In order to start creating, you need to use a text editor like Notepad, eMacs or TextMate. The first file I usually create is the index.html file, which would look something like this:

<html>

<head>

<title>Your Custom Theme</title>

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

header

</div>

<div id=”content”>

<div id=”main”>

main

</div>

<div id=”sidebar”>

sidebar

</div>

</div>

<div id=”footer”>

footer

</div>

</div>

</body>

</html>

This should now be saved as index.html

As you can see, there are several div ids that will be connected later when we create the template files that will correspond to each.

So, this is the very first step in creating your own custom theme for WordPress. Stay tuned for step 2.

---