WordPress is the most professional and the most customizable blogging platform. Installing self-hosted WordPress will definitely help your blog reach a higher level.Many bloggers have questions about WordPress, how to install WordPress on your own hosting server, how to setup WordPress etc. This is the complete step-by-step guide on how to setup domain name and hosting, setup MySQL and how to install self-hosted WordPress 2.8 on your own server.

How To Install WordPress 2.8 – Step-By-Step Guide

Let’s get started. Make sure you download Starkers and save it to your themes folder (/wp-content/themes/).

Note: This tutorial is strictly for beginners only

Review Mark-Up

Starkers has a really stripped down markup. You won’t find any divs if you’ll check out the source.

Add Divisions

I tried to make a layout off of the default Starker’s markup but it’s really quite challenging. So what we’re going to do is add some divisions on the existing markup so it would like this:

Header

Let’s add a container div that will hold our content. Open up header.php and add in the opening container div right after the body tag and before the header div. We also need to add a header div for our logo and tagline.

Footer

Now we need to close our container div. To do that we’re going to open footer.php and add our closing container div. We also need a div for our footer section.

Index

Now open up index.php and apply the following changes:

Please remember that you also need to make the following changes in some of the template files like search.php, page.php, archive.php, etc.

Posts

After you’re all done with the changes, it’s time to open up single.php. The changes are also similar to the previous step but this time we’re going to add a function to output our sidebar. Starkers is based from Kubrick that’s why you’re going to notice that single.php has no function for getting the sidebar.

Now all that’s left is to put in some CSS. You can download my stylesheet or you can just create your own.

Conclusion

This is only a simple 2-column blog layout. I know you can do better than this and I hope that you found some value in this tutorial. Thanks for reading.

What is Archetype?

Archetype is another one of those theme frameworks in WordPress. A theme framework can also be classified as a parent theme. A theme framework enables you to speed up theme development by providing you a solid code base to start. It also lets you work on your own customizations without touching the parent theme’s files.

Why Create Another Theme Framework?

I created Archetype to help speed up my theme development and to also learn more about theme development in general. I also want to offer something useful to the community.

Inspiration

Archetype is heavily inspired by Ian Stewart’s Thematic. I also checked out ThemeHybrid’s code but I always find myself coming back to Thematic.

Multiple Layouts

Archetype has 10 layouts that you can choose from including fixed and liquid content using two or three columns. The good news is most of the layouts work in Internet Explorer 6 and above.

Download and Screenshot

• Download Archetype WordPress Theme (Beta Release)
• Archetype Screenshot

Feedback

Please go ahead and try it out. I would love to build a community behind Archetype so I would greatly appreciate it if you can give your thoughts and feedback. Thank you.

This tutorial was inspired by Ian Stewart’s Thematic. When I started to research on theme frameworks, I looked at Thematic’s source and I was really overwhelmed at the code. I had no idea where to start and there were more files inside than the usual WordPress theme files that you would normally see. So I decided to just do it and start coding hoping that I would learn them as I go along.

I’ve tried to simplify filter hooks in this tutorial and we’re going to look at one of the functions which is apply_filters() and see how we can make our theme more flexible.

Select Your Theme

For simplicity’s sake we’re going to use and edit the “classic” (wp-content/themes/classic) WordPress theme that is included in every installation. Feel free to follow along if you’re going to use your own theme but be prepared to make some adjustments because markup may slightly vary.

Theme Functions File

As you develop WordPress themes especially with creating child themes you will find that you will have to interact with the theme functions file on a daily basis so try to get comfortable with it.

Open up functions.php inside the classic folder and place this code:

