The answer, for Linux-based servers, is crontab. The crontab utility on UNIX systems allows commands to be executed and predefined intervals. These commands are essentially the same commands as you would run from any local console. For example, you could create a new cron “job” to run a bash script, and set it to run once per day at 12:00 midnight.

In terms of PHP, we can then call our PHP scripts via command line using the `php` binary. There are two issues here: first, we need to know where PHP is, and second, we need to know where our scripts are. Say your scripts are in /home/username/example.com, and your PHP binary is in /usr/bin, Your command to run your script could be this:

/usr/bin/php /home/username/example.com/myscript.php

Now, we have to configure cron to execute this. If your host has cPanel, you may have a cron job interface which will take this command as an option and allow you to configure visually the times at which it will execute. If you don’t have some kind of web-based interface, you’ll need to go one step further and manually create crontab entries via a command line terminal.

Fire up a console window at your server (e.g. in PuTTY) and run “crontab -e”. If you are prompted for an email address, enter an address you can easily manage e.g. a gmail inbox or a catch-all. A command-line text editor such as nano or vi/emacs should appear, and you’re ready to start creating crontab entries.

Here’s a sample entry:

0 0 * * * /usr/bin/php /home/username/myscript.php

The first section is the key: this defines the timing. There are five fields, minute, hour, day of month, month and day of week. Each takes a numerical value (typically starting at 0, not 1) or an asterisk to represent “all values”. Ranges are also an option, e.g. 1-5. For example, here we want the 0th minute of the 0th hour of every day of month, every month, on every day of week - in otherwords, midnight every day. This page has a great tutorial on cron scheduling.

Once you’ve worked out the cron entry for your intended timing, just add the entry to your crontab file - edited by running `crontab -e` - and save and exit. Crontab will automatically manage the changes and start scheduling your tasks immediately. If your scripts have any output, you will also receive an email with the output. Practise this a little, and within no time you’ll be a PHP task scheduling master!

Bookmark It

Hide Sites

Make sure the folder with your PHP interpreter (where php.exe or the compiled php binary is stored) is in your system’s PATH. Here are some instructions for linux and windows. You can test that PHP is in your path by firing up a command prompt / console window and running “php -v”. You should see your PHP version.

Provided you have a reasonably recent version of PHP (any version of PHP 5 is sufficient), you’re now all set to use PHP interactive mode! Open up a command prompt / console window and run “php -a”. You will see a message saying “Interactive mode enabled.” Next, type out a PHP open tag -

There are a few quirks to remember when working with interactive mode.

First, avoid jumping in and out of code blocks. When you close a PHP block, type out some text and open another PHP block, PHP will output everything between the last close and open tag.

Your statements can span multiple lines - but remember to put in the closing semicolon. This might be obvious in an IDE, but it’s a common mistake in a simple terminal.

If something isn’t working quite right, debug your variables with echo calls - that’s what the interactive shell is for.

Watch your current directory. You may find the __FILE__ magic constant useful. If you want to get the current directory, it’s the ‘dirname’ element of pathinfo(__FILE__). Generally, this will be the path under which you called php -a, but it can be slightly erratic. If you want to include other PHP files from the interactive shell (which can definitely be done, and is encouraged to test and play around with libraries), you may be safest using absolute paths.

Also, remember that you do not need to type in your PHP code to test it using the PHP binary. While this is outside the area of the interactive shell, calling “php filename.php” will execute filename.php as a standard PHP script, which may prove useful for cron jobs / scheduled tasks or just plain testing.

Bookmark It

Hide Sites

First, let’s look at what we want to end up with. We’ll take this data:

PHP: 30 items
JavaScript: 24 items
Java: 17 items
Python: 26 items
Ruby: 17 items

And we want to end up with this tag cloud:

php javascript java python ruby

To do this, we need to first examine what a tag cloud is like at HTML level. Each of these tags needs to be wrapped in an element that can have a style attribute. We’ll use that to set a font size. We could use either percentages or pixels; both have advantages and disadvantages. In this tutorial, we’ll do something like this:

<a href="#" style="font-size: 40px">php</a>
<a href="#" style="font-size: 30px">javascript</a>

We’re using anchor tags so that we can later link them as needed.

So let’s start with our data. The above tag cloud was generated with this array:

<?php
$tags = array('php'=>30, 'javascript'=>24, 'java'=>17, 'python'=>26, 'ruby'=>17);

