Let’s build WordPress theme – part 1
Booyah, we will do it! We will create sample WordPress theme from a scratch. It will be object oriented, clean code… I hope! Anyhow, we will learn a lot in this course. All right, let’s do it.
WordPress setup
This is the easiest part. If you want to write a theme, you must know how to install WordPress instance. You can do it on remote server, on your local machine – it is up to you. Just make it clean installation – we do not need any 3rd party to interfere with our project.
Theme directory
As you may know, theme directory for WordPress is /wp-content/themes/ and we will work with it. Of course we need to create subdirectory for our theme. Let’s call it… Well… Let’s call it “booyah”!
Theme files
To see something, we need just two files – it is absolutely minimum. It is style.css and index.php. First of all, create those two empty files in booyah subdirectory. Your file structure should looks like this:
/wp-content/themes/booyah/style.css
/wp-content/themes/booyah/index.php
style.css
This file will contain some basic theme info. Put here those lines:
|
1 2 3 4 5 6 |
/* Theme Name: Booyah! Author: <a href="mailto:you@domain.com">You</a> Description: Booyah! theme. Version: 0.1.1 */ |
index.php
This file will produce output for our theme. Put here those lines:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title><?php wp_title(); ?></title> <?php wp_head();?> </head> <body> <?php if ( have_posts() ) { while( have_posts() ) { the_post(); ?> <div class="post"> <h2><a href="<?php the_permalink();?>"><?php the_title();?></a></h2> <div class="content"> <?php the_content();?> </div> </div> <?php } } else { ?> <p>Sorry, there are no posts matching your criteria.</p> <?php } wp_footer(); ?> </body> </html> |
Important
This is a very bad example. You can consider it as an example of how not to do this. But… it works! It works and it is very easy. As you can see, WordPress theme can be built on such small effort so it is dangerous. It is dangerous, because there are plenty of bad written themes around the Internet.
What’s next?
You can download booyah-0.1.1, if you don’t want to copy and paste examples below. Activate it and voila – it works! But you just wait for part two… There will be much more booyah! than this, I promise.
You May Also Like
Country codes as PHP array
Date and Time – PHP way – part 1