WordPress Comes to Select Digitals

Post Updated December 5, 2008.

Select Digitals has entered the Web 2.0 Age with a new WordPress Blog.

I installed the latest version of WordPress guided by a comprehensive tutorial,

“How to Install and Style WordPress”.

I then modified the default Kubrick theme for my Blog.

Since I wanted the Blog to load quickly, I did not use any of the Kubrick images except for a newly designed kubrickbgwide.jpg: kubrickbgwide.jpg is used to create and expand the “page” as content is added.

The new Kubrickbgwide.jpg is just a 760pixel X 40pixel “slice” or rectangle filled with a light background color of #fffef2. This image replaced the original in the folder at

wordpresswp-contentthemesdefaultimages.

The image could have been created with even a basic paint program.

The rest of the theme modification required changes in style.css, header.php, footer.php, index.php, single.php, and sidbar.php. These files are in the

wordpresswp-contentthemesdefault directory.

Here are the changes I made:

STYLE.CSS CHANGES

I have only shown the CSS code I changed or added. Deleted code is shown with a strikethrough.

/* Begin Typography & Colors */

body {
background: #d5d6d7 url('images/kubrickbgcolor.jpg')
background: #e7e7e7;
}

#page {
background-color: white;
border: 1px solid #959596;
border:none;
}

#header {
background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;
background: #fffef2;
}

#footer {
background: #eee url('images/kubrickfooter.jpg') no-repeat top;
background: #fffef2;
}

h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg {
text-decoration: none;
color: white;
color:red; /* Make the blog title red */
}

/* provide class for description in order to style it separately */
.description {
text-decoration: none;
color: blue; /* Make the blog tagline blue */
text-align: center;
font-size: 1.5em; /*Make the tagline a little larger*
}

h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
color: #333;
color:maroon; /* make h2 and h3 headers maroon */
}

/* End Typography & Colors */

/* Begin Structure */

#header {
background-color: #73a0c5;
background-color: #fffef2;
height: 200px;
height: 100px;
}

/* End Structure */

/* Begin Headers */

h1 {
padding-top: 70px;
padding-top: 10px;
}

/* End Headers */

/* Begin Lists */

/*Style bullets for posts*/
.entry ul li{
list-style-type:disc;
margin-bottom: .5em;
list-style: inside;
}

/*I will use another bullet for the sidebar*/
.entry ul li:before, #sidebar ul ul li:before {
content: “0BB 020″;
}
}

/*This code added to change sidbar bullet*/
#sidebar ul ul li {
list-style-type: disc;
list-style-image: none;
color:maroon;
margin-bottom: 15px;
}

/*Provide a little more space between recent-post titles*/
#sidebar ul ul li.recentposts {
margin-bottom: .75em;
}

/* End Entry Lists */

/*get rid of smiley at bottom of page if using the WordPress.com Stats plugin*/
img#wpstats{
width:0px;
height:0px;
overflow:hidden
}

/* Added to format the RSS image in sidebar */
a.rsslink {
background:url(images/feedicon10.png) top left no-repeat;
padding-left: 14px;
}

HEADER.PHP CHANGES

Replace the following code…

<div id="page">
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
<hr />

…with this code…


<div id="page">
<?php
if ( is_home() ) {
?>
<div id="header">
<div>
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
<?php } ?>

What this code does is to display the header only on the home page.

FOOTER.PHP CHANGES

Replace the following code…

If you'd like to support WordPress, having the "powered by" link somewhere on your blog is the best way; it's our only promotion or advertising.
<p>
<?php bloginfo('name'); ?> is proudly powered by
<a href="http://wordpress.org/">WordPress</a>
<br /><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
</p>

…with this code…

<p>Good code is wonderful. <acronym title="World Wide Web Consortium">W3C</acronym> valid code is devine.<br />
© Copyright 2008 by Royce Tivel. All Rights Reserved.
<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
</p>

This code simply adds a copyright and a maxim, of sorts, at the bottom of each page.

SIDEBAR.PHP CHANGES

Replace the following code…

<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>
<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
<?php wp_list_bookmarks(); ?>
<li><h2>Meta</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
<?php wp_meta(); ?>
</ul>
</li>

…with this code…

<li><h2>Subscribe to Blog</h2>
<ul>
<li><a class="rsslink" href="<?php bloginfo('rss2_url'); ?>">Content (RSS)</a></li>
<li><a class="rsslink" href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a></li>
</ul>
</li>


