Posted on

WordPress Theme Development from Scratch 1

01. Most Basic Theme

The most basic theme requires just two files index.php and style.css.

Additionally it would be good to have a screenshot of the theme (png 880×660 pixel) called screenshot.png.

1. Create a new folder in /wp-content/themes/ with the name of your theme.

2. Place the index.php, style.css and screenshot.png into your theme.

3. Enable your theme in the admin panel at “Themes”

Basic example for index.php:

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * e.g., it puts together the home page when no home.php file exists.
 *
 * Learn more: {@link https://codex.wordpress.org/Template_Hierarchy}
 *
 * @package RR
 * @subpackage RR Basic
 * @since 1.0
 */
?>

<?php get_header(); ?>

<?php get_footer(); ?>

Extremely basic example for style.css (basically empty):

/*
Theme Name: RR Basic 01
Theme URI: https://www.example.com/rr-basic01
Author: Roland Russwurm
Author URI: http://www.russwurm.com
Description: The most basic theme possible at all - no styling no menus - no nothing - just for demonstration
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: basic
Text Domain: rrbasic

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/**
 * Table of Contents
 *
 * Empty
 */

Obviously this theme is not that useful but shows the minimum requirements.

02. Extending the Theme

Let’s move on and add additional parts to our theme. The most important ones for the beginning will be header.php and footer.php.

In the header.php we place the whole “head” part of the webpage including the starting body tag and the tags you need to start the content (usually a div).

In the footer.php we place the end of the page with the closing body and html tag.

Adding Static Pages to the Theme

Next we want to add the display of static pages. Therefore we use the page.php file and the content-page.php file which is used by page.php.

Adding Posts to the Theme

Now we add the display of posts. This is done with the main file single.php and the content-xxx.php. In our case content-xxx.php will be just content.php because we do not want to have different post types.

Adding a listing of Posts

Pages and posts are working nicely now but what happens if we access the general blog URL to see a list of all posts? This is not working at the moment because in this case index.php is used as fallback and we have done nothing there to show a list of current posts.

Therefore we modify the index.php to display a list of posts if we have posts in place.

Just for reference the files we have at the moment:

content-page.php
content.php
footer.php
header.php
index.php
page.php
single.php
style.css
screenshot.png

In the next part we are looking how to make this theme more functional.

03. Updgrading our Theme with FUNCTIONS

Now we focus on the file functions.php. This file is used for custmized functions and we use it to add additional features within our theme.

This is part of the next posting.

Links

WordPress Theme Template Hierarchy
Stepping into Templates