Tag: php

Creating WordPress Themes

Don’t get me wrong, creating WordPress themes is not for the faint of heart, nor for the casual blogger who doesn’t really have a good grasp on developing websites. However, if you know your way around PHP and basic HTML, you should have no issues creating your own theme, or adapting a website into a WordPress theme.

Generally, themes go into the same location, regardless of your blog structure; /wp-content/themes. It depends on what your theme name is, as to what folder you put it in. However, each theme has its own folder, to be kept separate.

When you first install WordPress, you’ll get the “default” theme, which is a great place to start. Usually I copy that folder down to my desktop, and make a clone of it, to work off of.

A theme needs to consist of a few basic files, to make it work:

  • index.php
  • style.css
  • comments.php

You can take it a step further, if you want to easily update/change aspects of the design, and add in a header.php and footer.php. For this example, we’ll use header and footer.

At the top of any existing theme’s CSS file (or when creating a new file), you need to always ensure that you’ve got some information to let WordPress know what the theme is. It’ll generally look like this:

/*
Theme Name: What do you want to call your theme in WordPress?
Theme URI: Where you downloaded the theme from
Description: any details?
Author: your name
Author URI: your URI
Version: You don’t need a version, but can put one in here if you want to.

General comments/License Statement if any.
.
*/

This will tell WordPress information about your theme, to display under the “Presentation” tab.

So, you now have your theme set up, but need the files. Why? Simple, to make the theme work. Here’s a quick run down of what each file does.

  • index.php – this is the homepage of your WordPress. You can get away with only having an index, if you don’t want to create different pages for each place in your installation.
  • style.css – the stylesheet for your design. You should be fairly comfortable with CSS by this point, if not, there’s a ton of resources available on the internet.
  • comments.php – this is the template for what your comments page/form will look like. If you don’t have one, no one will be able to comment on your WordPress
  • header.php – this file can be included at the top of all of your “pages” and “posts,” so that you can easily change something across all the pages, without editing each one. This is where you include the majority of your design.
  • footer.php – same as the header.php, but goes after your content, instead of before. This is where you conclude your design that comes after the “content” or “body” of your site.

Generally, there are a bunch of other files you can include, too; 404.php, single.php, page.php, author.php, archive.php, search.php, etc.

Each page serves a separate purpose. I won’t get into too much detail, as to not confuse you. Here’s a quick example of what an index.php might look like, if you made it yourself:

<?php get_header(); ?>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class=”post” id=”post-<?php the_ID(); ?>”>
<?php the_content(‘<br /><br /><div align=”right”>Continue Reading <?php the_title(); ?> »</div>’); ?></span><div align=”right”><br /><br />Posted by: <a href=”<?php the_author_url(); ?>”><?php the_author(); ?></a> on <?php the_time(‘F jS, Y’) ?> at <?php the_time() ?><br><span class=”postmetadata”>Posted in <?php the_category(‘, ‘) ?> | <?php edit_post_link(‘Edit’, ”, ‘ | ‘); ?> <?php comments_popup_link(‘Leave a Comment »’, ‘1 Comment »’, ‘% Comments »’); ?></span></td>

<?php else : ?>

<h2 class=”center”>Not Found</h2>
<p class=”center”>Sorry, but you are looking for something that isn’t here.</p>
<?php include (TEMPLATEPATH . “/searchform.php”); ?>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

So, what does all that do? Pretty simple, I’ll break it down bit by bit:

<?php get_header(); ?> – this bit simple calls my header.php file to be included.
<?php if (have_posts()) : ?> – this is very important, your theme won’t work without it. It simple tells WordPress if you have posts, to do the following.
<?php while (have_posts()) : the_post(); ?> – if you have posts, show them on this page.

This next bit’s a bit more complicated, because there’s a lot of parts to it:
<?php the_content(‘<br><br><div align=”right”>Continue Reading <?php the_title(); ?> »</div>’); ?> – php the_content is what shows your post. The “continue reading part” will get shown if your post contains a “More” link in it. I’ve set this particular one up to show “Continue Reading This Post”, where “This Post” would be replaced by whatever I’m calling the post in WordPress.

Posted by: <a href=”<?php the_author_url(); ?>”><?php the_author(); ?></a> on <?php the_time(‘F jS, Y’) ?> at <?php the_time() ?><br><span class=”postmetadata”>Posted in <?php the_category(‘, ‘) ?> | <?php edit_post_link(‘Edit’, ”, ‘ | ‘); ?> <?php comments_popup_link(‘Leave a Comment »’, ‘1 Comment »’, ‘% Comments »’); ?> – This will simply show: Posted by: Mike (as a link to my author page) on 10/19/2007 at 12:01PM. Posted in Design, WordPress Tutorials, WordPress. Leave a Comment (or if there’s comments, it’ll show the number of comments already left.)