The next step in a tag cloud is calculating those font sizes. We need to define a minimum and maximum value for that font-size CSS parameter, so that we always know what sizes we’re dealing with. We then calculate the minimum and maximum values from the entire data set - array_values() will help us sort out the data - and the difference between these, the spread of the data.

<?php
$maxsize = 30;
$minsize = 20;
 
$maxval = max(array_values($tags));
$minval = min(array_values($tags));
 
$spread = $maxval - $minval;

Finally, we work out a “step”, or an increment value for each level of items. This step will be calculated based on the difference between minimum and maximum font size, divided by the spread. This gives us a relationship between number of items and pixels for font size.

<?php
$step = ($maxsize - $minsize) / $spread;

We can then work out the font size as the difference between the number of items for the current item and the lowest number of items (the minimum) in the set, multiplied by the step. This gives us the value of the font size of the current item in relation to 0. Finally, we add the minimum font size value for some width.

<?php
round($minsize + (($value - $minval) * $step));

Let’s take an example for a second. Take a new dataset, with javascript 5, php 6 and java 7. Our minimum font size is 20 and maximum size 30. Therefore $minval is 5, and $maxval is 7. Our $spread is 2, or 7-5. Our $step is ($maxsize - $minsize) / $spread, giving us 10 - 2 or 5. This means there is 4 pixels difference between each of our three values. PHP’s value would be calculated like this:

<?php
round($minsize + (($value - $minval) * $step));
round(20       + ((6      - 5)       * 5));

This gives us 25, or 25 pixels. It’s quite simple, really. Let’s put all this code together, including a simple loop to run over each of the tags and spit out the HTML within a function:

<?php
function tag_cloud($tags) {
    $maxsize = 40;
    $minsize = 20;
 
    $maxval = max(array_values($tags));
    $minval = min(array_values($tags));
 
    $spread = $maxval - $minval;
 
    $step = ($maxsize - $minsize) / ($spread);
 
    foreach ($tags as $key => $value) {
        $size = round($minsize + (($value - $minval) * $step));
        echo '<a href="#" style="font-size: '.$size.'px">'.$key.'</a> ';
    }
}
 
$tags = array('php'=>30, 'javascript'=>24, 'java'=>17, 'python'=>26, 'ruby'=>17);
 
tag_cloud($tags);

And we’re done! A simple yet powerful PHP script to generate a web 2.0 tag cloud for your website.

Bookmark It

Hide Sites

So far I’ve released two themes: Tech Blogger and Unstandard Remix). A third, my first completely original theme, is still in development but I released it early for the sake of my tutorial.

What do you need to do when you’re releasing your first theme be it modified or bespoke? Here’s a checklist:

• Include a readme.txt file. This file should contain installation instructions, release info and any notes you want the reader to be aware of before using your theme. It really sucks when novices are downloading themes only to be 100% confused by what they’ve downloaded. It only means that they may delete your theme and download another one that they can more easily digest. If your goal is maximum adoption, that’s not the route you want to go.
• Test it. Think of every scenario you can possibly remember from your own blog use. Try to be the use, do all the things that you think no one would ever do because (rest assured) that person is out there. Are all your links functioning? Are all your pages displaying correctly? If not, is your 404.php page popping up when it should? Make sure you’ve thought of EVERY possible scenario before you release your theme. I can’t tell you how annoying it is download a theme that you like only to spend the next few hours debugging it to make it truly functional.



• Organize it. You want your theme to be well organized so that it doesn’t take any longer than necessary to install and use it. Put your actual theme in a parent folder labeled ‘theme’ so the user can just drag and drop. Place any plug-ins or widgets your theme uses in a parent folder called ‘plugins’ so that the user can do the same. If you’re including .psd label those in a folder that tells the user what it is.
• Compress it. You’ll be hard-pressed to find a file host that makes it easy to share uncompressed folders. This is because a folder is a directory and if you upload it virtually any service online it will be treated like a directory (if accepted at all). Compress the file as either a .zip, .sit, .gzip or .tar.gz file. This will make the files faster to download and it will allow the user to download with one click instead of several
• Publish it. Where will your theme live online? Do you want it on your own web server or do you want it hosted on at repository like themes.wordpress.net? I prefer to use repositories or file hosting services like mediafire.com
• Announce it. Unless a lot of people read your bog or visit your website, there’s no way for people to know what you’ve done. If you’ve posted your theme to a repository like themes.wordpress.net then the job is already done. However, you should tell your friends and submit it to some other sites so that the world is aware.