function postheader()
{
	global $id;

	// Create post edit link
    $edit .= ' <a href="' . get_bloginfo('wpurl') . '/wp-admin/post.php?action=edit&amp;post=' . $id;
    $edit .= '" title="Edit Post">';
    $edit .= 'Edit This</a>';

	//Build post title
	$title = '<h3 class="storytitle">';
	$title .= '<a href="';
	$title .= get_permalink();
	$title .= '" rel="bookmark">';
	$title .= get_the_title();
	$title .= "</a></h3>\n";

	//Build meta info
	$meta = '<div class="meta">Filed under: ';
	$meta .= get_the_category_list(', ') . " &#8212; ";
	$meta .= get_the_tag_list(__('Tags: '), ', ', ' &#8212; ');
	$meta .= get_the_author() . " @ ";
	$meta .= get_the_time();
	$meta .= $edit;
	$meta .= '</div>';

	//Build postheader
	$postheader = $title . $meta;

	echo apply_filters('postheader', $postheader);
}

We created a function to output HTML by using the apply_filters() function.

We are going to use this function to replace the hard-coded HTML in our template file with our postheader() function.

Flexible Template File

Let’s open up index.php and delete the following markup:

<h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="meta"><?php _e("Filed under:"); ?> <?php the_category(',') ?> &#8212; <?php the_tags(__('Tags: '), ', ', ' &#8212; '); ?> <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?></div>

Then place the following code:

<?php postheader(); ?>

Try to refresh your browser and you shouldn’t see any drastic changes inside your markup and in your design. It’s because all we did is just get the previous markup and put them all inside a function so we can spit the code to our template file.

Customize Using Filters

Here is where all your hardwork will pay off. When you start to build child themes from the “classic” theme for example, you now have the ability to customize the post title and the post meta of your child theme without editing a single template file.

Let’s say we want to add a div around our post title. To do that let’s go back to your functions.php and add the following: (let’s imagine that this is the functions.php of your child theme):

function child_postheader()
{?>
	<div class="post-title"><h2>This is my cuztomized post title!</h2></div>
	<div class="meta">This is my customized meta tag!</div>
<?php }

add_filter('postheader', 'child_postheader');

This time we’re using another filter function which is add_filter to override the design. Refresh your browser and you should see the customizations that you have made. Cool huh?

Why Should I Do This?

You should take this approach if you intend to build a theme framework. Take note that theme frameworks are not just blank or naked wordpress themes like Starkers. Think of them as a parent theme from which you can create child themes. Theme frameworks can speed up development and lets you customize almost any design without touching any of the template files.

I hope you experiment and work on your own themes with the application of actions and filter hooks. Your thoughts and feedback are always welcome. Thanks for stopping by.

Everytime I develop a theme, wp_head and wp_footer always remained a mystery for me. It was only until last month when I started developing a WordPress theme framework that I understood their importance and coolness.

Today I’m going to show you how to define your own hooks and trigger them using action hooks.

WordPress Hooks

According to WordPress:

Hooks are provided by WordPress to allow your plugin to ‘hook into’ the rest of WordPress; that is, to call functions in your plugin at specific times, and thereby set your plugin in motion.

Hooks are basically placeholders in your template files. They sit there until you instruct them to do some task for you either by using Action or Filter hooks.

We are going to focus on triggering hooks in a theme development setting using Action hooks so let’s get started.

Theme Functions File

The theme functions file is optionally included in your theme folder and is named functions.php (if missing, simply create one). You can define your own functions here to be used in your templates so you won’t have to manually edit your template files.

As an example I’m going to install the Google Syntax Highlighter plugin and show you how to use Action hooks in your template files. Before everything else make sure you have installed and activated the plugin.

Action Hooks

Open up your theme functions file and place this code (assuming your file is blank):

<?php
//Styles for Syntax Highlighter plugin in head section
function syntax_highlighter_styles()
{
	if (is_single() || is_page()) { /* If Post or Page */ ?>
<!-- Syntax Highlighter Styles -->
	<link rel="stylesheet" type="text/css" href="<?php echo WP_PLUGIN_URL; ?>/google-syntax-highlighter/Styles/SyntaxHighlighter.css" media="screen" />

	<?php }
}
add_action('wp_head', 'syntax_highlighter_styles', 1);
?>

We are just defining a PHP function and placing HTML inside to call our plugin’s stylesheet.

After the definition, the next step is to “hook” your function with WordPress. You do this by calling an action hook, add_action().

