Category: Code

Posted on

Website Design Skeleton

You don’t want to re-invent the wheel every new website you begin coding on. Instead maximize your productivity with a template or skeleton if you will of a basic site design.

Your implementation may vary. I’ve tried to keep mine terse for the utmost configuration.

We’ll start with a basic header:

head.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Change Me Later</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="/style.css" rel="stylesheet" type="text/css">
</head>
<body>

I’ve choose HTML 4.01 strict for various reasons. You will need to remember to fill in your title.

As you may have noticed, I’ve included a style sheet in this header, so let’s go over that.

style.css

* {margin:0;padding:0;}

Not much to see here, we reset our margin and padding to 0 to eliminate cross browser quirks and general madness while designing. Some people prefer more in their default CSS.

Let’s continue on to the main page.

index.php

require('head.php');
<!-- Do stuff here -->
require('foot.php');

Not much to see nor explain. Now onwards to our footer.

foot.php

</body>
</html>

And there you have your skeleton. It’s up to you to add the muscle.

A few ideas:

  • Include your name, version and other information in comments in the header and stylesheet.
  • Include your statistics code in the footer.
  • Include any javascript you might use.
  • Instead write a php library to generate your header/footer bassed on doctype/chartype.
  • Set default text styles, colors etc to your liking in your CSS
Posted on

SEO Friendly Titles for WordPress

The standard theme for WordPress doesn’t include very pretty titles. One of the things you can do to optimize readability for users coming in from search engines or bookmarking your page is to clean up your titles. It’s actually pretty easy to do.

We’ll start with the default Krubrick title. This is located in your Header.

<title><?php bloginfo('name'); ?> <?php if (is_single()) { ?>&» Blog Archive <?php } ?><?php wp_title(); ?></title>

A little bland. First off our sitename comes first. Llynix.com doesn’t really convey anything, the juicy information is in the title. In addition with this scheme the home page, 404 page and search pages get a default ‘llynix.com’ as their title.

We need something better. Happily, it doesn’t take much.

  <title>
<?php 
  if (is_single()) { ?>» Blog Archive <?php } 
  if (is_home()) { ?>Home<?php } 
  if (is_404()) { ?>404 Not Found<?php }
  if (is_search()) { ?>Search Results for <?php the_search_query(); }
?>
<?php wp_title(); ?> | <?php bloginfo('name'); ?>
  </title>

Now depending on what we are viewing our page title changes. Also our page title comes first, with the site name after the pipe (|).