<li><h2>Recently Written</h2>
<ul>
<?php query_posts('category_id=#&showposts=#');?>
<?php $posts = get_posts('category=#&numberposts=10 #&offset=0');
foreach ($posts as $post) : start_wp(); ?>
<li class="recentposts"><a href="<?php echo get_permalink() ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?></ul>
</li>


<?php wp_list_categories('show_count=1&title_li=<h2>Browse by Category</h2>'); ?>
<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
<?php wp_list_bookmarks(); ?>


<li><h2>Resources</h2>
<ul>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform." target="_blank">WordPress</a></li>
<li><a href="http://www.selectdigitals.com/" title="Select Digitals" target="_blank">Select Digitals Web Site</a></li>
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional" target="_blank">Validate <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
</ul>
</li>

This code alters the sidebar headings and lists. It also adds a list of recent content. New class names—rsslink and recentposts—have been added so that their sections can be styled.

INDEX.PHP CHANGES

I decided to use excerpts on my home page(“excerpt” found in the Post Advanced Options). This allows me to simply type in the post description I want to appear on the home page. The code to activate excerpts must be added in this file. First, though, I removed the time stamp from each post.

Remove the timestamp:

<div class=”post” id=”post-<?php the_ID(); ?>”>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
<small><?php /*?><?php the_time(‘F jS, Y’) ?><?php */?> <!- by <?php the_author() ?> -></small>

Activate excerpts:

<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
<?php the_excerpt(); ?>
</div>

Change the navigation scheme:

<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div>


<div class="navigation">
<?php
pager_fix(" "," "," ","« Previous page","Next Page »","strong");
?>
</div>


The last bit of code places a new navigation scheme at the bottom of the content page. This works with the PagerFix plugin by Jaimie Sirovich and described by Joost de Valk in his article, “WordPress SEO.”

SINGLE.PHP CHANGES

I removed the navigation from single pages and then added code to the top and bottom of the single.php file in order to show a link to the home page:

<div class="navigation">
<div class="alignleft"><?php previous_post_link('« %link') ?></div>
<div class="alignright"><?php next_post_link('%link »') ?></div>
</div>

*
*
*
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php /*?>This places link to home at the top of single pages<?php */?>
<a class="post_header" href="<?php echo get_option('home'); ?>/">« Home to WordPress at Select Digitals</a>
*
*
*
<?php /*?>This places link to home at the bottom of single pages<?php */?>
<br /><br /><a class="post_header" href="<?php echo get_option('home'); ?>/">« Home to WordPress at Select Digitals</a>
</div>
<?php get_footer(); ?>

ARCHIVE.PHP CHANGES

I added navigation links to the home page at both the top and bottom of the page displayed when a category selection is made from the sidebar. I also removed the time and date stamp for the list of category posts. Here is the code:

*
*
*
<?php if (have_posts()) : ?>
<?php /*?>This places link to home at the top of category archive pages<?php */?>
<a class="post_header" href="<?php echo get_option('home'); ?>/"><br />« Home to WordPress at Select Digitals</a>
*
*
*
<small><?php the_time('l, F jS, Y') ?></small>
*
*
*
<?php /*?>This places link to home at the bottom of category archive pages<?php */?>
<br /><br /><a class="post_header" href="<?php echo get_option('home'); ?>/">« Home to WordPress at Select Digitals</a>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

INSTALLATION NOTES

With respect to the installation, I uploaded the zip file and unziped the file from my web-host’s cpanel. This unzipped the files to a wordpress directory. Since I wanted to start WordPress from the root directory at blog.selectdigitals.com, I followed the instructions at wordpress.org. This included modifying the index.php file and copying it from the wordpress directory to the root directory. In addition, and as explained in the WordPress document, since I had set up permalinks, I had to create an .htaccess file for the root directory.

SEO CHANGES

After making the styling and theme changes, I spent some time on search engine optimization(SEO). I was guided in this work by great article by Joost de Valk.

PLUGINS

Presently, I am using the following plugins:

• akismet,
• all-in-one-seo-pack,
• permalinks-moved-permanently,
• sociable,
• wp-sticky,
• PagerFix,
• WP-Syntax,
• wp-super-cache, and
• WordPress.com stats.

After a few additional cleanup chores, such as removing the original post, the Blog looks and performs the way I expected-reliably and fast. I could now use the totally wonderful tinymce editor to write this, my first post.

Although this article has not yet benefited from WP-Syntax, a recently added plugin, you can expect my future articles, tips, and tutorials to display code snippets that are both more readable and useful.

Enjoy,

Royce Tivel