Skip to content

Basics Of WordPress Theme Design

You might be surprised to know that WordPress theme development is actually not very hard once you’ve got the hang of it.

In this post we’ll look at the different aspects of WordPress theme development, starting with the fundamentals and then moving swiftly onto the basics, template tags and the more advanced files.

The fundamentals

A WordPress theme is made up of a number of different files, and they all contain a seperate section of the page; the header will contain the title and navigation, then the index will contain the main content area (or on a post, the single file does the job).

The sidebar, obviously contains the sidebar and the footer contains the footer and closes off the HTML. This all sounds very straightforward, but the important bit is how you can just have a single file, change it once and you will change your whole site. Change your footer and that change will be reflected sitewise, not just on a single page.

Want to create a WordPress powered email newsletter? No problem; just pop it in the sidebar file.

Yay! 🎉 You made it to the end of the article!
Alex Denning
Share:

19 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
15 Tutorials To Help You Build WordPress ThemesFree Themes and Templates | Free Themes and Templates
March 3, 2013 7:40 am

[…] overview of features alone is useful for anyone creating a generic theme to sell or give away. Basics Of WordPress Theme Design This multi-part tutorial from WPShout takes a detailed look at each of the various template files […]

25 WordPress Theme Development Tutorials to Get Started - Rockable Themes
January 25, 2013 12:18 pm

[…] 14. Basics Of WordPress Theme Design […]

sopier
September 26, 2012 3:02 pm

Nice tuts for beginner!!! Thanks…

The Lord of WordPress: Designing Theme from Scratch [Tutorials] | Template Monster Blog
August 17, 2012 8:42 am

[…] *WordPress Theme Tutorial in 14 Lessons* * *How to Build a Custom WordPress Theme from Scratch* * *Basics of WordPress Theme Design* * *How to Code a WordPress 3.0 Theme from Scratch* * *Create a Typography Based WordPress Blog […]

15 Tutorials To Help You Build WordPress Themes « Puppetuts | Graphic and Web Design Tutorials
March 29, 2012 7:44 am

[…] Basics Of WordPress Theme Design […]

Resources for WordPress Theme Development | Web Hosting Blog at ASO
March 1, 2012 5:11 pm

[…] This post from WPShout walks you through the coding basics of creating your own theme. It gives solid explanations and commentary behind every step, ensuring that you understand the reasoning behind each task. WPShout does a fantastic job of making things easy for the beginner without sacrificing important contextual information. Image from WPShout.com […]

15 Tutorials To Help You Build WordPress Themes « Simpler Designs
February 24, 2012 5:39 am

[…] Basics Of WordPress Theme Design […]

Bridgette Anne Murray
November 11, 2011 1:02 am

just be thankful for the information jennifer, it is free anyway. i actually learn a lot from reading this site

David A. Kennedy | 31 Resources for Powering a Website with Wordpress
July 3, 2010 5:35 am

[…] Another WordPress theme tutorial – from WP Shout. […]

paul
June 29, 2010 1:50 am

do you have much better tut jennifer?…..

Jennifer
June 19, 2010 5:35 am

The post show the most basic of theme design but thank you for this 🙂

Aery
May 21, 2010 10:17 pm

Hi,

I am Surely Going to Use This

Thanks for Informing

Regards.

Andrés Bayona
May 20, 2010 4:52 pm

I would like to translate this post in Spanish, quoting in my personal blog.

Could it?

Regards

Free eBook: A Beginner’s Guide to WordPress Theme Development | WPShout.com
May 19, 2010 9:00 am

[…] Theme Development", the eBook has arrived!The series has since been updated into this post: “Basics of WordPress Theme Design” — check it out!Day 1: Introduction, the fundamentals of WordPress theme developmentDay […]

Using WordPress “As A CMS” | WPShout.com
May 3, 2010 2:04 pm

[…] by replacing posts_per_page=5 with meta_key=show-on-page. You can learn about the basics of WordPress theme design here.Real-life applicationWe’ve now got a hypothetical shop and want staff to be able to add to a […]

11 Awesome Wordpress Development Blogs
April 30, 2010 6:47 pm

[…] popular posts: Create an Advanced Options Page in WordPress Creating a Tumblog With WordPress WordPress Theme Design Basics RSS | […]

HTML to WordPress Case Study | WPShout.com
February 25, 2010 12:03 pm

[…] first thing to do was to take the HTML and put it into header, index, sidebar and footer files. Here’s a badly made screenshot of which bits went […]

ben
February 22, 2010 7:09 pm

Great post some very useful info creating a theme for WordPress is especially difficult for us noobs, with info like this it has made it that little bit easier.

Tweeting it as we speak aslo going to add to my site!

Consider this bookmarked!!!!

od3n
February 22, 2010 4:15 pm

wonderful explaination!!

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!