add_action('wp_head', 'syntax_highlighter_styles', 1);

The first parameter is the hook name in your template. The second parameter is the name of the function and the third is the priority.

Define Your Custom Hook

Now it’s time for our plugin scripts. We are going to call them from the footer but we are not going to use wp_footer. We are going to define our own hook!

Just below our first function, place this code:

//My own footer hook
function my_footer() {
    do_action('my_footer');
}

You have now created your own hook and you can add actions to it just like you did in the first function. But before you can do that open up footer.php and position your hook like so:

Note: For demonstration purposes I will remove wp_footer hook from my footer template.

<?php my_footer(); ?>

</body>
</html>

Now that we have a hook, let’s define a function to call our plugin scripts. Add this code in your theme functions file:

//Scripts for Syntax Highlighter plugin in footer section
function syntax_highlighter_scripts()
{
	if (is_single()) { ?>
<script language="javascript" src="<?php echo WP_PLUGIN_URL; ?>/google-syntax-highlighter/Scripts/shCore.js" type="text/javascript"></script>
<script language="javascript" src="<?php echo WP_PLUGIN_URL; ?>/google-syntax-highlighter/Scripts/shBrushAll.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = '<?php echo WP_PLUGIN_URL; ?>/google-syntax-highlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<?php }
}
add_action('my_footer', 'syntax_highlighter_scripts', 1);

Just like we did with our first function, this will put the scripts in the custom hook that we defined.

You can also try the same thing with your analytics code.

//Analytics code
function my_analytics()
{ ?>
Analytics code here
<?php
}
add_action('my_footer', 'my_analytics', 2);

Take note that the third parameter (priority) is 2. This will determine their order of appearance considering that the scripts function is also using the my_footer hook. You can try switching their priority to see what I mean.

Conclusion

Using hooks can greatly improve your theme development process and I urge you to use them so your themes are flexible and easy to maintain. With default hooks in your templates you can insert code without having to open up your template files. You can also define your own custom hooks if you need to.

Having this knowledge on action hooks can also help you in creating your very own theme framework.

You definitely need to check out the following:

• Action Hooks For Child Themes by Ian Stewart
• An Introduction to WordPress Action Hooks by Nathan Rice

If you have something to add regarding this article, your thoughts are always welcome and stay tuned because I will release yet another free WordPress theme framework for the community.

Picture yourself modifying an existing WordPress theme in minutes or better yet, build a fully functional WordPress theme in five hours or less.

In this article, we are going to see how child themes can help us in taking over the world and speeding our theme development in WordPress.

Wordrpress Child Theme

A WordPress child theme is just like any other WordPress theme. You can put them inside your blog’s theme directory (/wp-content/themes) and then activate them in the admin panel. They also have folders for your images, scripts, a screenshot and a CSS stylesheet.

The only difference is that child themes basically doesn’t require any theme files (header.php, index.php, footer.php, single.php, etc.). This is another reason why you don’t need to be a PHP master in order to develop themes in WordPress.

Now let’s create our child theme.

Choose Your Parent Theme

Before we create our child theme, we must first establish our parent theme. And for that, we’re going to use Kubrick as our parent theme. You don’t need to downlad it because it’s already the default theme in your WordPress installation and it’s located in /wp-content/themes/default/.

Establish Your Child Theme

Like I said, a child theme is just like any other WordPress theme so we’re going to create a new folder inside our themes directory and name it (for the lack of a better name) “koobreek”. After that, create a style.css file and save it under “koobreek”.

Child Theme Stylesheet Comments

This is the part where all the magic happens. Open up style.css inside “koobreek”. Then copy the following into style.css and save the file. Please pay special attention to line 8.

/*
Theme Name: Koobreek
Theme URI: http://wordpress.org/
Description: This is a child theme of Kubrick
Version: 1
Author: Raymond Selda
Author URI: http://www.raymondselda.com/
Template: default
*/

Now you have created a WordPress child theme using Kubrick as your parent theme. Take note of line 8 because it is the folder name of your parent theme. Now activate your child theme in your WordPress admin. If everything checks out, you should be presented with only the markup (XHTML) with no styling whatsoever.

Importing Styles From Parent Theme

Now unless it’s CSS Naked Day, you might want to dress up your markup with some CSS. I want this to be basic and simple as possible so for this tutorial we’re going to import the styles from our parent theme by adding a single line of code to our child theme’s style.css file.

/*
Theme Name: Koobreek
Theme URI: http://wordpress.org/
Description: This is a child theme of Kubrick
Version: 1
Author: Raymond Selda
Author URI: http://www.raymondselda.com/
Template: default
*/

/* Import Parent Theme Style */
@import url(../default/style.css);

It should look exactly the same as the parent theme but you’ll notice that the background image for the content is missing.

If you look in Firebug you will notice that a rule is being generated from the header.php inside the parent theme. Also the path for the missing background graphic is pointing at the child theme’s image folder which is not existing at this stage.

There’s a couple or more ways to remedy this but for simplicity’s sake we’re just going to copy the parent theme’s image folder into the child theme. Refresh your browser and it should look exactly like the parent theme.

Overriding Styles Of Parent Theme

Now let’s modify some of the styles of our child theme. Place this code into your child theme’s style.css file.

Change the font to Arial.

body {
	font-family:Arial, sans-serif;
}

Change headings into Arial with a normal font weight.

h1, h2, h3 {
	font-family:Arial, sans-serif;
	font-weight:normal;
}

Change the graphic header

I edited the blue header graphic and changed it to black. I then saved the new header inside the child theme’s images folder. We then place this code to override the parent theme’s styles.

#header {
	background: #000 url('images/kubrickheader.jpg') no-repeat bottom center;
}

