How to Create Your first WordPress Theme: Part 1

Posted in Tutorials • Posted on 57 Comments

WordPress is the most popular and the best (in my opinion) blogging platform, created by Automattic. It’s really easy to use and it’s very powerful, giving you the opportunity to build any kind of site, from blogs to shopping carts and CMS’s.  In this series of tutorials, we are going to create our first WordPress theme. For this tutorial you need to have a little more than basic knowledge about HTML and CSS. Let’s get started.You can Download source files and you can also Live preview the theme here. It’s a basic css layout so it will be easy for beginners to convert it into a working WordPress theme.

What we need

WAMP/XAMPP Server (or similar software) – Download

WordPress 2.9.2 (latest version, recommended) – Download

Getting started – creating the working environment

First thing first, you need to install WAMP Server. After installing WAMP, download and copy the WordPress files in the www directory from your WAMP folder. Start WAMP Server, click on the icon in the task bar, and a pop-up list show appear, then select phpMyAdmin.

Now, create a new database. Give it any name, but you need to keep it in mind as we need it at the WP installation. As for now, we are done with WAMP Server, just leave it running.

WordPress Installation

After copying all the files, you need to install WordPress. Enter on the address where you have put the WP files. The address would be exactly, without any www or http, localhost or localhost/WordPress. After accessing the address, the installation may start.

Click “Create a Configuration File”. After this, you will see some listing of things you need to know. I’ll just tell you what you need:

  1. Database name: your given name of the database we’ve created earlier
  2. Database username: this should be “root” if you set it on your computer.
  3. Database password: there is no password set.
  4. Database host: localhost
  5. Table prefix: for now, leave it as it is.

Now, just fill in the fields with the required information, and go further! After filling up the fields, next give any name to your blog, and write your e-mail address.

Now, copy the auto generated password, and paste it in the password field at the site login. Now, because you cannot keep that weird password in mind, go the upper right corner of the site and click on “admin”. You should see a page where you have your account info. You can modify anything there, but for now we are setting a new and easier password.

Go to the bottom where it says “New password” and set your new password.

Good, now you have WP installed, but we have a lot more things to do.

1. Planning the theme layout

When I’m starting a new project on developing a WordPress theme, as everyone should do, I first build my HTML/CSS template. This is easier because you also learn how to convert a simple HTML template into a fully functional WordPress theme. So i won’t go through building the template, considering you already know how to build your own. I’ll just use a simple layout from Free-CSS.com in this tutorial. Go here and download the #7 template.

2. Starting the conversion

When I’m making a theme, I’m always copying code snippets from a default WordPress theme (because i cannot remember all of them). I use the WordPress Classic theme, but you can also use a cheat sheet. The best one i’ve found is the one created by Ekinertac. After it opens in the PDF format, save it in your computer (you may need it when you do not have access to the internet).

All the contents from the sheet are the most used functions from WordPress, and the ones that you need to create a basic WP theme.

A thing that you have to notice is that WordPress is using PHP. Even if you aren’t a PHP master, or you have absolutely no idea what PHP is, you are still able to create a basic theme. When creating a theme, you need to know just tags and what they are doing, so do not worry about PHP.

2.1 Making the theme recognizable by WordPress

A very important part of a WordPress theme is the CSS file. In the CSS file are written some lines that WordPress is using to g a theme. First, you need to rename the styles.css to style.css as WordPress is search for style not styles. Copy and paste these lines at the start of your CSS file:

/*
Theme Name: Free-CSS template WP version
Theme URI: <a href="http://free-css.com/">http://free-css.com</a>
Description: A very basic  WP theme based on a simple CSS layout from Free-CSS.com
Version: 1
Author:  >your name<
Author URI: >your site url<
Tags: free, css,  tutorial, simple, basic
*/

You can change everything that is located after the “:” dots. Save your CSS file as we won’t need it because we are just trying to give to the HTML template functionality.

2.2 Converting the HTML file

After you set up your CSS file, we need to go and change some things in the index.html file. First of all, clear all the sample text.
Save you file as index.php. We do not need the sample text anymore as we will introduce our own text from WordPress later.

Now, we need to make some declarations for the WP theme. We need to make the title dynamic and to set the stylesheet path. These lines will help you:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type');  ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('«', true,  'right'); ?> <?php bloginfo('name'); ?></title>
<style type="text/css" media="screen">@import url(  <?php bloginfo('stylesheet_url'); ?> );</style>

Now, we will start with the header of the design. For adding your blog’s name with a link to your homepage in the header, we will use this line of code:

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

