The genealogy site is http://www.tivel.org and the blog is at http://www.blog.tivel.org. I connect each site to the other through a menu item. For the genealogy site, I use The Next Generation of Genealogy Sitebuilding© (“TNG”); for the blog, I use—what else—WordPress.

If you are at all interested in creating your own genealogy, I invite you to visit the blog for articles, tips, and tutorials about how to do this. I have also published a detailed article about the WordPress installation at blog.tivel.org with an extensive resource section containing usefull links, including links to all of the plugins I use. You can visit tivel.org for a look at TNG.

One of the best features of the latest WordPress version is the menu bar. The menu bar has been styled so as not to be distracting but to be there at all times for easy user navigation.

The menu bar is optioned from Dashboard/Appearance/Menus (Figure 1).

Figure 2 shows the menu-options page (options #1-5). I first created a menu called “Articles” (option #1, a category name). I then selected this menu as the “Primary Navigation” menu (option #1a). If there are multiple menus defined, a primary menu can be selected by viewing all menus in the Primary Navigation drop-down box and selecting the desired menu.

For a custom menu item linking to my web site, selectdigitals.com, I filled in the URL in #2 and clicked the “Add to Menu” button. This added a custom  menu choice to the menu list (#5). Menu choices can be added to the list by selecting items from the “Pages” and “Categories” list (#3, #4) and clicking the “Add to Menu” button. “Navigation Labels,” the labels that will appear in the menu bar, can be modified by clicking the down arrow at the end of each menu item (Figure 3). I gave the custom menu choice for my web site a “Navigation Label” of “Select Digitals.”

After the menu items have been selected, it is easy to organize them by dragging each menu item to the position you want them to appear at in the menu bar: the top-most menu item of #5 will be the left-most navigational link of the menu bar. Figure 4 shows the final SelectDigitals menu bar with  “Articles” selected.

By dragging a menu item to the right, it will “stick” indented under the menu item above and will become a child menu item; so, it’s very easy to create drop-down menus. Of course, all menus might need to be styled in CSS to display as you wish. WordPress 3.X even makes the styling easier.

Clicking the “Screen Options” tab above the “Menus” area reveals advanced properties that you can elect to show in the customization fields for each menu item in #5, including fields related to links and styling.

When a visitor lands on a category page, by clicking on “Articles” in the menu bar, for example,  the page is identified with a nice big category name centered at the top of the category list.  Unless you look carefully at the source code for your WordPress site, you might miss something important abut these page and entry titles. The big site title in the header is bracketed with H1 tags only on the home page. The page and entry titles, such as “Articles” and “About” inherit the H1 tags on the pages on which they display, thus receiving the SEO focus, as they should, while the H1 tags are removed from the site-title in the header. You can verify this yourself by inspecting the source code for the pages on this blog.

I try to make the usefulness of my articles, tips, and tutorials as long lived as possible. I list recent content I feel of most value to visitors in the sidebar and avoid associating the term “archive” with this content. When content gets dated or is of relatively little usefulness, I give it the category of “archive” and do not show it in the sidebar. Content with an archive category can still be accessed with the “site-index”  or “site-search” widgets.

Duplicating my existing theme, which was based on the old default “Kubrick” theme, took a bit of work. The customized theme is based on the WordPress 3.0 default theme, “Twenty Ten” (2010). I called the customized theme, “SelectDigitals.”

I “built” the customized theme as a “child theme” to Twenty Ten. I followed the guidlines from the WordPress codex (see references at the end of this article). I created a SelectDigitals folder in the theme directory (wordpresswp-contentthemesselectdigitals) and copied the following files from the Twenty Ten directory:

• header.php
• footer.php
• single.php
• sidebar.php
• loop.php
• style.css

Note: line numbers might differ from these but should be close.

At line 63, remove the link from the blog name:

<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>

Since I will not be using an image on the page, I deleted line 77:

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

After the branding division (line 79), I added a thick, red horizontal line (line 69): the line is styled in the style.css file.

</div><!-- #branding -->
<hr class="header">

Figure 1 shows the final customized Twenty Ten (2010) header.

I essentially rewrote footer.php. Here is the code I used:

</div><!-- #main -->
<div id="footer">
<br />
<hr />
<img src="../../../../images/blog-sig.jpg" style="display: block; margin-left: auto; margin-right: auto; padding-top:2em; padding-bottom:2em;" alt="Contact Royce" />
<hr />
<p>Good code is wonderful. <abbr title="World Wide Web Consortium">W3C</abbr> valid code is divine.</p>
<a href="http://validator.w3.org/check/referer" title="This page validates as HTML5" target="_blank">Validate <abbr title="HyperText Markup Language">HTML</abbr></a>
<br />
<br />
<div id="site-info">
<a href="http://www.blog.selectdigitals.com"><?php bloginfo( 'name' ); ?></a>
</div>
<div id="site-generator">
&copy; Copyright 2008-2010 by Royce Tivel. All Rights Reserved.
</div>
</div>
<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
<br />
<br />
</div><!-- #footer -->
<!-- #wrapper -->
<?php wp_footer(); ?>


I changed each occurrence of → (→) with » (») and each occurrence of ← (←) with « («).

I removed lines 51-54:

<div class="entry-utility">
<?php twentyten_posted_in(); ?>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span>', '</span>' ); ?>
</div><!-- .entry-utility -->

This gets rid of the nag, “This entry was posted in Announcements. Bookmark the permalink.”

The sidebar is essentially an unnumbered list. Here is the coding for one of the list items, “Tips”:

<li ><h2><br />Tips<br /><br /></h2>
<ul>
<?php
global $post;
$myposts = get_posts('numberposts=9&offset=0&category=6');
foreach($myposts as $post) :
setup_postdata($post);
?>
<li><a href="<?php echo get_permalink() ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</li>

In order to use this structure, you must know the ID for the categories you want to use. See the reference section for a tutorial on how to determine this.  The code parameters include the category ID, the maximum number of posts to display, and a post offset.

I have used the Search and Categories widgets in the sidebar. I use the Categories widget as a site index (Figure 3). Content I think most useful appears in the sidebar. Other content is given the archive category and can be found by selecting the “Archives” item from the “Site Index” drop-down widget.

The “Resources” section at the bottom of the sidebar is just a manually created list.

Perhaps the most important change in the loop.php file is at line 138: this is where the code is changed to force the use of excerpts in posts.

<div class="entry-content">
<?php the_content( __( 'Continue reading <span>&rarr;</span>', 'twentyten' ) ); ?>
<?php the_excerpt( __( 'Continue reading <span>&raquo;</span>', 'twentyten' ) ); ?> <!--This forces the use of excerpts.-->

I deleted lines 143-161 from <div class=”entry-utility”> to <!– .entry-utility –>.

Finally, I change the navigation symbols: &larrquo; and &rarrquo;.

Although it is not recommended, I made a couple of changes in the functions.php file in the twentyten directory. The first change was at line 240. I added a carriage return before “Continue reading” so that this would tuck neatly below each excerpt:

/*Change function to add a carriage return before Continue reading.*/
function twentyten_continue_reading_link() {
return ' <a href="'. get_permalink() . '">' . __( '<br />Continue reading <span>&rarr;</span>', 'twentyten' ) . '</a>';
}


Since I am the only author on this blog,  I do not need to see author credit on the posts. Also, since I edit my posts from time to time, I changed  the wording below each post title to “First Posted on + Date” (First Posted on July 22, 2010).

Original Code:

function twentyten_posted_on() {
printf( __( '<span>Posted on</span> %2$s <span>by</span> %3$s', 'twentyten' ),
'meta-prep meta-prep-author',
sprintf( '<a href="%1$s" title="%2$s" rel="bookmark"><span>%3$s</span></a>',

Changed Code:

function twentyten_posted_on() {
printf( __( '<span>First Posted on</span> %2$s ', 'twentyten' ),
'meta-prep meta-prep-author',
sprintf( '<span>%3$s</span>', /*Remove the date link*/

For now, I will have to remember to make these changes after each version upgrade.

Finding where in the code to make styling changes is, for me, sometimes a trial and error procedure. Figure 4 shows some of the elements I have styled.

1. /*Make the body background #f1f1f1*/
   body {
   background: #f1f1f1;
   }
2. /*Make the page background color #fffef2 (header, footer, wrapper)*/
   #header {
   background: #fffef2;
   }
   #footer {
   background: #fffef2;
   text-align: center;
   }
   #wrapper {
   background: #fffef2;
   }
3. /*Make the site title big and red*/
   #site-title {
   width: 940px;
   font-size: 36px;
   letter-spacing: 5px;
   color:red;
   font-weight: bold;
   text-decoration: none;
   }
4. /*Style the site description*/
   #site-description {
   text-decoration: none;
   color: blue; /*Make the blog tagline blue*/
   width: 940px;
   text-align: center;
   font-size: 20px;
   margin-top: 10px;
   }
5. /*Style the header horizontal line*/
   hr.header {
   width: 900px;
   height: 10px;
   background-color: red;
   display:block;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0px;
   }
6. /*Style the entry title for the home page*/
   .entry-title, #content .entry-title {
   color: maroon;
   }
   .entry-title, .entry-title a:link, .entry-title a:visited, #site-info a {
   color:maroon;
   }
   .entry-title a:active, .entry-title a:hover, #site-info a:active, #site-info a:hover {
   color: #114477;
   text-decoration: underline;
   }
