Some time ago I decided to give WordPress a try and convert some of my XHTML codes to WordPress. I looked for tutorials on this topic and find a lot of them and the WordPress website has lessons too. But can those tutorials and lessons be really helpful to you if you don’t know PHP and don’t understand the terminology used in them? I was a little bit confused by the huge amount of information at the beginning. So let’s keep it simple at least for now.
WordPress is a blog publishing application and content management system. It has a templating system, which includes widgets that can be rearranged without editing PHP or HTML code, as well as themes that can be installed and switched between.
Theme or WP theme are all the files you’re using: texts, images, codes, etc, etc. Every theme has at least two files: index.php and style.css. You tell your theme where everything goes within index.php same as you do in index.htm and you tell your theme how everything will look like within style.css. Apart from these two files the theme can contain: home.php, single.php, page.php, category.php, archive.php, search.php, 404.php, comments.php, comments-popup.php, author.php etc.
Probably you already know how to install WordPress by now. Make sure that your WordPress engine is running, then go ahead and drop your folder that contains all the HTML in it into the wp-content/themes folder. Wp-content contains all the content, uploads, themes, plugins, upgrade files, etc, etc.
OK, let’s go.
Step 1 – The basic template files
First of all change the style.css by pasting this into it:
/* Theme Name: WordPressify your XHTML in 5 simple steps Theme URI: Version: 1 Author: Blog Design Studio Author URI: http://blogdesignstudio.com/ */
After that change index.htm to index.php and that’s it, now you have the two basic template files.
Step 2 – The breakup
Now open the index.php file, than simply cut and paste the content this way: the header of the code in new file named header.php, the right column in a new file called sidebar.php, the footer in footer.php than just save the rest of it like it is.
Step 3 – header.php
After all that done, now let’s take care of the separate files one by one. Open header.php and replace the <head> with this code:
<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<script type="text/javascript" src="<?php echo bloginfo(stylesheet_directory) .'/js/domtab.js'; ?>"></script>
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
Done? Than go to the menu, get rid of the li’s, but keep the wrapping ul and the current page item. Type this in:
<?php wp_list_pages('title_li='); ?>
Than put these into the current page item:
Into <li class=”
page_item page_item_1 <?php if ( is_home() ) { ?>current_page_item<?php } ?>
than into <a href=”
<?php echo get_settings('home'); ?>
Save, refresh, and that’s it. Your menu is dynamic now.
Step 4 – index.php
Now let’s take care of the posts. Here you got “the Loop”. “The Loop” is a code that has information passed through it. Then it ‘loops’ or goes through the Database number of times to get the data required.
OK, now take the beginning of the loop:
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
And place it before your content i.e. the post, than close the loop with this:
<?php endwhile; endif; ?>
Now fill in the content tags, the tags that pull the information from the database within the loop.
<?php the_permalink() ?>"><?php the_title() ?>
gets the title of the post
<?php the_time('j M, Y'); ?>
gets the time (day, month, year)
<?php the_author_posts_link() ?>
gets the author
<?php the_category(', '); ?>
the category
<?php the_content('read more'); ?>
displays the contents of the current post.
<?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?>
displays a link to the comments
Here is an example with the content tags in bold:
<div id="leftcolumn">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post">
<div class="title">
<h2><a href=" <?php the_permalink() ?> "> <?php the_title() ?></a></h2>
<div class="postdata">
<?php the_time('j M, Y'); ?> written by <?php the_author_posts_link() ?> in <?php the_category(', '); ?>
</div>
</div>
<?php the_content('read more'); ?>
<div class="postcom"> <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></div>
</div>
<?php endwhile; ?>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>
<?php endif; ?>
</div>
Just don’t forget to put these include tags in the code:
At the beginning of the index.php:
<?php get_header(); ?>
This tag includes the file header.php from your current theme’s directory.
At the end of the index.php:
<?php get_sidebar(); ?>
includes the file sidebar.php from your current theme’s directory.
<?php get_footer(); ?>
includes the file footer.php
Step 5 – sidebar.php
The Sidebar may look difficult, but it isn’t at all. Simply put this into the ul:
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar') ) : else : ?>
<?php endif; ?>
Than create a new file called functions.php, and paste this into it:
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar',
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>
Now you can go to Appearance >Widgets in your wp-admin and add the some widgets like categories, archives etc.
Well, that’s it, now you have a fully functioning homepage. The only small thing left is to take care of the single.php, page.php, archive.php and 404.php. Now again create four new php files: single, archive, page and 404.
Copy the contents of index.php. Paste that in archive.php, than replace
the_content()
to
the_excerpt()
than paste it into single.php. Delete the comments_popup_link, navigation links and the read more link. Paste that in page.php. Copy everything from page.php now, and paste it into 404.php. Than post this in the post area:
<div class="post"> <div> <h2>Error 404 - Not Found</h2> </div> </div>
Thank you for sharing. Nice post.
I agree. Nice post. Do you happen to know the name of the php web development application used in the picture at the beginning of your article? I don’t know the name of the application, but would like to try it, since I have seen other professional programmers use the same application.
I prefer to use netbeans ide.