Browse All Articles > Getting Started In WordPress - Part II
In Part I, I introduced you to the powerful WordPress backend, the WordPress administrative Dashboard. In Part II, I will introduce you to a simple default theme that you can customize and use to create basically any type of a website.
Attached to the bottom of this article is a zip file of the files necessary in order to create a default theme. The basic WordPress default theme that I have included with this article consists of the following files, all of which can be customized to your taste:
404.php – This file is used when someone tries to access a non-existent url on your site.
archive.php – This file is used if you take advantage of WordPress’ blog capabilities. This file is used to display a post archive. Even if you don’t plan on using WordPress as a blog, you should have this file, as well as every other file in this list, present in your theme folder as WordPress will try to access it if someone uses the right url. You can change the programming of this file to display anything you want should such an event happen.
archives.php – This file is related to archive.php and is used to search the blog archives. Once again, it, as well as every file in this theme, can be customized to your specific needs.
comments.php – This file is used to display the post comment box.
comments-popup.php – This file is used to display comments in a pop-up.
default.js – Although not actually a necessary part of a default theme, this file is very useful to store your javascript. You can change default.js to yoursite.js or any other name you desire, just be sure to change all the references to it as well.
footer.php – This file contains the HTML and coding for your footer. You can have several footers for several different purposes. Simply add a dash and a name to the file name, e.g. to create a special footer for the home page, you could set up a footer file named “footer-home.php”. In your template files (which we will talk about in a moment), you would simply add the name you gave this file to the WordPress get_footer() function like so, get_footer(‘home’).
functions.php – This file contains specialized PHP functions used in your theme.
header.php – This file contains the HTML and coding for your header. Just like the footer, you can add a suffix to the file name and call it through the WordPress get_header() function. Using the same type of designation for a custom home page, you would name the file header-home.php and call get_header(‘home’) in your template file.
image.php – This file contains coding to display blog post images.
index.php – This file is the default theme file used when WordPress is in blog mode.
links.php – This file is used to display the links found under the Links main link described in Part I on a page, rather than in a widget.
notitle_nosidebar.php – This file is not a required part of a WordPress default theme. This file is simply an example of a template modified to not display a sidebar, nor a title on the pages. This template can be selected in the dropdown Template selector in the Page editor within the WordPress administrative backend.
page.php – Now this file IS part of the default WordPress theme. In fact, this file IS the DEFAULT TEMPLATE. You will see it in the dropdown Template selector in the Page editor as “Default”. You can use this file as a pattern to create new templates, however, I would check out the already customized template files accompanying this file to see the differences necessary to create custom templates that show up in the Page editor Template dropdown list.
page_notitle.php – This file is another custom template not part of the actual file set of a default theme. It is here for example only.
rtl.css – This is a CSS file you can use if you will be writing in a language that reads from right to left.
screenshot.png – This is the image that appears next to the theme when you click on the Appearance main link in the administrative backend. You can change this image by taking a screenshot of your site when you complete your theme design and cropping it to 300 pixels wide x 225 pixels tall, then uploading it to your theme file on your server.
search.php – If you include a search feature on your site, you can customize this file to customize the display of your search results.
sidebar.php - This file contains the HTML and coding for your sidebar. Just like the footer and the header, you can add a suffix to the file name and call it through the WordPress get_sidebar() function. Using the same type of designation for a custom home page, you would name the file sidebar-home.php and call get_sidebar(‘home’) in your template file.
single.php – This file is used to display a single blog post on its own page.
style.css – This file contains all the CSS for your theme. You can add as many CSS files as you like, naming them any way you want, you would simply have to ensure they were all linked (and in the proper order) within your header.php file. But the style.css file is necessary because WordPress uses this file to identify your theme (see Setting Up Your Theme below.)
Along with these files there is an images subfolder which contains an example background shadow and the WordPress logo. Use this subfolder to store the images you use on your new site.
BACKGROUND ON FILES
As you probably have noticed by now, WordPress is a PHP based CMS, and as such is limited only by the limitations of PHP itself (which are few and far between), and so, IMHO is a fantastic platform to design practically any type of site you desire. Once you become familiar with theme and plugin development, really, the sky’s the limit.
Let’s start out by developing your custom theme.
Setting Up Your Theme
In order for WordPress to recognize your theme, each file should have a theme designator. All theme and template designators are set up within PHP comments. If you examine the first few lines of each of the default theme’s PHP files, you will see comments similar to this:
You can change Default_Theme to the name of your new theme.
As mentioned earlier, WordPress uses the style.css file to retrieve information about your theme. The CSS file included in the zip file shows the first few lines as:
It is important that you fill in the missing information. Change the Default Theme to the name of your new theme. Give the website URL as the Theme URI. As you update your files, revise the version number. Give your name as the Author, and if you have your own website, give the URL as the Author URI, otherwise just list the website URL.
The style.css file comes with some basic CSS already present in the file. You can change this to suit your taste.
The footer.php file contains code that gives credit to WordPress. Although not required, it is recommended that you keep some form of recognition for the many hard volunteer hours involved in developing this platform visible somewhere on your site to honor the sacrifices made. Perhaps if you don't like this method, you could come up with your own.
Once you have accomplished this you are ready to upload these files to your site.
WordPress Directory Structure
The root of your WordPress site contains fundamental core scripts used in the operation of WordPress as well as three main folders: wp-admin, wp-content, and wp-includes. You should always try to limit your customizations to the wp-content folder because the other core files will get replaced (with a few notable exceptions) anytime you update WordPress.
The wp-content folder contains two main sub-folders: plugins and themes. If the zip files are not already in a folder, you should place them in a folder and name the folder the name of your theme (avoid spaces in any of the folder and file names), then upload them to the themes sub-folder.
There is a custom function in the functions.php file which you will need to update as well. On line 33 is the function get_cur_theme_uri(). You will need to update the first line where it says, $cur_theme_dir = "/default"; by changing "default" to the name of the folder for your theme.
Once they have been properly uploaded to the themes sub-folder, you will be able to see it by clicking on the Appearance main link in the WordPress administrative backend. The new theme won’t be active, so you will want to click the “Activate” link next to the theme. You can then access your site url and see how your website looks with your new theme.
If you activate this default theme, you won’t see much. This default theme is meant to simply give you a skeleton, a “drawing board” per say, for you to show your creativity in design.
From here, you will need to set up your pages and posts, and modify your theme files as needed and upload them to the server. You can repeat this process as often as you like, "tweeking" and refining your site until you have exactly the look and operation you desire.
The WordPress Loop
WordPress uses PHP to obtain page and post information from the database and iterate through them using what is called the WordPress Loop. The coding for this loop looks similar to the following and is found in all template files:
Whether it is a page or post, they all use the same loop. What this means for you is that you can see that in the default theme templates, the header is called first, then the page or post content, then the sidebar, then the footer. So anything you type in the HTML or Visual Page or Post editor will show up between the header and the footer.
With this knowledge, you now know that you can design anything in the Page and Post editors and have them display perfectly fine within your theme. However, if the HTML is very complicated, you might want to consider using a shortcode instead (see my article Creating A Really Dynamic WordPress Page.)
Having a theme you can customize gives you the opportunity to be creative and to learn a lot about WordPress. The files in this default theme can be used to form the basis of any type of website imaginable.
In future articles, I will go into the various aspects of web design and website creation using WordPress. default.zip
Attached to the bottom of this article is a zip file of the files necessary in order to create a default theme. The basic WordPress default theme that I have included with this article consists of the following files, all of which can be customized to your taste:
404.php – This file is used when someone tries to access a non-existent url on your site.
archive.php – This file is used if you take advantage of WordPress’ blog capabilities. This file is used to display a post archive. Even if you don’t plan on using WordPress as a blog, you should have this file, as well as every other file in this list, present in your theme folder as WordPress will try to access it if someone uses the right url. You can change the programming of this file to display anything you want should such an event happen.
archives.php – This file is related to archive.php and is used to search the blog archives. Once again, it, as well as every file in this theme, can be customized to your specific needs.
comments.php – This file is used to display the post comment box.
comments-popup.php – This file is used to display comments in a pop-up.
default.js – Although not actually a necessary part of a default theme, this file is very useful to store your javascript. You can change default.js to yoursite.js or any other name you desire, just be sure to change all the references to it as well.
footer.php – This file contains the HTML and coding for your footer. You can have several footers for several different purposes. Simply add a dash and a name to the file name, e.g. to create a special footer for the home page, you could set up a footer file named “footer-home.php”. In your template files (which we will talk about in a moment), you would simply add the name you gave this file to the WordPress get_footer() function like so, get_footer(‘home’).
functions.php – This file contains specialized PHP functions used in your theme.
header.php – This file contains the HTML and coding for your header. Just like the footer, you can add a suffix to the file name and call it through the WordPress get_header() function. Using the same type of designation for a custom home page, you would name the file header-home.php and call get_header(‘home’) in your template file.
image.php – This file contains coding to display blog post images.
index.php – This file is the default theme file used when WordPress is in blog mode.
links.php – This file is used to display the links found under the Links main link described in Part I on a page, rather than in a widget.
notitle_nosidebar.php – This file is not a required part of a WordPress default theme. This file is simply an example of a template modified to not display a sidebar, nor a title on the pages. This template can be selected in the dropdown Template selector in the Page editor within the WordPress administrative backend.
page.php – Now this file IS part of the default WordPress theme. In fact, this file IS the DEFAULT TEMPLATE. You will see it in the dropdown Template selector in the Page editor as “Default”. You can use this file as a pattern to create new templates, however, I would check out the already customized template files accompanying this file to see the differences necessary to create custom templates that show up in the Page editor Template dropdown list.
page_notitle.php – This file is another custom template not part of the actual file set of a default theme. It is here for example only.
rtl.css – This is a CSS file you can use if you will be writing in a language that reads from right to left.
screenshot.png – This is the image that appears next to the theme when you click on the Appearance main link in the administrative backend. You can change this image by taking a screenshot of your site when you complete your theme design and cropping it to 300 pixels wide x 225 pixels tall, then uploading it to your theme file on your server.
search.php – If you include a search feature on your site, you can customize this file to customize the display of your search results.
sidebar.php - This file contains the HTML and coding for your sidebar. Just like the footer and the header, you can add a suffix to the file name and call it through the WordPress get_sidebar() function. Using the same type of designation for a custom home page, you would name the file sidebar-home.php and call get_sidebar(‘home’) in your template file.
single.php – This file is used to display a single blog post on its own page.
style.css – This file contains all the CSS for your theme. You can add as many CSS files as you like, naming them any way you want, you would simply have to ensure they were all linked (and in the proper order) within your header.php file. But the style.css file is necessary because WordPress uses this file to identify your theme (see Setting Up Your Theme below.)
Along with these files there is an images subfolder which contains an example background shadow and the WordPress logo. Use this subfolder to store the images you use on your new site.
BACKGROUND ON FILES
As you probably have noticed by now, WordPress is a PHP based CMS, and as such is limited only by the limitations of PHP itself (which are few and far between), and so, IMHO is a fantastic platform to design practically any type of site you desire. Once you become familiar with theme and plugin development, really, the sky’s the limit.
Let’s start out by developing your custom theme.
Setting Up Your Theme
In order for WordPress to recognize your theme, each file should have a theme designator. All theme and template designators are set up within PHP comments. If you examine the first few lines of each of the default theme’s PHP files, you will see comments similar to this:
<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/You can change Default_Theme to the name of your new theme.
As mentioned earlier, WordPress uses the style.css file to retrieve information about your theme. The CSS file included in the zip file shows the first few lines as:
/*
Theme Name: Default Theme
Theme URI:
Version: 1.0
Author:
Author URI:
*/It is important that you fill in the missing information. Change the Default Theme to the name of your new theme. Give the website URL as the Theme URI. As you update your files, revise the version number. Give your name as the Author, and if you have your own website, give the URL as the Author URI, otherwise just list the website URL.
The style.css file comes with some basic CSS already present in the file. You can change this to suit your taste.
The footer.php file contains code that gives credit to WordPress. Although not required, it is recommended that you keep some form of recognition for the many hard volunteer hours involved in developing this platform visible somewhere on your site to honor the sacrifices made. Perhaps if you don't like this method, you could come up with your own.
Once you have accomplished this you are ready to upload these files to your site.
WordPress Directory Structure
The root of your WordPress site contains fundamental core scripts used in the operation of WordPress as well as three main folders: wp-admin, wp-content, and wp-includes. You should always try to limit your customizations to the wp-content folder because the other core files will get replaced (with a few notable exceptions) anytime you update WordPress.
The wp-content folder contains two main sub-folders: plugins and themes. If the zip files are not already in a folder, you should place them in a folder and name the folder the name of your theme (avoid spaces in any of the folder and file names), then upload them to the themes sub-folder.
There is a custom function in the functions.php file which you will need to update as well. On line 33 is the function get_cur_theme_uri(). You will need to update the first line where it says, $cur_theme_dir = "/default"; by changing "default" to the name of the folder for your theme.
Once they have been properly uploaded to the themes sub-folder, you will be able to see it by clicking on the Appearance main link in the WordPress administrative backend. The new theme won’t be active, so you will want to click the “Activate” link next to the theme. You can then access your site url and see how your website looks with your new theme.
If you activate this default theme, you won’t see much. This default theme is meant to simply give you a skeleton, a “drawing board” per say, for you to show your creativity in design.
From here, you will need to set up your pages and posts, and modify your theme files as needed and upload them to the server. You can repeat this process as often as you like, "tweeking" and refining your site until you have exactly the look and operation you desire.
The WordPress Loop
WordPress uses PHP to obtain page and post information from the database and iterate through them using what is called the WordPress Loop. The coding for this loop looks similar to the following and is found in all template files:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="entry">
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
</div>
<?php endwhile; endif; ?>Whether it is a page or post, they all use the same loop. What this means for you is that you can see that in the default theme templates, the header is called first, then the page or post content, then the sidebar, then the footer. So anything you type in the HTML or Visual Page or Post editor will show up between the header and the footer.
With this knowledge, you now know that you can design anything in the Page and Post editors and have them display perfectly fine within your theme. However, if the HTML is very complicated, you might want to consider using a shortcode instead (see my article Creating A Really Dynamic WordPress Page.)
Having a theme you can customize gives you the opportunity to be creative and to learn a lot about WordPress. The files in this default theme can be used to form the basis of any type of website imaginable.
In future articles, I will go into the various aspects of web design and website creation using WordPress. default.zip
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)