7. /*Style the sidebar widget area*/
   .widget-title {
   color: maroon;
   font-size: 16px;
   margin-top: 0px;
   font-family:Georgia,”Bitstream Charter”,serif;
   }
   .widget_search label {
   color: maroon;
   }
   .widget-area a:active, .widget-area a:hover {
   text-decoration: underline;
   color: #114477;
   }
   .widget-area ul ul {
   list-style: disc;
   color: maroon;
   margin-left: 1.3em;
   }

Finding the right CSS class or ID attribute to change for styling a particular page element can sometimes take a bit of searching. Browser enhancements, such as Firefox’s Firebug and Opera’s  Dragonfly, make this much easier. Firefox also has a fantastic toolbar, Web Developer, that is of great assistance in theme development. See the references section for links to more information.

I use my own CSS for image display. Therefore, I have deleted the image section from the twentyten style.css file (lines 759-845). Here is the code I used for the Figure 1  centered image and caption:

<div class="centercaption"><strong>Figure 1:</strong> Final Customized Twenty Ten (2010) Header</div>
<img class="displayed" src="http://blog.selectdigitals.com/images/wp3x/1.gif" alt="Final Customized Twenty Ten (2010) Header" />

The CSS code for this is

/* This code centers a caption in the page */
.centercaption {
padding-top:1em;
color: #000000;
text-align:center;
font-size:1em;
margin-bottom:.5em
}