Bookmark It

Hide Sites

So far we’ve made a ton of progress with our theme design. We designed it in Photoshop, we converted to XHTML and then we began the somewhat tedious task of adding PHP. Now that we’ve created index.php, header.php, footer.php and sidebar.php, we can move on to creating the rest of the theme.

In “The Anatomy of a Wordpress Theme” we noted that Wordpress needs certain files for your theme to function properly. Here’s that list again:

1. 404 Template = 404.php
2. Archive Template = archive.php
3. Archive Index Page = archives.php
4. Comments Template = comments.php
5. Footer Template = footer.php
6. Header Template = header.php
7. Links = links.php
8. Main Template = index.php
9. Page Template = page.php
10. Popup Comments Template = comments-popup.php
11. Post Template = single.php
12. Search Form = searchform.php
13. Search Template = search.php
14. Sidebar Template = sidebar.php
15. Stylesheet = style.css

As you may have noticed, the items listed in bold are the only items we’ve created in our lessons thus far and there is still a lot of work to be done! Anything struck through is optional therefore this lesson won’t cover it but I have linked to pages where you can read about them on your own. While I can’t go into complete detail I will highlight some major points about each and then I’ll give you links to four sites that break the process down in detail and more thoroughly:

single.php

Single.php is the file referenced when someone clicks on the permalink for one of your posts. Thus it is the template for displaying a single post on your blog. On most blogs single.php an index.php are very similar except that in addition to querying <? the content(); ?> we also have to query the comments page. We do this just before we close the loop with:

	<?php comments_template(); ?>

page.php

Page.php is the template for any page in your theme that doesn’t have it’s own .php template or that is not a blog entry. This is also the template for the static “Pages” that you create within the Wordpress Admin panel. It is usually also just like index.php except that it doesn’t include the loop or the_content().

links.php

Ignores Page content and instead displays your links using get_links_list.

404.php

Where you users land when they follow a bad link on your blog or click through to something that’s been removed. Codex offers some advice….

While you work hard to make sure that every link actually goes to a specific web page on your site, there is always a chance that a link clicked will slam dunk and become a famous 404 ERROR PAGE NOT FOUND. Some errors are avoidable, you should regularly check and double check all your links. Also, if you are deleting a popular but out-of-date post, consider deleting the body of the post, and replacing it with a link referring visitors to the new page.

This concludes “Designing and Coding a Wordpress theme from Scratch” . This guide was written as a starting point and a reference guide I can always be contacted at jongos [at] gmail if you are having trouble or need advice. Alternatively I’ve compiled a list of resources that I often reference when creating themes below.

In this tutorial I mentioned a theme that I was developing quite a bit. You can download it along with the PSD used to create it here. Keep in mind that the version you’re downloading is an early beta release. It’s bulky, clunky, not very pretty under the covers and has a mind of it’s own so I’m dubbing it the Rosie O Donnell release. Feel free to give me feedback on it, use it to double check your own code, or modify it to suit your needs.

DOWNLOAD THE AQUA MARINA WORDPRESS THEME

Recommended Further Reading

Stepping_Into_Templates
HTML to XHTML
So You Want To Create Wordpress Themes
From XHTML/CSS to Wordpress
Tamba2’s Guide
Slizing a Wordpress Theme

Bookmark It

Hide Sites

Because Wordpress is fundamentally a PHP system we can add a few snippets of code to make our header, footer and sidebar files dynamic.

Marking Up Header.php

Your blog header file usually contains the title of your site linked to the homepage. In an HTML page we would simply add text or place an image and link to the homepage using <a href=”"></a>. The key to making our Wordpress theme, however, is we need to make all our links relative so that the end user can install the theme and use it with their own unique site with as little fuss as possible. It should just work.

How is this done? We use PHP requests to request and print the blog title allowing it to be dynamically relative to the database.

The code for a text blog title:

	<div class="blogtitle"><a href="<?php bloginfo('url'); ?>/">
	<?php bloginfo('name'); ?></a></div>

The code for an image blog title:

	<div class="blogtitle"><a href="<?php bloginfo('url'); ?>/">
	<img src="your/image/path.jpg" title="<?php bloginfo('name'); ?>" />
	</a></div>

