business & technology for wedding and lifestyle pros
All Posts in Tag: Blog Design

Basics of a WordPress Theme

Now that you have installed WordPress and know how to install WordPress plugins, it’s time to learn the basics of a WordPress theme! Themes hold the 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.

Basics of WordPress Theme

Photo: © Studio Firma / Stocksy

WordPress comes pre-installed with three themes, including the latest default theme, Twenty Fifteen.  Let’s take a look at the files in the Twenty Fifteen 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.  Includes code for your main blog pagination.

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 much 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 typically 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 type. The post type’s content is called in content-[POST-TYPE].php.

content.php – Displays the content of a WordPress post with the “standard” post format, including its title and body.  The author bio is called in author-bio.php.

author-bio.php – Displays information about the post’s author.  Pulls from the WordPress user information fields.

content-link.php – Displays the content of a WordPress post with a “link” post format, including its title and body.

content-none.php – This file is called when a user performs an action where no results are found, including searches with no results.

page.php – Displays the framework for 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, but typically does not include a call to the comments template.  The page content is called in content-page.php.

content-page.php – Displays the content of a WordPress page, including its title and body.

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

archive.php – Displays category, tag, taxonomy, and date archives.  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.

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 this file will be executed when you call the function from your other template files.

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

search.php – Displays the framework for search results and includes PHP calls for all of the other page elements that you want to display on the search results.  Typically looks quite a bit like archive.php.  The search results content is called in content-search.php.

content-search.php – Displays the content of a WordPress post when it appears in search results, including its title and body.

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

back-compat.php – Contains functions to help with the theme running on WordPress versions before 4.1.

customizer.php – Contains the functionality that allows for customizations to the Twenty Fifteen theme (under Appearance » Customize).

custom-header.php – Contains the functionality that allows for a custom header in the Twenty Fifteen theme (under Appearance » Header).

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 selector, and selectors 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.  We’ll use a common single.php format, with the content on the left and sidebar on the right.

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 CSS selectors inside either <div> or <span> tags.  Think of a <div> tag as a section of your page and a <span> tag as a portion of a section.  Div tags (“divs”) can either be IDs (noted with a #) or classes (noted with a .).  IDs are meant to be used once on a page, while classes are intended for items to used multiple times. Divs are opened with <div> and closed with </div>.  The header.php file probably had several divs to display your header image, menu bar, etc.  In single.php the main content area of your page is also enclosed in a div tag.  Let’s call it “primary”.  When you include a div or span tag in your php file, WordPress will look in your stylesheet for the div or span tag name and display the results using the CSS selectors assigned to that tag.  Because we are calling a single post, the class of this primary div will be “content-area”.  We’ll also tell the browser that this is the main content area.

<div id="primary" class="content-area">
     <main id="main" class="site-main" role="main">

The template is then going to ask the WordPress database for the data from the post itself. This portion is referred to as “starting the loop”.

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

Once it knows what the post is, the theme calls the appropriate content template file for the post’s format.

<?php get_template_part( 'content', get_post_format() ); ?>

If the post has no post format (let’s say it’s just a standard blog post), it will look to the file content.php. content.php lets the browser know that this is an article, with both header and content sections.  The WordPress function the_title(); calls the post title and the WordPress function the_content(); calls the post content.  To simplify:

     <header class="entry-header">
          <?php the_title(); ?>

     <div class="entry-content">
          <?php the_content(); ?>

That’s pretty much it for content.php. Once content.php has finished its display, we return to single.php.  single.php would next typically include a call to your comments.php file.

<?php comments_template(); ?>

Now we’ve “looped” through a complete post, so we’ll tell WordPress we are done.

<?php endwhile; ?>
</div><!-- closes .content-area #primary -->

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 get_sidebar(); ?>
<?php get_footer(); ?>

This is a lot to wrap your arms around, I know!  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?

Chime In

So You’re Ready To Blog…

You’ve read my previous post about deciding whether you’re ready to start a blog and the green light has appeared.  Now what?

Steps to Take Before Starting a Blog

Step One: Name Your Blog

(If you are a vendor with an existing company name (and you plan to add a blog with your existing company name on your site) move on along to Step 2.)

It sounds quite obvious but naming your blog is not as easy as it sounds.  After brainstorming blog names, you will first need to verify in the US Trademark Database (TESS) that your chosen name is not taken.  You will also want to verify with Whois that the .com of your chosen name is available for purchase.

Step Two: Branding

I cannot stress enough how important cohesive visual branding is to your new blog.  This includes color schemes, fonts, and most importantly your blog logo and header.  You want your blog to be a reflection of you, your company, and your content.

Think of brands you use on an everyday basis.  What makes you choose Tide vs. Cheer?  Coca-Cola vs. Pepsi?  A generic granola bar may taste almost exactly like Quaker, but how likely are you to choose generic?  What makes you lean towards brands that you trust?  It isn’t always taste, usefulness or tradition – in some cases it’s as simple as the overall appearance and packaging of the product on the shelf.

The web is the same.  You may have the best content in the world but if your blog/site is poorly designed and difficult to navigate, you’re not going to generate the readership you want.  So when you’re branding, as difficult as it may be, you’re in Field of Dreams land.  “If you build it (and have excellent content, and market yourself, and make sure you SEO your site properly, all of which we’ll discuss soon!), they will come”.

Step Three: Sketch Your Layout

In Photoshop, Powerpoint, or with stick figures (my preferred method), begin sketching out your blog’s look and feel.  Do you want a 2-column or 3-column layout?  How do you want your front page to appear?  Do you want to immediately display excerpts or full-text posts?  What information do you want to display in your sidebar?  What information do you want included in your posts’ headers?  Their footers?  What navigation elements are essential?

This is a daunting task but before any technology is implemented you need to have a vision!  Review as many blogs as possible for elements you want to incorporate into your preliminary design.  This is also the time to work with your graphic designer on any special illustrations for your site, or to gather the best photos of your work to display.

Now that you have a good idea of the look and feel of your new blog, it’s time to get technical!  Next up: a series of posts on Building Your WordPress Blog!

Chime In