Understanding The Contents Of A Wordpress Theme Folder

In the previous lesson we created the HTML based template index.html and its associated CSS file style.css and ensured that both these files were in the root directory of the folder mytemplate.

In this lesson we are going to take a look at what additional files are required within the mytemplate folder. After which the folder can be zipped using Winzip and uploaded into Wordpress using Wordpress administration tools and will be recognized by Wordpress as a legitimate theme.

When Wordpress is installed it comes with two default themes. Let’s take a quick look at each of these themes to understand what resources Wordpress looks for within a theme folder to recognize it as a legitimate theme.

Navigate to where you have installed WordPress on your computer.

Locate the folder named wp-content.

Inside the folder wp-content you will find both the themes and the plugins folder.

Navigate to the themes folder. You will find all Wordpress theme are installed within this folder.

A Wordpress theme folder holds the following resources:

1. index.php
2. screenshot.png
3. style.css
4. The images folder

These are the only files and folder that are necessary for WordPress to recognize a template.

Let's take a look at the functionality that these files and folder bring to a WordPress template.

index.php

The HTML code contained within index.php is primarily responsible to divide the BLOG page into unique areas.

Each unique area demarked by the HTML code will hold a PHP code snippet, which will load that area with an appropriate BLOG attribute.

For example the PHP code snippets can load the BLOG's:

1. A login attribute
2. A polls attribute
3. Access to archived BLOG posts attribute
4. The current BLOG posts sorted by the latest first

And so on, into the unique areas demarked by the HTML codespec.

Hence index.php is a mix of HTML codespec and PHP code snippets which are calls the PHP functions native to Wordpress.

When index.php executes a properly formatted BLOG page will be displayed in the user's Browser.

NOTE: There are two ways in which Wordpress templates can be coded.

• A single index.php that has all the HTML and PHP codespec necessary to deliver a content filled Wordpress BLOG page to a requesting Browser

OR

• Create multiple smaller files for the BLOG page:

• Then bind all these smaller files together using a single control file named index.php.

For simplicity purposes we've used the first approach.   For the greatest maintenence flexibility in a Wordpress theme the second approach is definitley better.  The second approach permits individual sections to be quickly changed or re-vamped without affecting the other sections.

screenshot.png

When you login to the WordPress admin section and navigate to Themes, you will see all the themes that you've installed along with a screenshot of the theme. The image displayed as the screenshot is screenshot.png.

screenshot.png is automatically recognized by the Wordpress admin section and displayed as a representative image of what the template looks like.

style.css

style.css is the cascading style sheet file that holds user directives that styles the template. All the styling that you want to apply to your template must be contained within this file.

images folder

The images folder will contain all other images (other than screenshot.png ) that you will use in the template.

• < Prev
• Next >