These are the only two codes we need to place in our header.php file. In my case I needed to request other PHP documents that are meant to be displayed before the document continues: the sidebar and the center rotating headline areas. I this did using this code:

	<?php require('yourphpfile.php'); ?>
	<?php get_sidebar(); ?>

Still confused? The image below contains a region map of my theme’s index.php as it displays in a browser. The red region represents “header.php”, the purple region represents “center.php”, the blue region represents “sidebar.php” and the green is the post area, the code for which is contained in index.php.

Because the format of my blog is unique to my design this may not apply to your own design, I just want to make sure everything is throughly explained so that when you download my theme in Part 10 you’ll understand how everything works.

Marking Up Footer.php

Footer.php is even easier because there’s no crucial PHP requests that need to go here to make it function. This means it can be entirely HTML or you can add a dynamic request for the blog title like you did above. You may want to try something like this:

	<div class="footer">©2008 <a href="<?php bloginfo('url'); ?>/">
	<?php bloginfo('name'); ?></a></div>

…which would simply display the copyright and year followed by the blog title.

Marking Up Sidebar.php

Sidebar.php is essentially the same in that it can contain nothing more than HTML or it can also contain PHP queries. Here are some popular PHP queries often used in sidebar.php:

	<strong>Display the Blogroll:</strong>
	<?php get_links_list(); ?>

	<strong>Display the pages of the site:</strong>
	<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>

	<strong>Display the site's categories:</strong>
	<?php wp_list_cats(); ?>

I recommend reading “Customizing Your Sidebar” if you’d like to explore your options a bit more. In Part 10 we’ll create the other pages of our theme and then we’ll learn all about“Packaging a Wordpress Theme for Distribution”

Bookmark It

Hide Sites

First, you need to how regular expressions work. Stick with PCRE - the preg_* functions - they’re faster, more reliable and expressions for them are more common. The different styles of regular expressions each define a mini language for matching patterns within a block of text. Screen scraping is probably the most popular example. Consider this:

<a href="http://example.com/1">1</a>
<a href="http://example.com/2">Not 1.</a>
<a href="http://example.com/?query#someid">Yet another link.</a>

What if you wanted to programmatically extract the link URLs and text from each of these? At this level of simplicty, some basic explode()s might be enough, and when you need to be more tolerant for the data, XML parsing is probably the way to go. But for now, just looking at that, regular expressions would be the easiest way. And we can build a pattern that defines what is to be matched so that the regular expression engine (in this case, PCRE) will find all matches and give them to us.

One of the best ways to understand regular expressions in practise, I find, is to consider mod_rewrite. You’ve seen those fantastic URLs on websites - e.g. http://example.com/users/myusername - these don’t actually exist as a file, but we can use Apache’s mod_rewrite engine to “rewrite” these URLs to other URLs. We might make that /users/(some username) go to /users.php?username=(the username). The best tutorial for this, by far, is the corz.org htaccess tips and tricks guide. Have a very thorough read through this and experiment with it extensively before you go on.

Next, get equipped to test out regular expressions. You’re probably using Firefox. If you aren’t, get it. Then get the Regular Expressions Tester Firefox extension. This will be invaluable for experimenting with regular expressions - the best way to learn.

Of course, you’ll need to be familiar with the PHP functions that will provide your regular expression workhorse. Bookmark the preg_match function’s manual entry and refer back to it as you need to. The manual page has some invaluable examples which you should read through extensively.

Finally, when in doubt, keep a cheatsheet at hand. ILoveJackDaniels.com has a fantastic regular expression cheatsheet that you should also bookmark.

With all these ready, you’ll be off to a great start. Remember, the best way to learn is to practise — read through real, working code, then write your own. Once you’ve finished all this, you’ll be a regular expression whiz in no time.

Bookmark It

Hide Sites

Putting the Press in WordPress with PHP

Wordpress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability as the makers proudly proclaim at wordpress.org. The keyword there being ‘publishing’ and the most important part of the Wordpress publishing engine is the element that allows content to be published online easily and automatically. This element is called the the loop.

While I can’t get into all the operational mechanics of how Wordpress works here, I can refer you to a page that does offer more in depth analysis (here). What is important to this tutorial is that the Wordpress theme we designed in Photoshop needs this PHP function (along with a few others) to correctly fetch content from the database. Let’s examine four critical functions:

<?php query_posts();?>
Requests the database of content, should be placed near the top of index.php
just after the request <?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
this is The Loop and it should be placed prior to
where you want your content to print

<?php the_content(”); ?>
Calls and prints the content of your blog according to the settings in the
admin section or php functions called before it.  This should be placed wherever
you want your blog posts to go within the <div> tags.

<?php endif; ?>
Closes the loop.

Using the code from Part 7 as an example:

<?php get_header(); ?>
<?php query_posts();?>

    </div>

	<div id="post">
	  <div class="entry">
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

		<div class="posts">
	<?php the_excerpt(''); ?>
     		</div>   

	<?php endif; ?>
	  </div>
     </div>

<?php get_footer(); ?>

You may notice that the <div> tags with id and class=”posts”elements. These are styling anything they contain. My id=”post” is printing my photoshoped content area. The area with id=”class” is formating how my content will be formated. Do I want to justify text? Do I want to use a text-transform on the first letter? Change the color of text? All those types of styles should be applied to this class to be passed on to the text inside the container.

These three lines alone are essentially all you need for index.php in your theme. However, you’ll notice that we’re missing a few important items. We need to call and style the posts name, permalink, and meta data individually. This means we need to add the following:

<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
Requests the post tile and links to it. Place this before the post content.

<?php the_time(’F j, Y’); ?> at <?php the_time(’g:i a’); ?>
<?php comments_popup_link(’| No Comments’, ‘| 1 Comment;’, ‘| % Comments;’); ?>
Requests various types of information related to the post.  Place this just after the previous line.

<?php the_category(’, ‘) ?> <?php the_tags(’| Tags: ‘, ‘, ‘, ”); ?>
<?php edit_post_link(’| Edit’, ”, ”); ?></p>
This calls the footer meta information for each individual post.
Place this after the content but before you close the loop.

After placing these codes my index.php looks something like this:

<?php get_header(); ?>
<?php query_posts("showposts=2");?>

	<div id="post">
	<div class="entry">
		<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

   	<span class="postname"><a href="<?php the_permalink() ?>"><?php
 the_title(); ?></a></span>

    	<p class="postinfo">

		<?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?> <?
php comments_popup_link('| No Comments', '| 1 Comment;', '| % Comments;'); ?></p>

	<div class="posts">
    		<?php the_content(''); ?>
         	<p class="postinfo">Posted in <?php the_category(', ') ?> <?php
 the_tags('| Tags: ', ', ', ''); ?> <?php edit_post_link('| Edit', '', ''); ?>
</p>

     	</div>   

		<?php endif; ?>
	</div>
	</div>

    		<?php get_footer(); ?>

In Part 9 we’ll be discussing how to correctly markup header.php, footer.php and footer.php and in Part 10 we’ll create the other pages Wordpress needs.

Bookmark It

Hide Sites

Part 1 - “Tools For The Task” and “Preparation”
Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
Part 3 - “Photoshop to XHTML in 24 Hours”
Part 4 - “Cleaning Up Your XHTML”
Part 5 - “Preloading Images with Javascript and CSS”
Part 6 - “Marking Up is Hard to Do” and “The Anatomy of a Wordpress Theme”

Beginning with PHP for WordPress

• First we’ll duplicate index.html and rename the copy index.php. We’re only keeping the original .html file for reference to make sure that the finished PHP operates and looks the same.
• Let’s open index.php in our text editor. Right now it’s just a .html renamed .php. Our job is to make make it true PHP.
• Go ahead and create some more blank documents in your theme folder. Let’s call them header.php, footer.php and sidebar.php (if you have a side bar in your theme). We’re going to divide the HTML into the major sections and make each section it’s own PHP file to be marked up separately.
• Cut everything that you consider the header of your document. Make sure all tags are closed. Below you’ll find an example of my code which is really irrelevant, your own code will look and function differently based on your unique design. Still, for the sake of a working example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Wonderful World of Web Design!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/preload.js"></script>
</head>

<body>
<div id="container">
	<div id="header">
    <div class="description">The Blog Title</span></div>
	</div>
    <div id="header-nav"><div class="content">
    <a href="">ADVERTISE</a>  |
    <a href="">CONTACT</a>  |
    <a href="">RSS</a></div></div>
    <div id="spacer1"></div>
    <div id="upper-menu"><div class="navigation">
    <a href="">HOME</a>
    <a href="">NEWS</a>
    <a href="">BLOG</a>
    <a href="">HIRE ME</a>
    <a href="">PORTFOLIO</a>
    <a href="">QUESTIONS</a>
    <a href="">LINKS</a>
    <a href="">POPULAR</a>
    </div>

    </div>
	<div id="right-top"></div>

 <!-- End header.php -->

