Saturday, April 19, 2014

Wordpress Notes 1 - Basic Structure

I've been tackling Wordpress for a couple of weeks now. More specifically, the themes. It's basically a php framework with a blog built into it. It seems to have become a CMS (Content Management System) which is cool.... But the themes... The themes have had me frustrated. It just hasn't quite made sense to me. And of course, I've had to learn a little php and html..... something I've never really done before. So I thought I'd write up a few notes.

I've decided to start from scratch and factor the code as I think it should be factored rather than how other themes have done it. Here's the problem as I see it. Within the "header.php" file, tags are opened and not closed - like html, body and sometimes even a div with an id of "page".

Those tags aren't closed until "footer.php"... Having tags open in one file and closed in another just feels wrong to me. So... Within index.php, I want to define that structure. This presents a problem. You see, index.php isn't the only file that's accessed and so it's important to identify any information that could conceivably change and have that be imported into the relevant places. I don't think the html, or body tags are likely to ever change BUT information within the head tag could.

So index.php looks like this thus far:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>  
   <?php include (TEMPLATEPATH . '/head.php'); ?>  
   <body>  
     <?php get_header(); ?>  
     <div class="new_section">  
     <!-- Put content in here -->  
     <!-- I'm purposely not doing this bit as I think I should be able to   
        use this same file as a template for page.php and single.php -->  
     <?php get_sidebar(); ?>  
     <?php get_footer(); ?>  
   </body>  
 </html>  

Wordpress has a bunch of convenience functions - things like "get_sidebar" which look for a sidebar.php file - and even fills in a default one if it can't find a file. Given that I'm separating things out a little more, I'm having to use the slightly less convenient include line above as there just isn't a convenience function that'll cover it.

The reason I'm separating out the head is because there's a chance (a slight chance I know) that at some stage, I'm going to want to change something in there. Perhaps it'll be a favicon (the icon that shows up on the browser's tab for that page)...

My head.php file looks like this currently:

 <head profile="http://gmpg.org/xfn/11">  
   <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />  
   <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>  
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />  
   <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />  
   <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.png" />  
   <?php wp_head(); ?>  
 </head>  

I've already put in favicon... There's always the chance that I might, at some stage, want to change favicon... in which case, having it defined here means I only have to change it the once AND it contains ONLY information on the head.

In my next lot of notes I'll have a look at the header (title, menu bar and search field).

1 comment:

  1. I'm kind of tempted to use php for the stylesheet... style.css has to still exist with information about the theme, but I can use the header to import a php file as the css file (http://css-tricks.com/css-variables-with-php/).

    The reason for this is that it'd be easier to change widths and the like across the entire style sheet. I'll also discuss this in my next post.

    ReplyDelete