You are here: Home » WP Themes » How to Create Your Own WordPress Theme

How to Create Your Own WordPress Theme

Figuring out how themes work and applying that knowledge

To some people, making a WordPress theme will remain a “dark art”, while others, though knowledgeable In the basics of design (HTML, PHP and CSS), will not even try, because they can’t find the motivation to experiment with making their own theme. This tutorial is targeted at people who have a basic understanding of the technologies WordPress utilizes, but not the structure of themes themselves. It will help you understand how to make your own theme according to the accepted standard.

We need to explore the structure of a theme in order to know what we can do to modify or create our own. That’s why we’ll begin exploring what a theme comprises of.

WordPress Theme Anatomy

The basic elements of which a WordPress theme consists are :

  1. Style sheet files (mostly style.css) which contain the visual representations of elements on your site. Colors and positions are mostly governed from here
  2. WordPress template files, which control the way in which content is placed and information is fetched in the website. They control where information (posts and other dynamic content) is placed on your page. These are PHP files : header.php, footer.php, page.php, single.php and so on
  3. The additional functions file, functions.php. For a simpler theme we won’t be using this file.

Additionally, if need be, we can add images or JavaScript files or libraries, should any of their functionality be necessary.

Some words about style.css

Beside the actual CSS code, which is basically comprised of definitions of classes which you’re going to use in the theme, the style.css file also contains meta information about the theme, in the form of comments. A good example provided by the official WordPress documentation site looks like this:

/*

Theme Name: Twenty Ten

Theme URI: http://wordpress.org/

Description: The 2010 default theme for WordPress.

Author: wordpressdotorg

Author URI: http://wordpress.org/

Version: 1.0

Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)

License:

License URI:

General comments (optional).

*/

Let’s give some clarification, though most of the fields are self-explanatory. The theme URI field is where the website of the author and theme itself is poster. URI stands for Uniform Resource Identifier. Theme URI and Author URI are used for the theme and author respectively. The Author field could be filled with the author’s real name , or his username in WordPress.org , that’s for him to decide. Tags include the basic characteristics of the theme, so that others would find it more easily , starting with the main colors,  visual characteristics (like two-columns, custom-header), and advanced functionalities (like rtl-language-support, threaded-comments and so on).

Function and contents of the template files

As stated before, template files are what drives the WordPress installation to put the things stored in its database into visual representation. How your theme is ordered, what comes after what, and which PHP functions are called all depends on your template files.

What these template files include is the basic “skeleton” of the page, made in HTML, with included pieces of code called template tags.  What those do is to call the PHP interpreter, and ask for information to be placed inside the HTML skeleton. You’ll notice them by their syntax :

 

<?php  wp_somefunction(‘someparameter’);  ?>

So here’s how we’re going to proceed – we’ll list each PHP file, and the tags incorporated in it. By doing that , you’ll get a notion of what you have to modify to get results on a certain place in your theme.

 

Header.php

This file contains the header of your page, usually where the logo and title show up, which are present in every page. It contains the following tags:

  - this returns the title generated for the page. Encapsulated in tags

<?php <span class="hiddenSpellError" pre="php ">bloginfo</span>('stylesheet_url'); ?> - this gives the style sheet URL loaded in the head section of the HTML code

<?php wp_list_pages(); ?> - this is used to generate a list of pages to populate the navigation menu

Index.php

In this file, the main loop is defined. In it, the content fetching and displaying of posts happens. Also, different structural parts like the header and footer are called. Basically, this file includes all of the other template files in it. Some tags in it are :

  - permalink of the post

  - title of the post

 - the actual content of the post

 - invocation of the footer

 

By now you’ve probably gotten the hang of it, and in order not to bore you, we’ll continue with only brief descriptions of where you can find the necessary functionality in template files. The rest is pretty much self-explained through the titles of the tags.

Single.php

This template file is used whenever the necessity comes to render a single blog post. It contains options regarding the comments of the post, and displaying the full post.

Page.php

This is for displaying static pages. Static pages, unlike blog posts, don’t have a date, or a read more link, or any meta information. It’s like a stripped out version of the index.php file.

Comments.php

is responsible for displaying the comments, and footer.php  displays the bottom of the page, or the footer.

Knowing the elaborate structure of a WordPress theme, you can use basic HTML and CSS to design or modify a theme to your liking.

About admin

Ajinkya Thete is passionate Blogger,a self-taught web developer and a person who is always looking for innovation.

27 comments

  1. Thank you for co-operation. This is really helpful for creating the easy & best wp theme from html. Everything is explained here clearly & step by step & can be understood easily.

  2. Just right using this type of write-up, I must say i suppose this site needs far more consideration. I’ll perhaps be again to master far more, thank you that info.

  3. I prefer the dear information you provide with your articles. I’ll bookmark your blog post and check again here frequently. I will be quite certain I’ll learn numerous new stuff the following! All the best . for one more!

  4. Hi ,One of the better to say appreciate your this interesting thread about Day 6 |! Regards, Geburtstag

  5. Awesome content and organization with your website dude, invaluable to my opinion and everybody.

  6. I really appreciate the guide. But please how d =o i go about the menu of the site?

  7. This is a good start for me to build wordpress theme from HTML page.

  8. I was finding something to create wp theme…. its really helpfull. thnxx

  9. Truly when someone doesn’t know then its up to other people that they will help, so here it occurs.

  10. thank for detail….could you more on seo friendly template

  11. Hello there, I found your blog via Google even
    as looking for a related subject, your website got here up, it appears good.
    I have bookmarked it in my google bookmarks.

    Hi there, simply turned into aware of your blog thru Google, and found that it is really informative.
    I’m going to watch out for brussels. I will be grateful when you continue this in future. A lot of other people can be benefited out of your writing. Cheers!

  12. hello….. I hope all these template tags and this tutorial will be useful to me while converting an html rheme into WP!!!!!!!

  13. thanks a lot. but can u detail about menus. i don’t see menu inside appearance

  14. thanks,i’try,..but i think it’s so difficult,can u tell me what the great tools to help create my theme

  15. I have been trying for a couple years to find an article that gave me the BASICS in these terms. I cannot thank you enough. Great start for me. Thanks so much.

  16. thanks for detail….

  17. That’s a great article to get started with Theme Development.Thanks a lot !

  18. Dallas photographer

    This a good start. I’m going to try to convert my html website.

  19. thank you very much
    an article idea effectively
    Post it mean thank you

  20. It’s awesome to visit this site and reading the views of all friends about this paragraph, while I am also keen of getting experience.

  21. This has been a great learning tool! Thanks so much, I was looking for a nice and easy to the point read on this subject.

  22. Great way to start, awesome tutorial.
    Thanks for sharing :)

  23. Good day! This is kind of off topic but I need some advice
    from an established blog. Is it very difficult to set up your own
    blog? I’m not very techincal but I can figure things out pretty quick. I’m thinking about creating my own but
    I’m not sure where to begin. Do you have any points or suggestions? Thanks

  24. Wow… amazing tricks,
    not wrong that I raised you to be one of my teachers, you are god teacher.
    Thanks…

  25. Wow… amazing tricks,
    not wrong that I raised you to be one of my teachers, you are god teacher.
    Thanks…

Leave a Reply

Scroll To Top