/* This code centers an image in the page */
img.displayed {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
margin-bottom:2em;
}

For more information about image styling, see the article, “Presenting Quality Posts With Style” in the references section.

• WordPress Child Themes – The best way to customize a theme.
• The WordPress Loop – Learn how WordPress pages are assembled and displayed.
• “How to Find a WordPress Category ID”
• “Create Quality Articles With CSS” — A good tutorial on using HTML and CSS.
• “Presenting Quality Posts With Style” — Lots of information about styling images, captions, and section headers.
• w3schools — The best single source for information about CSS and (X)HTML.
• Firefox Web Developer add-on
• Firefox Firebug add-on
• Check Select Digitals and Elizabeth Adams Direct for more information on styling and theming.

The automatic upgrade went perfectly–there were no problems. It did take a bit of time to achieve the same look and feel with the new theme as I had with the old customized Kubrick theme. Since I am not a WordPress guru, it took some searching to identify the code to change for the Child Theme. I am pretty satisfied with the results.

I am using the following plugins on the site:

• Akismet
• All in One SEO Pack
• Bad Behavior
• Google XML Sitemaps
• WP-Syntax

The SelectDigitals theme is not for everyone. It is a very simple looking theme without any glitz.

I hope you find the site usable and find some content that will help you with your blog.

I  created a “Child Theme” for SelectDigitals which enabled me to make the theme modifications–while leaving the original Twenty Ten theme untouched. Another great feature of using a Child Theme is that it will not be overwritten by future upgrades and can be reselected after an upgrade.

