- 01 November 2018
- WordPress (25)
A theme is a collection of templates and stylesheets used to define the appearance and display of a WordPress powered website.WPBeginner
Before we get Started
This reading list is aimed at Web Developers and assumes that you’re already comfortable using the WordPress dashboard, HTML, CSS and have a basic understanding of PHP.
Downloads
- WordPress (wordpress.org)
- XAMPP
- WampServer
If you want to test code or build your own little theme as you go along, you could install an instance of WordPress on a live server, or install it locally with a development environment such as XAMPP or WampServer.
How to Install XAMPP and WordPress Locally
Reading List
We’d recommend working through these in order to build up an understanding, before moving on to the more practical elements towards the end.
-
Introducing Themes
-
What is a Theme?
A quick introduction to themes and what they can do.
A WordPress theme changes the design of your website, often including its layout. Changing your theme changes how your site looks on the front-end, i.e. what a visitor sees when they browse to your site on the web.wordpress.org
-
-
WordPress Hierarchy
-
Visualise the WordPress Template Hierarchy
This is a really good visual map of the WordPress hierachy, which should help you to better understand naming conventions for files/templates and the order used by WordPress when superseding these.
The WordPress template hierarchy is one of the most influential things in the life of theme developers. Users may need to understand it, plugins may need to interact with it, but generally it is theming that’s all about the template hierarchy.wphierarchy.com
-
-
Looping through Posts
In order to display posts or lists of posts e.g. latest blogs, you’ll want to get to grips with ‘The Loop’ and understand how to set arguments so you can customise things, e.g. list posts by category, sort order etc.
-
PHP Loops
A quick introduction to to the different types of PHP loops and their syntax. It’s a good idea to understand how PHP loops work before moving onto the WordPress loop.
-
What is a loop in WordPress?
A simple, easy to follow introduction to the WordPress loop and it’s purpose.
The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post.WordPress Codex
-
-
Using ‘WP_Query’ to Customise the Loop
-
Mastering WP_Query: Using the Loop
The WP_Query class can be used to customise the loop, which will output a standard query by default. By setting parameters with WP_Query we can customise the content delivered by the loop. Example parameters could be category_name, orderby, order, post__in, post__not_in, posts_per_page etc.
-
WordPress Query Comprehensive Reference
A comprehensive list of parameters that can be set as arguments for the loop
This class provides you with a large number of parameters you can use to define what content you want to output (which needn’t be limited to posts) and then write a loop which will show the content exactly as you want to.Envato Tuts+
-
-
Making a Basic Theme
Time to put your coding hat on!
Armed with what you’ve learned so far, we’re now ready to put together a simple theme. Independent Software have put together a really handy series of articles, which covers creating a theme from scratch. It’s a great place to get you started:
-
Part 1: Creating a WordPress Theme from Scratch
Part 1 is a hands-on, bare-bones approach to creating a simple theme, without the use of 3rd party boilerplates or starter themes. You’ll create theme files, use a few in-built WordPress functions, set up basic styles, and create the header and footer used throughout your theme. By building your first theme from scratch, you’ll understand what every line of code is doing.
-
Part 2: Content & the WordPress Template Hierarchy
Part 2 helps you expand your theme further by walking you through how to create a page template, customise the content on it, and use the loop.
Further articles are planned for the series above, with part 3 coming soon and expected to focus on menus and further styling.
This guide helps you get started from the very beginning with step-by-step instructions and helpful tips. In this first section, we’ll create the files for the new theme, set up its basic styles and create a header and a footer.Independent Software
-
Further Reading / Reference
- WordPress Codex – the online manual and documentation site for WordPress
- Theme Handbook – resource for learning all about the exciting world of WordPress themes
Comments
Whether you have feedback, a question, want to share your opinion, or simply want to say thank you - we welcome comments! Please read the disclaimer.