The first PHP tag is used for retrieving the blog’s homepage link and the second is for the blog’s name (the one you set in the installation).

Now we’re going further for the loop. The loop is a block of code that will repeat for each post from WordPress. We will use the loop to construct the article. I’ll cover more about the loop in the second part, where we will use it for other things too.

Now, all your code is wrapper by some loop specific tags. Here they are:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<!--Code to be repeated here-->

<?php endwhile; else: ?>
<?php endif; ?>

Next, we will start constructing the article structure. We will need a title, some info about the dat when the article was published and it’s author.

The following line makes the article title:

<p><strong><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong></p>

The first PHP tag is for the article’s link and the second is for the article title. These tags are kinda self-explanatory. We’re moving further for the meta data (date, author). Copy and paste the following code under the article title code:

<p>Published on <?php the_time('F d, y'); ?> by <?php the_author(); ?> in <?php the_category(','); ?></p>

First tag is for retrieving the date. The date tag have some parameters. These parameters are setting the date format (month, day, year). You can add characters like “-” or “.” or making something like “Month 02 Day 15 Year 1990″, it’s up to you! The second one, is for echoing the author of the post and the third, is for category or categories that the post is filed under.

Now, we will be placing the content tag. The content tag will output everything you write in a WordPress post:

<?php the_content(); ?>

The tag doesn’t need paragraphs because WordPress auto generates them for you. We’re finished with the loop. You can see the code pieces at the party:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <p><strong><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong></p>
 <p>Published on <?php the_time('m d Y'); ?> by <?php the_author(); ?></p>
 <p><?php the_content(); ?></p>
 <?php endwhile; else: ?>
 <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
 <?php endif; ?>

Next, we will be going to code the sidebar.

We will start with the navigation. As you see in the CSS layout, the navigation is located in the sidebar. It doesn’t matter because the technique is the same. For creating a basic navigation you need these lines of code, which will placed between the <strong>ul </strong>tags:

&amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;&amp;lt;?php bloginfo('url'); ?&amp;gt;&amp;quot;&amp;gt;Home&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
&amp;lt;?php wp_list_pages('title_li='); ?&amp;gt;

You already know what the first PHP tag does. The second one, is listing the pages that WordPress generates. The parameter is for list title. Try removing it and see what’s happening.

This is all you need to do for getting a nice working navigation menu. Now, we will create the categories list. All the blogs have categories and we don’t want our theme to lack categories. We will just add this code between the div #extra tags:

&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;Categories&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;ul&amp;gt;
 &amp;lt;?php wp_list_categories('title_li='); ?&amp;gt;
&amp;lt;/ul&amp;gt;

There is another listing tag but this one is listing the blog’s categories. I’ll cover more things relating the sidebar in part 2, where i will teach you how to make a theme widget-ready. That means you will introduce new blocks inside of WordPress, without coding anything.

But what about the footer? Shouldn’t it have some text in it? Well, we will write the copyright:

&amp;lt;p&amp;gt;Copyright &amp;amp;copy; 2010 &amp;lt;a href=&amp;quot;&amp;lt;?php bloginfo('url'); ?&amp;gt;&amp;quot;&amp;gt;&amp;lt;?php bloginfo('name'); ?&amp;gt;&amp;lt;/a&amp;gt;. All rights reserved.&amp;lt;/p&amp;gt;

As you see, we have introduced some tags, just like in the header, to output the blog’s title.

The theme is functional, but we will need to make some page templates for single post (where the comments will appear) and the page (where you could write some info about your blog). If you use the same code for the header footer and sidebar, your template would get messy. Let’s say that you want to add one more thing to your sidebar. You will have to modify 3 times for each page template. Well, for avoiding this, we will chop the markup.

For each section of the index.php file we will have a separate file. So we will have header.php, footer.php and sidebar.php. Now, we will be starting to chop!

Copy and then replace the following lines:

&amp;lt;!DOCTYPE HTML PUBLIC &amp;quot;-//W3C//DTD HTML 4.01//EN&amp;quot; &amp;quot;http://www.w3.org/TR/html4/strict.dtd&amp;quot;&amp;gt;
&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
&amp;lt;meta http-equiv=&amp;quot;Content-Type&amp;quot; content=&amp;quot;&amp;lt;?php bloginfo('html_type'); ?&amp;gt;; charset=&amp;lt;?php bloginfo('charset'); ?&amp;gt;&amp;quot; /&amp;gt;
&amp;lt;title&amp;gt;&amp;lt;?php wp_title('&amp;amp;laquo;', true, 'right'); ?&amp;gt; &amp;lt;?php bloginfo('name'); ?&amp;gt;&amp;lt;/title&amp;gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot; media=&amp;quot;screen&amp;quot;&amp;gt;
@import url( &amp;lt;?php bloginfo('stylesheet_url'); ?&amp;gt; );
&amp;lt;/style&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
&amp;lt;div id=&amp;quot;container&amp;quot;&amp;gt;
&amp;lt;div id=&amp;quot;header&amp;quot;&amp;gt;&amp;lt;h1&amp;gt;&amp;lt;a href=&amp;quot;&amp;lt;?php bloginfo('url'); ?&amp;gt;&amp;quot;&amp;gt;&amp;lt;?php bloginfo('name'); ?&amp;gt;&amp;lt;/a&amp;gt;
&amp;lt;/h1&amp;gt;&amp;lt;/div&amp;gt;

With the following line:

&amp;lt;?php get_header(); ?&amp;gt;

Your copied code needs to be placed in the header.php file. The same thing we will do with the footer and sidebar

Copy the following:

&amp;lt;div id=&amp;quot;navigation&amp;quot;&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;Navigation Here&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;ul&amp;gt;
 &amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;&amp;lt;?php bloginfo('url'); ?&amp;gt;&amp;quot;&amp;gt;Home&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
&amp;lt;?php wp_list_pages('title_li='); ?&amp;gt;
&amp;lt;/ul&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;div id=&amp;quot;extra&amp;quot;&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;Categories&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;ul&amp;gt;
 &amp;lt;?php wp_list_categories('title_li='); ?&amp;gt;
&amp;lt;/ul&amp;gt;
&amp;lt;/div&amp;gt;

Paste them to sidebar.php then in the index.php file replace it with:

&amp;lt;?php get_sidebar(); ?&amp;gt;

Now, do the same thing with the footer. Copy the footer div and it’s contents, paste it in footer.php file, and then remove it in index.php with:

&amp;lt;?php get_footer(); ?&amp;gt;

You should have something like this:

&amp;lt;?php get_header(); ?&amp;gt;
 &amp;lt;div id=&amp;quot;wrapper&amp;quot;&amp;gt;
 &amp;lt;div id=&amp;quot;content&amp;quot;&amp;gt;
 &amp;lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?&amp;gt;
 &amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;&amp;lt;a href=&amp;quot;&amp;lt;?php the_permalink(); ?&amp;gt;&amp;quot;&amp;gt;&amp;lt;?php the_title(); ?&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
 &amp;lt;p&amp;gt;Published on &amp;lt;?php the_time('m d Y'); ?&amp;gt; by &amp;lt;?php the_author(); ?&amp;gt;&amp;lt;/p&amp;gt;
 &amp;lt;p&amp;gt;&amp;lt;?php the_content(); ?&amp;gt;&amp;lt;/p&amp;gt;
 &amp;lt;?php endwhile; else: ?&amp;gt;
 &amp;lt;p&amp;gt;&amp;lt;?php _e('Sorry, no posts matched your criteria.'); ?&amp;gt;&amp;lt;/p&amp;gt;
 &amp;lt;?php endif; ?&amp;gt;
 &amp;lt;/div&amp;gt;
 &amp;lt;/div&amp;gt;
 &amp;lt;?php get_sidebar(); ?&amp;gt;
 &amp;lt;?php get_footer(); ?&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;

Now you’re done with chopping the markup. We are going to create the page templates. We will create firstly the single template. Just save your index.php file as single.php. We won’t modify anything in this page yet. We will do it in part 2 where I will learn you how to create a comment form and how to list comments and other things like custom fields.

Now, for the static page, page template, delete the line where you have placed the meta data (the line with date, author and category tags). Then save the file as page.php. Being a page, we won’t need any info about the creation date or the author. We won’t even use comments on page because there is no point in it.

The last move we need to do is to print screen our template and save it in a canvas of 300 x 225 px and save it as screenshot.png in the root directory of your theme. This will be used in WordPress theme menu.

Well, we’re done with the first part. Go ahead and test your theme. If there is something you want to ask, do it via comments. Don’t forget that you can download the source files too.

To be continued

There are a lot of things to cover about WordPress. Making a theme isn’t so difficult, you just need to be patient. There are a lot of things that are needed to make a fully functional WordPress theme. That’s why, this tutorial will have a Part 2. Maybe there will be more parts, but i will let you know what I will be covering in the next part:

  • Widgetizing the sidebar
  • Using the single page template: comments, custom fields, author details
  • Using custom fields for showing an image for each article
  • Making a nice and working search form

Stay Tuned.

3 Written Articles

