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:
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:
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