Change header styles in articles

.post h2 {
	letter-spacing:-1px;
}

.post h3 {
	font-weight:bold;
}

Change style of sidebar and its headings

#sidebar h2 {
	font-family:Arial, sans-serif;
	text-transform:uppercase;
	font-weight:bold;
	color:#333;
	border-top:1px solid #333;
	padding-top:3px;
	font-size:12px;
}

#sidebar ul {
	font-family:Arial, sans-serif;
	font-size:11px;
}

After writing some of our own styles, we end up with something like this.

Overriding Parent Theme Templates

What if you need to make some changes to how the elements are structured inside the template files?

Very easy. Just copy the template file you need to edit from the parent theme folder into your child theme. This will override the parent theme’s templates. This has been made possible as of WordPress 2.7.

I don’t like where the metadata for the post is positioned. I want it beside the post date sitting below the post title.

To do that, we copy the index.php from the parent theme into the child theme folder. Open up the child theme’s index.php and replace line 17 with the code below.

<small><?php the_time('F jS, Y') ?> by <?php the_author() ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></small>

Then delete line 23 because the code that we need is already in line 17. Refresh your browser and you should see the post’s metadata below the title along with the date.

Conclusion

We have created and modified a new theme without touching a single line of code inside the parent theme’s files. All of the changes have been made inside the child theme’s folder. Feel free to download Koobreek .

Plenty of information about child themes can be found at ThemeShaper and ThemeHybrid. I hope child themes will help speed up your workflow and make theme development more enjoyable.

Do you use any theme frameworks when you develop your WordPress themes? What is your favorite? Post them in the comments below.

I’m going to share on how I used AutoViewer inside WordPress. I’m not sure if someone else is using the same method but I’m pretty sure there are others with different methods that worked for them one way or another. Hopefully this quick tip would be helpful.

First download and setup AutoViewer (I used NextGen Gallery software together with AutoViewer). At first glance I was intimidated by the documentation needed to run AutoViewer with NextGen but just stick with it and you will realize that its all too easy.

After creating your first gallery and uploading the images, write a post or in my case, a page inside of WordPress and enter the tag for the autoviewer [autoviewer=GALLERY-ID,WIDTH,HEIGHT,*LINK(optional)*]