• Paste your header information in to header.php. Do the same for sidebar and your footer, cutting the code from index.php and pasting it in the corresponding file.
• I use comment tags like <!– End header.php –> to write notes that help me remember what’s going on in my code.
• If you do this correctly you’ll be left with a pretty sparse index.php document. All that should be left is some That’s good because now we’re going to tell index.php where to find all the information we just moved. We do this with PHP functions like so:

<?php get_phpdocumentname(); ?>

This get_ function does exactly what it sounds like it goes and fetches a requested document and displays the contents of that document in the area requested. My index.php document looked like this:

<?php get_header(); ?>

    </div>

	<div id="post">
	  <div class="entry">

		<div class="posts">
     		</div>   

	  </div>
	</div>

<?php get_footer(); ?>

• Ofcourse, for now we’ll leave the body <div>’s empty. This is where our content will eventually go.

  You’ll notice that I have no sidebar, that’s because I call for it in the header.php document instead. Why? Because browsers read code from top to bottom and I want page to request the header and side bars to first before requesting the body.

  In the next lesson we’ll start to analyze the PHP functions needed to request and display the dynamic content of a Wordpress theme.

  Bookmark It
  

  
  
  Hide Sites
  ]]> http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-7-153/feed/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-6-151/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-6-151/#comments Tue, 29 Apr 2008 12:37:31 +0000 JonGos http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-6-151/ This is the sixth post in series about creating Wordpress themes with your Photoshop designs. You may want to review before we continue….

  Part 1 - “Tools For The Task” and “Preparation”
  Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
  Part 3 - “Photoshop to XHTML in 24 Hours”
  Part 4 - “Cleaning Up Your XHTML”
  Part 5 - “Preloading Images with Javascript and CSS”

  ---

  Marking Up Is Hard To Do

  Wikipedia defines the term markup as a set of annotations to text that describe how it is to be structured, laid out, or formatted. When we say we’re going to ‘mark something up’ it means we’re formatting the document so that it can be read correctly by machines. Hypertext Markup Language (HTML) is the most common form. That can be marked up to Extensible Hyper-text Markup Language (XHTML) and beyond that to PHP to become dynamic.

  Now that we’ve got our basic html layout design we can begin the hard work the transition from HTML to PHP.

  Anatomy of a WordPress Theme

  Before we get ahead of ourselves let’s analyze exactly what Wordpress is expecting from a theme. The Wordpress engine works primarily using separate PHP files for the different components of the core engine. The various parts of your theme will simply call for various parts of the core engine to display content. This makes it easy for you to style sections individually. It also can allow for some incredibly complex themes that are built on the Wordpress engine. Themes like the The Unstandard by Derek Punsalan and Redoable are great examples of how to rethink the Wordpress theme impressively.

  Fundamentally, the WordPress Theme system is a way to “skin” your weblog. Yet, it is more than just a “skin.” Skinning your site implies that only the design is changed. WordPress Themes can provide much more control over the look and presentation of the material on your website.

  A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. A theme modifies the way the site is displayed, without modifying the underlying software. Themes may include customized template files, image files (*.jpg, *.gif), style sheets (*.css), custom Pages, as well as any necessary code files (*.php).

  Here are the things Wordpress looks for a theme file:

  1. 404 Template = 404.php
  2. Archive Template = archive.php
  3. Archive Index Page = archives.php
  4. Comments Template = comments.php
  5. Footer Template = footer.php
  6. Header Template = header.php
  7. Links = links.php
  8. Main Template = index.php
  9. Page Template = page.php
  10. Popup Comments Template = comments-popup.php
  11. Post Template = single.php
  12. Search Form = searchform.php
  13. Search Template = search.php
  14. Sidebar Template = sidebar.php
  15. Stylesheet = style.css

  For the most part, if you’re missing any of these parts your theme either won’t work or won’t fully function the way Wordpress wants it to. So far the only thing we’ve completed is stylesheet.css so where do the rest come from? In Part 7 we’ll create index.php and start marking up our XHTML to PHP.

  Bookmark It
  

  
  
  Hide Sites
  ]]> http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-6-151/feed/