Posts filed under Coding

Breaking Down a WordPress Theme

By far the most common question that I have received from ya’ll since starting Edit and Post is “How do I make my blog look the way I want?”.  Now that you have installed WordPress and know how to install WordPress plugins, it’s time to start learning about themes.

Themes hold files that tell the browser what to display and how it should look.  If you remember from this post, PHP gets turned into HTML and that tells the browser what to display.  In coding language PHP = “get”.  CSS tells the browser how the html you have coded should look.

WordPress comes installed with several themes, including the Default theme.  Let’s take a look at the files in the Default theme and see what they do.  Don’t worry if all of this is very confusing now!

PHP files control what is displayed

index.php – Displays your main blog page.  Includes PHP calls for all of the files that control how your main blog page is displayed.

header.php – The header file essentially sets up the page and includes PHP calls to “get” the CSS files for the theme, the blog information and title from your WordPress options, and your header image.  It also calls WordPress itself from your server and includes the opening html for the body of your page.  There can be lots more included in here (and we’ll get to that when we talk about more complex coding).

footer.php – “Closes” your page in the browser.  Calls the WordPress footer.  Also includes any credits, copyright info, etc that you want to display.

single.php – Displays a single post.  Includes PHP calls for all of the other page elements that you display on a single post.

comments.php – Displays the comments for a post.  This file is typically only called from single.php.

archive.php – Displays category, tag, and date archives, as well as any other kind of archive you might have on your site due to some advanced coding.  Includes PHP calls for all of the other page elements that you display on your archive page.

404.php – If someone is searching for something on your site and goes to a permalink that doesn’t exist, they will see this 404 page.  Includes PHP calls for all of the other page elements that you display on your 404 page.

archives.php – Displays a list of your archives by month and subject.  Includes PHP calls for all of the other page elements that you display on your archives page.

comments-popup.php – If you want comments to display in a popup window, this file will be used to control what is displayed in that window.

functions.php – A super-important file that you don’t want to edit until you know what you’re doing.  :)  functions.php basically performs like a plugin, and any php code in here will be executed when you call the function from your other template files.

image.php – Displays a single image and includes PHP calls for all of the other page elements that you display on a single image.

links.php – Displays your blogroll links.  Includes PHP calls for all of the other page elements that you display on your blogroll links page.

page.php – Displays a WordPress page and includes PHP calls for all of the other page elements that you want to display on that WordPress page.  This file usually looks a lot like single.php.

search.php – Displays search results and includes PHP calls for all of the other page elements that you want to display on the search results.

sidebar.php – Displays the sidebar widgets that you have defined; if no widgets are defined, displays a default sidebar.

CSS files control how things look

style.css – a theme’s stylesheet is where the CSS for a theme is held.  Themes can have one or many stylesheets.  CSS is pretty complicated, so for right now know that each little section of CSS is called a div, and div tags control how whatever is inside them is displayed.

rtl.css – If you are publishing in a language that reads right to left, this stylesheet will be used.

English, please?

Let’s look at an example and maybe this will start to make more sense.  Remember single.php?  It’s the file that displays your single post page.

single.php is going to start by doing a PHP call for header.php. Remember, the header.php has already called in all of your stylesheets and WordPress itself.

<?php get_header(); ?>

Each section of your page is styled using div tags.  The header.php file probably had several div tags to display your header image, menu bar, etc.  In single.php the main content of your page is also enclosed in a div tag.  Let’s call it “content”.  When you include a div tag in your php file, WordPress will look in your stylesheet for the div tag name and display the results using the CSS assigned to that tag.

<div id=”content”>

Then it is going to ask the WordPress database for the data from the post itself.  This is an if statement in PHP, because if no post exists you want to include a message saying that no post exists.

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

Once it knows what the post is, you’ll want to format it accordingly.  So perhaps you have a div tag for your post header that you surround the post title with.  Because that is the only thing you want to format as a “title”, you will then close the div tag.

<div class=”post_header”>

<?php the_title(); ?>

</div>

Now that you have displayed the title, you want the content.  You probably have some styling for this, let’s call it “entry”.

<div class=”entry”>

<?php the_content(); ?>

</div>

Then you want to include your comments.php file.

<?php comments_template(); ?>

Now let’s close the if statement from above and tell WordPress what to display if no post exists, and once that is done we are done with the “content” so we will close the div.

<?php endwhile; else: ?>

<p>Sorry, no posts matched your criteria.</p>

<?php endif; ?>

</div>

Lastly, we’ll call the sidebar and the footer.  Remember, the footer closes the page, so after the footer is called, single.php has done its job.

<?php include(TEMPLATEPATH . ‘/sidebar.php’); ?>

<?php get_footer(); ?>

This is a lot to wrap your arms around but I hope it’s starting to make some sense, because we’re going to be talking a lot more about themes as we start to edit each of the theme files, make new theme files, and add in awesome new functionality!

Any questions so far?

What Is WordPress Anyway?

Although there are several blogging platforms available to you, we’re mainly going to discuss the technology and coding behind one of them here on Edit and Post, and that is WordPress. WordPress is currently the most flexible and powerful option out there and it’s the platform I use for Edit and Post and Elizabeth Anne Designs.

WordPress is an open-source program.  Open-source means that the code for the software is freely provided and can be altered and built upon by anyone.  Why is this cool? Because that means there are thousands upon thousands of people working every day to enhance WordPress’s functionality by creating themes and plugins to be used with the basic code (we’ll chat more about themes and plugins soon!).

WordPress requires a MySQL database to run, along with a web server.  Your WordPress database is made up of several tables.  Each table holds a specific element of data, such as your posts, blogroll links, comments, and settings.  Your web server holds your image files, theme files, plugins, and WordPress admin files.  You can think about things this way: if you upload it, it goes on your web server.  If you write it or input it, it goes into your database.

How do the web server and database talk?

They use a language called PHP.  Every time WordPress needs to “get” something from the database, a PHP script is run.  There are several default PHP functions in WordPress, and you can also create your own.

PHP = “get”
Want to get the post title? <?php the_title(); ?>
Want to get the content? <?php the_content(); ?>
Want to get the author? <?php the_author(); ?>

Depending on the data you are gathering, the WordPress PHP function may default to “get and display” or simply “get”.  Both are useful!  We’ll talk about PHP a lot more in the future, but for now, just remember that PHP is how WordPress gets data from the database.

How does the PHP function turn into results?

After the web server has received data from the database, it turns it into HTML.  HTML is the language that your browser uses to display a website.  An example:

In WordPress, I have a PHP function that says: <?php the_title(); ?>

Once my web server has processed that script for the post you’re currently reading, the database will return : What Is WordPress Anyway?

The web server then displays to you: What Is WordPress Anyway?

You never see the PHP script and neither does Firefox, Safari, IE or whatever other browser you are using!

How do I style those results?

You make HTML look pretty using a language called CSS, which stands for cascading style sheets. 

CSS tells your browser how to format things (fonts, colors, margins, spacing, etc).  CSS is very flexible, and you can style different elements of your page with different CSS markup.

Where do I put my PHP and CSS code?

Your PHP and CSS code goes inside your WordPress theme.  Simply put, your theme is how you want your WordPress data displayed to the world.  Several themes are installed with WordPress, and customizing your own theme is something that we’ll talk about in detail.

In this series of posts, we’re going to cover server needs, hosting basics, and the installation and basic configuration of WordPress. And don’t forget, if there are specific things that you would like me to cover, comment or contact me to let me know!