Thoughts from the CyberScorpion.com Redesign

It's finally done. The CyberScorpion Bytes blog has been redesigned! When switching to WordPress a few years back, a pre-made theme was chosen for the design so I could hit the ground running with the blog. It was never the plan to stick with that template. I wanted to build my own. Now that it's done, I wanted to share some thoughts.

Why Create My Own Theme

The decision to create my own theme was made for a couple reasons. There are many great WordPress themes available. However, some aspect of the theme usually isn't quite what I want. Hopefully, that won't be the case with my own theme.

Now, existing themes can be customized with child themes or editing the theme files directly. My fear, however, is that these changes are somewhat at the mercy of the original theme developer. If the theme is updated, who knows how the changes will affect my customizations.

The other major reason for the redesign is to learn as much about WordPress as possible. WordPress has come up a number of times in my day job. The more experience that I have with the platform, the better.

Excess PHP Tags

One thing I wanted to address with my own theme is the coding style chosen by many themes, including the default one by the WordPress developers (Twenty Twelve). These themes have an excessive amount of switching between PHP and HTML making them difficult to follow. For example, here's a quick snippet from one theme:

<?php get_header(); ?>
 
     <div id="content_box">
 
          <div id="content">
 
          <?php if (have_posts()) : ?>
 
               <?php while (have_posts()) : the_post(); ?>
 
               <!--  ...more code here -->
 
               <?php endwhile; ?>
 
          <?php endif; ?>
 
          </div>
 
          <?php get_sidebar(); ?>
 
     </div>
 
<?php get_footer(); ?>

For me, it's much cleaner to remove the extra PHP tags. Note that the "content_box" and "content" <div> tags were moved throughout the header, sidebar, and footer code since those tags are useful for every page of the blog.

<?php
get_header();
 
if(have_posts()) {
     //DISPLAY POST(S)
     while(have_posts()) {
          the_post();
          //...more code here
     }
}
 
get_sidebar();
get_footer();
?>

Unnecessary CSS Hooks

Many themes also have an overabundance of class and id attributes. The following block of code was found in a theme's sidebar script:

<div id="sidebar">
<ul class="sidebar_list">
<li class="widget">

The CSS could easily be applied using the sidebar div. The <ul> and <li> tags can be targeted and styled without the extra class attributes.

#sidebar { }
#sidebar ul { }
#sidebar li { }

Conclusion

The overall process of developing a theme for private use was fairly straight forward. Especially, since I spent the last couple years customizing pre-made themes, creating child themes, and experimenting with other features of WordPress. There are more things to accomplish with the blog, but I think this is a good start. If you have any thoughts on the redesign, I would love to hear them in the comments section below.