I very much like the new layout with the large text area and larger font size: this makes blog reading easier.

Check back soon for an article about the theme changes I made.

Of course, I backed up the old wordpress files and database before doing the upgrade. This proved to be unnecessary, but I always have and will continue to do this — just in case.

What do I think of the easy upgrade feature for WordPress? I just love it!

I must confess that I was somewhat skeptical of advertised claims for the theme. But after working with the theme, I believe it to be a real winner.

After the theme is installed, easy to use options are available under the dashboard’s “Appearance” menu. These include both blog layout and design options which make the blog’s look and feel easy to customize.

Out of the box, the theme is elegantly simple in appearance: the blog is quick to load and the content easy to read.

I modified the appearance with a new header image (Figure 1) and new footer text (Figure 2). The header image was created in Photoshop with a transparent background so that it would blend in perfectly with the blog background.

Figure 2: New Thesis Footer

For me, there was a bit of a learning curve involved with these modifications. An online article by Rae Hoffman (otherwise known as Sugarrae), “Thesis Tutorial – Hooks for Dummies,” enabled me to modify the “custom_functions.php” file for the changes I needed. For the few styling changes I wanted to make, I only had to add the necessary CSS code to the “custom.css” file. The core Thesis files do not have to be modified to make theme changes: all changes not made from the WordPress dashboard with the theme and design options can be made with the custom_functions.php and custom.css files.

One of the features of the Thesis theme that is of particular interest to my client is the image rotator (Figure 3). The image rotator is perfect for holding images or image ads. New images are simple to add as they are automatically included in the rotator when they are uploaded to a rotator folder. Alt tags are easy to add from the Thesis Options menu.

I added three widgets to the blog: categories, pages, and search. The categories widget is a nice drop-down box containing the categories to browse. I will use pages and sub-pages with the page widget to achieve an index of pages (Figure 4).

In my own WordPress blogs, I use excerpts for the posts on pages other than the full, single post display. The Theses Options make this easy. Using WordPress post excerpts is a real SEO advantage as it makes possible the use of additional, unduplicated and keyword rich text.

There are many blog design variables that are easy to change using the design options. One of the options is to use a blog layout called “Features & Teasers.” This allows me to show the most recent post as a full article on the home page and several post titles with excerpts below that (Figure 5).

For the preliminary blog design, I am using only two WordPress plugins: Akismet and Bad Behavior. Later, I plan to use other plugins when the site is officially placed online.

Now, I’m going to tell you one of the things I like best about Thesis. Pages generated by the Thesis theme pass W3C validation for both XHTML Strict and CSS! For this, let’s have three cheers for Thesis and DIYTHEMES.

You recheck everything again, but can’t find any problem with your installation procedure. Using your FTP program or the WebShell utility at your host’s control panel, you verify that all of the necessary WordPress files and folders are in place and that the permissions are set correctly. In desperation, and using the control panel’s phpMyAdmin interface, you also verify that the MySQL database has been installed correctly and that the installer has configured the database tables. What could be wrong?

Before deleting your WordPress files and folders and zeroing out the database prior to trying a new installation, you grab a cup of your favorite beverage and relax a minute. You think about your installation. You remember that your new blog worked perfectly before you elected to change the permalink structure. Maybe it’s time to look at the server’s error log for the blog’s domain to see if it points to the root problem.

In the server’s error log, accessed from the host’s control panel, you notice the following error entry:

[Sun Mar 29 13:30:38 2009] [error] [client ...] Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden ….

Bingo! Now you remember seeing something when you used the control panel to set up your blog’s domain. You log into your control panel and select the “Web options” icon. Right at the top of the options page you see that the “Symbolic Links” option is disabled. You enable and apply this option—and now the health of your blog is restored.

Well, almost restored. One nagging error continues to be recorded in the error log:

[Sun Mar 29 22:07:14 2009] [error] [client ...] File does not exist: …/favicon.ico

When a browser accesses a web site, it always looks for a favicon.ico. WordPress does not install a favicon.ico by default. You need to either create your own or upload something suitable. Once the favicon.ico is uploaded into the blog’s root directory, this log error will disappear, too.

P.S. The Error log is your friend. Be sure to look at it from time to time.