Final step is to output the AutoViewer slideshow into the template. We can do this by using a very useful plugin called Improved Include Page. Just place the code into your template where you want the slideshow to appear, reload the page, smile and then pat yourself on the back for a job well done!

Do you have any other tips on using AutoViewer with WordPress? You can share them through the comments below. I would love to hear your workarounds on using this wonderful piece of software. Thank you.

He gave me example sites that has the look, feel and functionalities that he wanted to incorporate into his own blog. We had a good first meeting for the discussion and I understood what he wanted for his site. What made this project really interesting and exciting is that WordPress is going to be the perfect solution for this type of blog.

Here are some of the plugins that were instrumental for this project:

• Flashfader – flash animated header
• NextGen FlashViewer – flash photo viewer under the animated header
• Inline Comments – you can view and write comments without going to another page
• Multi-Level Navigation – drop down menus for the main navigation

I would like to thank the developers of the plugins that I’ve used for this project. Thank you for sharing your WordPress plugins to the community. I won’t hesitate to make a donation to your projects. Keep up the good free stuff! Thank you!

Hopefully this project would bring in more work for me. If you’re interested in hiring me for your project please contact me and we’ll try to work something out. I would love to hear some feedback from you guys so I can better develop high quality sites for my clients. Thank you.

I like to describe this theme as the bastard son of ReadWriteWeb and Chris Coyier’s site. If you have noticed the genes for the header, sidebar and footer part came from Chris’ site while the genes for the content part came from ReadWriteWeb. Did you see the resemblance?

Here are some of the things I want to highlight:

Moz-border-radius for the sidebars

I’m aware that only a few browsers support this CSS property but I just thought it would be cool to show that you can create rounded corners without using any background images. Below is the CSS rules for the sidebar widgets:

-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;

Custom Google Search

I used Google as my search tool because of only one reason: You can make money from it by participating in Google’s Adsense Program! hehehe.

Custom Fields for thumbnails in homepage

With custom fields you can really make your theme unique. Creating thumbnails in your homepage is one of the techniques you can apply when developing your theme. I’m still searching and learning on other ways in which you can apply custom fields to your theme so if you have any ideas on using custom fields please feel free to share it.

Developing this theme was a lot of fun and had a great experience from it. I learned a lot and it also enabled me to woodshed on my XHTML, CSS and Photoshop interface designing and now I’m ready to work on my secret project!

Thank you for reading and please I would really love to hear your good and not so good comments about my theme.

Thats when I decided to go back to PHP basics of sending email to check if the server is really capable of sending one. I opened up the PHP manual and used this basic code:

$to = 'nobody@example.com';
$subject = 'the subject';
$message = 'hello';
$headers = 'From: webmaster@example.com' . "rn" .
'Reply-To: webmaster@example.com' . "rn" .
'X-Mailer: PHP/' . phpversion();

mail($to, $subject, $message, $headers);

Fortunately it worked. If that little snippet worked then I could replace the existing code from the plugin and replace it with this basic one because all the plugin has to do is send out an email. (I have to include headers because in some cases in different servers the PHP mail function wouldn’t work without it) I then opened up email.php (inside /wp-content/plugins/email/), went to line 881 then edited it to:

if (mail($to, $subject, $message, $headers)) {

Then just above it I declared the mail function variables and assigned the variables used in the plugin like this:

$to = $friendemail;
$subject = $template_email_subject;
$message = $template_email_bodyalt;
$headers = 'From: webmaster@example.com' . "rn" .
'Reply-To: webmaster@example.com' . "rn" .
'X-Mailer: PHP/' . phpversion();

Also don’t forget to set the send email method to “PHP” in the email options. This kind of editing will ignore the PHPMailer class that the plugin is using and hopefully send that email to your friend.

As always I’m open to your suggestions and violent reactions and if you know any other alternatives in tweaking WP-EMail please don’t hesitate to share it. Thanks for reading and you can see a live example of what I’ve discussed here.

Many thanks to Lester Chan for developing this great plugin! I hope to hear your thoughts regarding this fix.