studionashvegas | design and social media

When you’re working on a development site it’s hard to set things up correctly because you know you’re going to change the site, and putting in elements that are more than likely “stationary”, such as links, will have to be changed, and that causes un-necessary headache when it comes time to move the site live.  But, in the light of wanting to make your lives easier as a developer, there is a WordPress tag that can make your life much easier: ‘bloginfo’.  the ‘bloginfo’ tag can be given various arguments to make it bend to your will.  But, one of the most useful I’ve found:

<?php bloginfo(‘siteurl’); ?>

Instead of putting links in with just a leading slash (/about/), adding <?php bloginfo(‘siteurl’); ?> will automatically append the full site url before the sub-pages. Since most developers have their dev sites as a subfolder of a current site, this allows you to skip adding the development folder before each and every URL.  It’s also good for adding links into hardcoded content, such as graphical navigation, or specially coded front-page templates.

Example code:

<a href=”<?php bloginfo(‘siteurl’); ?>”>home</a>

this link will lead you to the home page.

<a href=”<?php bloginfo(‘siteurl’); ?>/about/”>about</a>

this link (if you have custom permalinks) will take you to the about page, no matter what website or server it’s hosted on.

So am I.  I  make changes a lot live on the server (using the Web Dev Toolbar), and I have to hard-refresh every time I make a change.  Doesn’t sound like a big deal, but it cuts down on valuable time that could be done… well, not refreshing a page.  There is a way; versioning your CSS file.  The upside: it makes changes go live automatically without having to clear the cache.  The downside: it’s difficult to do, because the correct way to do it is by adding v=XXX manually every time you make changes.

Unless… you can find a way to do it automatically.  And Mark Jaquith has done just that.

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css?v=<?php echo filemtime(TEMPLATEPATH . '/style.css'); ?>" type="text/css" media="screen, projection" />

So what does the ‘filemtime’ function do?  From the PHP website:

This function returns the time when the data blocks of a file were being written to, that is, the time when the content of the file was changed.

So everytime you change the file, the new change time gets parsed in using PHP and you’re able to have a new version every time.

Thanks to Mark for this great (and really clever) tip!

In our quest to take a WordPress theme from start to finish (Photoshop to Functional Theme), we have reached what most people would call the end of their journey.  We’ve taken our Photoshop file, made the necessary slices and converted it to an .html file. If we wanted this page to remain a static web document, we’d stop here, head into the base camp, and drink our hot cocoa.  But we’re not done quite yet, because we need this page to be able to handle the dynamic content that WordPress delivers.  Before we make our ascent, however, we need to know what it is we’re dealing with.

Theme Structure

WordPress themes have three files (usually four) at minimum that are required in order to be considered a true WordPress theme: header.php, index.php, sidebar.php [optional] and footer.php.  There are many more files that you can include (404.php, single.php, page.php; the list goes on) but those core files are what defines WordPress themes and how they are segmented out.

The best way to take our .html file and segment it into the various files we need is to use comments:

<!—Header—>

…header stuff is here…

<!—End Header—>

<!—Main Content—>

…main content goes here (this will be your index.php if you’ve been designing with blog postings in mind)…

<!—End Main Content—>

<!—Sidebar—>

…your sidebar contains badges, widgets, recent posts, comments, etc…

<!—End Sidebar—>

<!—Footer—>

…the footer contains a boilerplate, navigation, and design/copyright information…

<!—End Footer—>

What we’ve basically done is taken our .html file from this:

to this:

Then, just cut and paste those sections into their respective files:

Finally, back on the .html page, replace the code that you just cut/pasted with these commands, respectively:

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

These are WordPress specific commands that pull in the contents of header.php, sidebar.php, and footer.php into one page that is generated when you look at the wordpress theme in a browser.  Save the remaining code as index.php, and you keep your .html file handy as a reference to check the design as you are going along.

We’re not nearly done, but we’ve laid the foundation for a killer WordPress theme by splitting up the files.  When WordPress accesses the databases via one of the .php pages (index.php by default) it pulls in the header, sidebar, and footer as one page.  This way, you can just include those <?php commands to call the header whenever you want, instead of having to repeat code in every page.

I want to go into each of these files in more depth to give tips, tricks, and techniques for making sure the WordPress theme is the best it can be, so the next post will be focusing on header.php and footer.php.  After that sidebar.php, then an in-depth look at the various other files (index, single, page, and archives) to make sure they work right with our created theme.  Finally, we’ll look into comment styling and see ways we can make our comments look awesome (and match our theme!)