I'm a young web designer & developer from Romania who fell in love with creativity and Adobe. Follow me at @cssfactory

57 Comments Best Comments First
  • Grün Weiss

    Friday, May 7th, 2010 15:47

    12

    good article, perfect details

    +1
  • John

    Friday, May 7th, 2010 19:17

    19

    Cosmin,

    Overall a very nice introductory lesson in creating your own wordpress theme. A couple things I might change is using h2 tags for the links to the blog posts as opposed to a paragraph and strong elements. That makes styling the links through css much easier. I also would probably use wp_page_menu() in place of wp_list_pages() simply because page_menu handles more configurations with less hassle than list_pages.

    I’m looking forward to part 2

    +1
    • Cosmin Negoita

      Friday, May 7th, 2010 22:21

      20

      Hey John, I’ve never used that, but of course I’ll give it a try and I think I’ll cover this too in part 2! Thanks for the suggestion!

      -1
  • Mouadm

    Friday, May 7th, 2010 18:44

    18

    it is really good.

    0
  • Hastimal Shah

    Saturday, May 8th, 2010 06:13

    22

    Awesome tutorial.
    Nice and easy to learn.
    I will be waiting for part II.
    Thanks

    0
  • alfiks

    Friday, May 7th, 2010 18:27

    17

    Thanks for the tutorial, really helpful at the moment! Hope to see part 2 soon!

    0
  • Adena

    Saturday, May 8th, 2010 15:39

    24

    Great Tutorial! Waiting for part 2

    0
  • ulaganathan

    Friday, May 7th, 2010 12:25

    1

    it is really good. Waiting for part2
    Thanks

    0
  • Jen Oliver

    Sunday, May 9th, 2010 00:39

    28

    Thank you for this! I’ve been eager to start making my own WP themes for a while now. I’m looking forward to studying this tutorial closer.

    0
  • Jenny

    Saturday, May 8th, 2010 17:45

    27

    Super tutorial. Mind if I share this with my readers?

    0
  • wpin

    Saturday, May 8th, 2010 16:54

    26

    Awesome tutorial, been looking for a DECENT guide to creating your own theme for an absolute age!

    Really looking forward to Part II

    0
  • Chummy

    Friday, May 7th, 2010 23:44

    16

    I’d like to go further with the tutorial but the CSS template referred to (#7) is unavailable to me — when I download and scan it, my security software notes it is infected.

    0
    • Cosmin Negoita

      Saturday, May 8th, 2010 07:02

      23

      Strange, I haven’t got any problems like this. Just trust me, download and do not worry! The file isn’t infected. I have AVG Antivirus and I wasn’t alerted.

      0
  • Cosmin Negoita

    Friday, May 7th, 2010 12:52

    5

    I’m happy that this article is helping you guys! I’ll try to cover all the things I’ve listed at the end of the article and I’ll try to make it very easy for all of you!

    0
  • Design Earth

    Friday, May 7th, 2010 12:16

    4

    Amazing, really thanks Cosmin. As I’m new to wordpress & this help me a lot. Definitely try this.

    0
  • DRX-Design

    Friday, May 7th, 2010 17:54

    3

    Amazing!!!
    It is really good. Waiting for part2
    Thanks

    0
  • Hilmy

    Friday, May 7th, 2010 14:48

    2

    Thanks Cosmin, this is what I’ve been looking for – a tutorial on building a WordPress theme. It is something that I’ve always wanted to do and I envy seeing people creating those nice-looking themes. Soon I can release my own themes too I believe.

    Just keep going my friend.

    0
    • Cosmin Negoita

      Friday, May 7th, 2010 17:29

      15

      Hehe, that’s what I felt like too when I wasn’t a theme developer, but then I realized I should do something…Wordpress have a lot of tags, I don’t feel like knowing 50% of them yet. But with the ones I know, I can build a little more advanced themes. You can do a lot with WordPress, just read around the web and learn from the masters…

      0
  • ezra

    Friday, May 7th, 2010 13:35

    6

    I created my theme for my site

    0
  • Jan

    Friday, May 7th, 2010 15:34

    11

    It’s a very usefull tutorial. Thanks a lot.

    Bye for now,
    Jan

    0
  • McConnell Group

    Friday, May 7th, 2010 21:13

    9

    Waiting for part two, Good Job!

    0
  • Omer Greenwald

    Friday, May 7th, 2010 15:34

    10

    Very straight forward and clear. Once the theme is implemented in a specific website, you can turn some of these dynamic PHP calls to static HTML to increase speed.

    0
    • Saad Bassi

      Friday, May 7th, 2010 17:15

      13

      Totally Agreed with Omar here. This helps to fasten WordPress a lot

      0
    • Cosmin Negoita

      Friday, May 7th, 2010 17:26

      14

      Could you give me some information about that? It’s something I do not know…

      0
      • Omer Greenwald

        Tuesday, May 11th, 2010 19:24

        45

        Sure, Cosmin. What I meant was that after the theme is done, you can view the HTML source and copy values to the theme’s PHP file.

        For example, the following dynamic code:
        <meta http-equiv="Content-Type" content="<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>" />
        can be replaced with this static code:
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        (or any other charset for that matter)

        By doing this you reduce the PHP queries and make your WP site faster.

        0
      • sriganesh

        Friday, May 7th, 2010 19:46

        7

        useful tutorial cosmin ! one request – in your upcoming post – can you teach us how to add community news link feed like used in popular sites(tuts network) and others similar ! the submission links should appear in one static page. with the form .
        that will be very helpful !! please consider it :D
        – sriganesh.m

        0
  • Lauhakari [mikko]

    Sunday, May 9th, 2010 00:11

    29

    Actually, I’d like to give a tip here and change one thing about your code here!
    I actually got this from Themeshaper, hade never thought of it before, but hey I’ll share the knowledge!! =)

    The main header for the blog, is usually the H1, but on a Post, or Page page, it should in fact be the post/pages header, as that is the focus point of that page (from an SEO point of view especially). So a tip is to change the header (H1) part like the following:
    <!–

    <a href="/”>

    <a href="/”> ” >

    –>
    This will use the H1 tag only when on the homepage of the site, and you can use the H1 tag on your post title or page title without it “conflicting” with the H1 of the blog title….

    Hope you find this usefull =D

    0
    • Saad Bassi

      Sunday, May 9th, 2010 09:05

      33

      Good tip for SEO view.:)

      0
    • Cosmin Negoita

      Sunday, May 9th, 2010 10:13

      34

      I totally agree with you, but this these are just basics and it would be some little extra work to change the source files and the code in tutorial. I’ll cover this in part 2 or in future article. For now, thank you :) and please, don’t get me wrong.

      0
      • Saad Bassi

        Sunday, May 9th, 2010 16:49

        38

        Well Cosmin, no doubt, you have no need to touch these details in beginner tuts. You can definitely write a separate article on advanced WordPress tricks.

        0
        • Cosmin Negoita

          Sunday, May 9th, 2010 21:24

          41

          Well, maybe you’re right. Normally beginners won’t know what SEO is…I’ll try to cover more things about SEO for WordPress in a separate article.

          0
    • Lauhakari [mikko]

      Sunday, May 9th, 2010 00:17

      30

      seems like you couldn’t write code =/

      I’ll mail it to you instead, and you can see if you want to print it later ;)

      0
  • Mustapha NAJAH

    Tuesday, May 11th, 2010 16:55

    44

    a well written article, i hope that by finishing all steps there will be the same thing for Joomla 1.5.x. Again Thank you so much

    0
  • Carlos Andres

    Monday, September 20th, 2010 23:06

    49

    The links to resources does not work, I wonder if there is any way to get these, I am somewhat confused and would like to know how is the end this tutorial, thanks

    0
  • Ekin Ertaç

    Sunday, May 23rd, 2010 19:31

    48

    Hey! Thanks for the link :) by the way you wrote great tutorial !!!

    0
  • Kris

    Saturday, May 22nd, 2010 15:12

    47

    Awesome Tut, thanks!

    Am currently in the process of creating a WP theme for a client / friend and this tutorial has helped no end! Now to part 2….

    0
  • Serg

    Sunday, May 9th, 2010 01:57

    31

    Thank you for the excellent example of a WordPress theme! I’m just learning.

    0
  • Vinicius Almeida

    Monday, May 17th, 2010 20:41

    46

    Awesome tuto! tnks!

    Waiting for part two! ^^

    0
  • Hiren Khambhayta

    Friday, October 8th, 2010 17:26

    50

    Nice one, but there are other tutorial of such kind on nettuts, spoongraphics, csstricks and much more. Expected deeper article.

    0
  • Hammad

    Tuesday, May 3rd, 2011 20:29

    51

    Great artricle i have searching to learn some good tutorials on wordpress..Great place to increase such a gerat Knowledge….

    0
  • macinfo

    Wednesday, February 15th, 2012 15:03

    56

    Could someone please re-upload the source files of the tutorial?

    Thanks!

    0
  • Andhie Mawan

    Thursday, March 29th, 2012 23:01

    57

    thanks! i’ve just created my first wp theme in 2 weeks, :) thanks for all your tutorials 1stwebdesigner!
    You guys are totally amazing!

    0
  • Ben

    Wednesday, December 21st, 2011 10:12

    55

    I am waiting for the second part.

    0
  • Dan

    Wednesday, December 21st, 2011 10:03

    54

    Is there the part 2?

    0
  • Brian

    Thursday, September 22nd, 2011 08:08

    52

    I need help to download the source code. Thanks

    0
  • Sofia

    Monday, May 10th, 2010 17:40

    43

    Thanks a lot mate. I’ve read through lots of resources about that before and I can honestly say you’ve described the wordpress templates creation in a very easy-to-understand way. Really nice post.

    0
  • Nick Plekhanov

    Sunday, May 9th, 2010 14:01

    35

    The links above ‘re not working ;(
    Fix ‘em pls

    0
    • Cosmin Negoita

      Sunday, May 9th, 2010 17:20

      40

      The links are working for me too…

      0
    • Saad Bassi

      Sunday, May 9th, 2010 14:25

      36

      Will you please tell, which links?

      0
      • Nick Plekhanov

        Sunday, May 9th, 2010 14:33

        37

        ‘Live preview’ and ‘Download source files’ links at the tut introduction text ;)

        0
        • Saad Bassi

          Sunday, May 9th, 2010 16:50

          39

          for me both these links are working.

          0
  • Ilie Ciorba

    Monday, May 10th, 2010 15:25

    42

    Greate article, I have been looking for a good tutorial like this for a long time

    0
  • Costa

    Sunday, May 9th, 2010 09:03

    32

    Great tutorial for those wanting to create their first Theme. I like tutorials like this, no long winded technical explanations to confuse those who are non tech savvy.

    0
  • Herrhumi

    Friday, May 7th, 2010 14:43

    8

    Super article! Waiting too for part2! thx Cosmin

    -1
  • Dee

    Saturday, May 8th, 2010 02:07

    21

    Thanks for a good introduction to working locally with WordPress. Up until now, I’ve always used FTP and developed against a test site online. This looks like a better way to go :)

    Dee

    -1
    • Cosmin Negoita

      Saturday, May 8th, 2010 10:45

      25

      I used to do that too, but I realized that working directly on the set theme is taking less time…

      0
  • Andhie Mawan

    Thursday, March 29th, 2012 23:01

    57

    thanks! i’ve just created my first wp theme in 2 weeks, :) thanks for all your tutorials 1stwebdesigner!
    You guys are totally amazing!

    0
  • macinfo

    Wednesday, February 15th, 2012 15:03

    56

    Could someone please re-upload the source files of the tutorial?

    Thanks!

    0
  • Ben

    Wednesday, December 21st, 2011 10:12

    55

    I am waiting for the second part.

    0
  • Dan

    Wednesday, December 21st, 2011 10:03

    54

    Is there the part 2?

    0
  • Brian

    Thursday, September 22nd, 2011 08:08

    52

    I need help to download the source code. Thanks

    0
  • Hammad

    Tuesday, May 3rd, 2011 20:29

    51

    Great artricle i have searching to learn some good tutorials on wordpress..Great place to increase such a gerat Knowledge….

    0
  • Hiren Khambhayta

    Friday, October 8th, 2010 17:26

    50

    Nice one, but there are other tutorial of such kind on nettuts, spoongraphics, csstricks and much more. Expected deeper article.

    0
  • Carlos Andres

    Monday, September 20th, 2010 23:06

    49

    The links to resources does not work, I wonder if there is any way to get these, I am somewhat confused and would like to know how is the end this tutorial, thanks

    0
  • Ekin Ertaç

    Sunday, May 23rd, 2010 19:31

    48

    Hey! Thanks for the link :) by the way you wrote great tutorial !!!

    0
  • Kris

    Saturday, May 22nd, 2010 15:12

    47

    Awesome Tut, thanks!

    Am currently in the process of creating a WP theme for a client / friend and this tutorial has helped no end! Now to part 2….

    0
  • Vinicius Almeida

    Monday, May 17th, 2010 20:41

    46

    Awesome tuto! tnks!

    Waiting for part two! ^^

    0
  • Mustapha NAJAH

    Tuesday, May 11th, 2010 16:55

    44

    a well written article, i hope that by finishing all steps there will be the same thing for Joomla 1.5.x. Again Thank you so much

    0
  • Sofia

    Monday, May 10th, 2010 17:40

    43

    Thanks a lot mate. I’ve read through lots of resources about that before and I can honestly say you’ve described the wordpress templates creation in a very easy-to-understand way. Really nice post.

    0
  • Ilie Ciorba

    Monday, May 10th, 2010 15:25

    42

    Greate article, I have been looking for a good tutorial like this for a long time

    0
  • Nick Plekhanov

    Sunday, May 9th, 2010 14:01

    35

    The links above ‘re not working ;(
    Fix ‘em pls

    0
    • Saad Bassi

      Sunday, May 9th, 2010 14:25

      36

      Will you please tell, which links?

      0
      • Nick Plekhanov

        Sunday, May 9th, 2010 14:33

        37

        ‘Live preview’ and ‘Download source files’ links at the tut introduction text ;)

        0
        • Saad Bassi

          Sunday, May 9th, 2010 16:50

          39

          for me both these links are working.

          0
    • Cosmin Negoita

      Sunday, May 9th, 2010 17:20

      40

      The links are working for me too…

      0
  • Costa

    Sunday, May 9th, 2010 09:03

    32

    Great tutorial for those wanting to create their first Theme. I like tutorials like this, no long winded technical explanations to confuse those who are non tech savvy.

    0
  • Serg

    Sunday, May 9th, 2010 01:57

    31

    Thank you for the excellent example of a WordPress theme! I’m just learning.

    0
  • Lauhakari [mikko]

    Sunday, May 9th, 2010 00:11

    29

    Actually, I’d like to give a tip here and change one thing about your code here!
    I actually got this from Themeshaper, hade never thought of it before, but hey I’ll share the knowledge!! =)

    The main header for the blog, is usually the H1, but on a Post, or Page page, it should in fact be the post/pages header, as that is the focus point of that page (from an SEO point of view especially). So a tip is to change the header (H1) part like the following:
    <!–

    <a href="/”>

    <a href="/”> ” >

    –>
    This will use the H1 tag only when on the homepage of the site, and you can use the H1 tag on your post title or page title without it “conflicting” with the H1 of the blog title….

    Hope you find this usefull =D

    0
    • Lauhakari [mikko]

      Sunday, May 9th, 2010 00:17

      30

      seems like you couldn’t write code =/

      I’ll mail it to you instead, and you can see if you want to print it later ;)

      0
    • Saad Bassi

      Sunday, May 9th, 2010 09:05

      33

      Good tip for SEO view.:)

      0
    • Cosmin Negoita

      Sunday, May 9th, 2010 10:13

      34

      I totally agree with you, but this these are just basics and it would be some little extra work to change the source files and the code in tutorial. I’ll cover this in part 2 or in future article. For now, thank you :) and please, don’t get me wrong.

      0
      • Saad Bassi

        Sunday, May 9th, 2010 16:49

        38

        Well Cosmin, no doubt, you have no need to touch these details in beginner tuts. You can definitely write a separate article on advanced WordPress tricks.

        0
        • Cosmin Negoita

          Sunday, May 9th, 2010 21:24

          41

          Well, maybe you’re right. Normally beginners won’t know what SEO is…I’ll try to cover more things about SEO for WordPress in a separate article.

          0
  • Jen Oliver

    Sunday, May 9th, 2010 00:39

    28

    Thank you for this! I’ve been eager to start making my own WP themes for a while now. I’m looking forward to studying this tutorial closer.

    0
  • Jenny

    Saturday, May 8th, 2010 17:45

    27

    Super tutorial. Mind if I share this with my readers?

    0
  • wpin

    Saturday, May 8th, 2010 16:54

    26

    Awesome tutorial, been looking for a DECENT guide to creating your own theme for an absolute age!

    Really looking forward to Part II

    0
  • Adena

    Saturday, May 8th, 2010 15:39

    24

    Great Tutorial! Waiting for part 2

    0
  • Hastimal Shah

    Saturday, May 8th, 2010 06:13

    22

    Awesome tutorial.
    Nice and easy to learn.
    I will be waiting for part II.
    Thanks

    0
  • Dee

    Saturday, May 8th, 2010 02:07

    21

    Thanks for a good introduction to working locally with WordPress. Up until now, I’ve always used FTP and developed against a test site online. This looks like a better way to go :)

    Dee

    -1
    • Cosmin Negoita

      Saturday, May 8th, 2010 10:45

      25

      I used to do that too, but I realized that working directly on the set theme is taking less time…

      0
  • John

    Friday, May 7th, 2010 19:17

    19

    Cosmin,

    Overall a very nice introductory lesson in creating your own wordpress theme. A couple things I might change is using h2 tags for the links to the blog posts as opposed to a paragraph and strong elements. That makes styling the links through css much easier. I also would probably use wp_page_menu() in place of wp_list_pages() simply because page_menu handles more configurations with less hassle than list_pages.

    I’m looking forward to part 2

    +1
    • Cosmin Negoita

      Friday, May 7th, 2010 22:21

      20

      Hey John, I’ve never used that, but of course I’ll give it a try and I think I’ll cover this too in part 2! Thanks for the suggestion!

      -1
  • Mouadm

    Friday, May 7th, 2010 18:44

    18

    it is really good.

    0
  • alfiks

    Friday, May 7th, 2010 18:27

    17

    Thanks for the tutorial, really helpful at the moment! Hope to see part 2 soon!

    0
  • Chummy

    Friday, May 7th, 2010 23:44

    16

    I’d like to go further with the tutorial but the CSS template referred to (#7) is unavailable to me — when I download and scan it, my security software notes it is infected.

    0
    • Cosmin Negoita

      Saturday, May 8th, 2010 07:02

      23

      Strange, I haven’t got any problems like this. Just trust me, download and do not worry! The file isn’t infected. I have AVG Antivirus and I wasn’t alerted.

      0
  • Grün Weiss

    Friday, May 7th, 2010 15:47

    12

    good article, perfect details

    +1
  • Jan

    Friday, May 7th, 2010 15:34

    11

    It’s a very usefull tutorial. Thanks a lot.

    Bye for now,
    Jan

    0
  • Omer Greenwald

    Friday, May 7th, 2010 15:34

    10

    Very straight forward and clear. Once the theme is implemented in a specific website, you can turn some of these dynamic PHP calls to static HTML to increase speed.

    0
    • Saad Bassi

      Friday, May 7th, 2010 17:15

      13

      Totally Agreed with Omar here. This helps to fasten WordPress a lot

      0
    • Cosmin Negoita

      Friday, May 7th, 2010 17:26

      14

      Could you give me some information about that? It’s something I do not know…

      0
      • sriganesh

        Friday, May 7th, 2010 19:46

        7

        useful tutorial cosmin ! one request – in your upcoming post – can you teach us how to add community news link feed like used in popular sites(tuts network) and others similar ! the submission links should appear in one static page. with the form .
        that will be very helpful !! please consider it :D
        – sriganesh.m

        0
      • Omer Greenwald

        Tuesday, May 11th, 2010 19:24

        45

        Sure, Cosmin. What I meant was that after the theme is done, you can view the HTML source and copy values to the theme’s PHP file.

        For example, the following dynamic code:
        <meta http-equiv="Content-Type" content="<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>" />
        can be replaced with this static code:
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        (or any other charset for that matter)

        By doing this you reduce the PHP queries and make your WP site faster.

        0
  • McConnell Group

    Friday, May 7th, 2010 21:13

    9

    Waiting for part two, Good Job!

    0
  • Herrhumi

    Friday, May 7th, 2010 14:43

    8

    Super article! Waiting too for part2! thx Cosmin

    -1
  • ezra

    Friday, May 7th, 2010 13:35

    6

    I created my theme for my site

    0
  • Cosmin Negoita

    Friday, May 7th, 2010 12:52

    5

    I’m happy that this article is helping you guys! I’ll try to cover all the things I’ve listed at the end of the article and I’ll try to make it very easy for all of you!

    0
  • Design Earth

    Friday, May 7th, 2010 12:16

    4

    Amazing, really thanks Cosmin. As I’m new to wordpress & this help me a lot. Definitely try this.

    0
  • DRX-Design

    Friday, May 7th, 2010 17:54

    3

    Amazing!!!
    It is really good. Waiting for part2
    Thanks

    0
  • Hilmy

    Friday, May 7th, 2010 14:48

    2

    Thanks Cosmin, this is what I’ve been looking for – a tutorial on building a WordPress theme. It is something that I’ve always wanted to do and I envy seeing people creating those nice-looking themes. Soon I can release my own themes too I believe.

    Just keep going my friend.

    0
    • Cosmin Negoita

      Friday, May 7th, 2010 17:29

      15

      Hehe, that’s what I felt like too when I wasn’t a theme developer, but then I realized I should do something…Wordpress have a lot of tags, I don’t feel like knowing 50% of them yet. But with the ones I know, I can build a little more advanced themes. You can do a lot with WordPress, just read around the web and learn from the masters…

      0
  • ulaganathan

    Friday, May 7th, 2010 12:25

    1

    it is really good. Waiting for part2
    Thanks

    0

Comments are closed.

54.198.94.76 - unknown - unknown - US