This bit: <?php edit_post_link(‘Edit’, ”, ‘ | ‘); ?> can be a bit confusing. What this does is simply show you a link that says “Edit” when you’re viewing your post, and you’re an admin on the blog. Other people won’t see it though, don’t worry.

<?php else : ?> – Very important to have, this closes the previous bit where we tell WordPress what to do if we have posts.

<h2 class=”center”>Not Found</h2>
<p class=”center”>Sorry, but you are looking for something that isn’t here.</p>
<?php include (TEMPLATEPATH . “/searchform.php”); ?>

Above is a simple include to a search form. In case someone tries to access a URL that doesn’t exist.

<?php get_sidebar(); ?> – includes a sidebar, if you’ve got one.

<?php get_footer(); ?> – includes your footer.

It seems a lot more complicated than it is, and there’s an infinite amount of variables, and things you can do with your theme. I’ll cover some more variables next time, and what they do. Hope this helped get you started.

Getting started with WordPress

As the web becomes more and more saturated with people who want websites or blogs, it’s becoming easier as a web-dev guy to help people who aren’t HTML savvy get a website. While WordPress is designed as a blogging tool, it’s so much more than that.

As a designer, I can build the site on WordPress, implement a custom “theme” (design layout) for whomever I’m building it for, and spend an hour or so teaching them how to use it. Even if they’ve got no intention on using it as a blog, it’s still a great, and easy, way for people to update content on their site, without even having to know what an FTP client is.

To get started, simply head over to WordPress’ Site and grab the latest version of the software.

Once you’ve got the latest version, you’ll need to unzip it, and get it onto your webhost. Obviously, this part takes a bit of know-how. If you’ve already got an FTP client, great. If not, I recommend SmartFTP it’s a great, and free application. Assuming your webhost provides MySQL and can run PHP, you shouldn’t need much else. (If you’re not sure, check the knowledgebase of your host, or just ask them. This stuff’s pretty standard these days.) You should also know the FTP information for the host, also can be provided by them.

Once you open up your FTP client, all you need to do is simple. 1) Make the decision if you want your WordPress installation in a subdirectory or not. All that means is, do you want your WordPress to be located at www.mysite.com/blog, or simply at www.mysite.com? I usually opt for installing it at the highest level (known as the root level).

For the sake of example, we’ll say that we’re installing into a subdirectory called “blog”. What we’ll first need to do is create a folder in our FTP, called blog. Generally, webhosts don’t allow you to create something through FTP, so you’ll need to create the folder on your desktop, and drag it into the FTP window. Once uploaded, double click on it, to open it.

Now, head back over to your desktop, and open up the “wordpress” folder that you got when you unzipped the latest version of WordPress. You should see a whole bunch of files in there, that mostly start with wp-, as well as three folders (wp-admin, wp-content, wp-includes). Grab this whole bunch of files, and drag them over to FTP into your “blog” folder. If you grab them all at once, they’ll all get uploaded to the right file structure, and the install will work cleanly.

Once that’s done, head on over to your webhost to create a MySQL database. This is generally done through a control panel of some sort, which varies from host to host. If you’re unsure how to do it, ask your webhost or check their knowledgebase. They should also be able to provide your “mysql host”, which you’ll need when you install WordPress into the database. Most times this is just “localhost”, but sometimes it’s different.

Once the database is set up, and you have your database information, simply head on over to your website. www.mysite.com/blog/wp-admin

You’ll get a message telling you that you need to install the WordPress application into the database. The install’s very easy, however, you’ll need to be sure that you do one last thing first. Head back over to your FTP program, and locate “wp-config-sample.php”, right click on it, and select rename. Change the name to “wp-config.php”. Once that’s all set, right click again on the file, and look for an option for “permissions”, or “CHMOD” (varies depending on your FTP client). Once the menu opens, change the number from 644, to 777. This will allows the WordPress application access to edit this file, with the information you give the webpage, and save it for you. This is the easiest way to set up WordPress.

Once done, head back to the web install interface, and click the “First Step” link. The next page will ask you for a Weblog Title, and an e-mail address. It’s very important that you provide a real e-mail address, so that your username and password can be e-mailed to you once the WordPress install is done. Click “Continue to Second Step” once you fill in those two details. That’s it! WordPress will install some phony data to get you started, so you can see how things work.

Be sure to write down the username and password you get on the next page, in case the e-mail doesn’t make it through your spam filter. Otherwise you won’t be able to login to your admin panel. Also, be sure to bookmark the Admin page, which is usually located at www.mysite.com/blog/wp-admin (which will vary, depending on where you installed WordPress to)

That’s it, WordPress is now installed on your site. If you visit www.mysite.com/blog, you’ll see the phony data, with the default template. Easy enough, right?

The next step in running WordPress is learning your way around the Admin Panel. Check back in a few weeks, for a detailed post on how to use the Admin panel to write posts, pages, moderate comments, and more.