This theme (and how it came to be)

After about 2.5 years of not having a blog I thought it was time to give it another try. My last blogging attempt failed because I did not have the time to post something interesting from time to time. The blog itself also looked horribly bad with a black theme and orange accents it was so bad I did not keep a copy of the theme when I finally pulled the plug. At the time I was unable to make up my mind about the language I would write articles in, so I ended op with a combination of Dutch and English articles both of which where completely outdated by the time I decided to shut down my blog.

This time around I will put in a lot more effort in this blog. of course every good blog starts with a good theme. in this case I was searching for a semi serous theme. I found what I was looking or with Techieblog(by wpcrumbs). The image below contains a screenshot of the original theme which I really liked although I had some issues with the 3 static images on the front page, the almost useless sidebar (for my purposes) and the really crappy horizontal menu with vertical text outlining.

As can be seen I’ve made a number of changes to the theme:

changed the 3 static image’s header on the frontage to a most recent posts slider.
changed the design from 2 columns to 3 columns.
changed the menu so it would be vertical orientated on the right side of the screen.
moved the sidebar to the menu.
removed the related posts section.
changed the theme overall bright color scheme to a much darker scheme (which reads better in my opinion).

I started of with changing the header on the front page to a slider. To do this I installed the Smart Slider plugin form the WordPress plugin page and used it to create a new slider for the front page. With the shortcode for the new slider in had I opened the header file on the WordPress theme and changed the code for the 3 static images to the shortcode for the slider.

//OLD
<div class="list list-hover">
    <div class="col-sm-4 col-xs-12">
        <a href="<?php echo get_theme_mod('techieblog_section_one_link_one'); ?>" style="<?php echo esc_attr(techieblog_featured_articles_item_style('techieblog_section_one_img_one')); ?>">
          <?php if (get_theme_mod('techieblog_section_one_title_one')) { ?>
            <h2><?php echo get_theme_mod('techieblog_section_one_title_one'); ?></h2>
          <?php } ?>
        </a>
    </div>

    <div class="col-sm-4 col-xs-12">
        <a href="<?php echo get_theme_mod('techieblog_section_one_link_two'); ?>" style="<?php echo esc_attr(techieblog_featured_articles_item_style('techieblog_section_one_img_two')); ?>">
          <?php if (get_theme_mod('techieblog_section_one_title_two')) { ?>
            <h2><?php echo get_theme_mod('techieblog_section_one_title_two'); ?></h2>
          <?php } ?>
        </a>
    </div>

    <div class="col-sm-4 col-xs-12 clearfix">
        <a href="<?php echo get_theme_mod('techieblog_section_one_link_three'); ?>" style="<?php echo esc_attr(techieblog_featured_articles_item_style('techieblog_section_one_img_three')); ?>">
          <?php if (get_theme_mod('techieblog_section_one_title_three')) { ?>
            <h2><?php echo get_theme_mod('techieblog_section_one_title_three'); ?></h2>
          <?php } ?>
        </a>
    </div>

</div>

//NEW
<div class="list list-hover">
<?php
  echo do_shortcode(<your smart slider shortcode>);
?>
</div>

Next on the list was the 2 to 3 column design this only required some simple changes to the themes main CSS file:

/*OLD*/
.content-area.content-sidebar {
 width: calc(100% - 260px);
 //<omitted>
} 

#blog-isotope-masonry article {
  width: calc(50% - 20px);
  //<omitted>
}

/*NEW*/
.content-area.content-sidebar {
 width: 100%;
 //<omitted>
}

#blog-isotope-masonry article {
  width: calc(33% - 20px);
  //<omitted>
}

Next up was the menu, this part needed a little more love because it clearly did not get much attention in the original theme.

of course it would be easyser to add an ID to the nav section I was working on, so I edited the header file once again:

//OLD
<nav class="pull">

//NEW
<nav class="pull" id="pull">

The new ID was coming handy while editing the JS file (js/customizer.js) which handled the sliding effect of the menu.

//OLD
jQuery("#nav-toggle").on("click", function (e) {
  // add active class
  jQuery(this).toggleClass("active");
  // pull down the menu
  jQuery('.pull').slideToggle();
  //<omitted>
});

//NEW
jQuery("#nav-toggle").on("click", function (e) {
  // add active class
  jQuery(this).toggleClass("active");
  if (jQuery(this).hasClass("active")) {
    document.getElementById("pull").style.width = "250px";
  } else {
    document.getElementById("pull").style.width = "0";
  }
  //<omitted>
});

After some CSS changes the menu looks much nicer, has support for different item levels and takes up much less space.

/*REMOVED*/
.pull {
  display: none;
}

/*ADDED*/
#nav-toggle {
  /*<omitted>*/
  z-index: 2;
}
.sub-menu
{
  margin-left: 10px!important;
  padding: 5px 0 5px 0!important;
}
.sub-menu li
{
  border-left: 1px solid rgba(255, 255, 255, 0.6);
}

/*OLD*/
.pull {
  background-color: #1a1a1a;
  max-height: 100vh;
  margin-top: -1px;
  overflow-y: auto;
}
.pull div ul {
  list-style: none;
  width: 50%;
  min-width: 200px;
  padding: 30px 0 30px 60px;
}
.pull div ul li {
  color: rgba(255, 255, 255, 0.6);
  display: block;
  transition: all 0.5s ease;
  padding-left: 0;
  position: relative;
  border-bottom: 1px solid #7c7c7c;
}
.pull div ul li a {
  color: #fff;
  text-transform: uppercase;
  display: block;
  transition: all 0.5s ease;
  padding: 20px 20px 20px 0;
  position: relative;
}

/*NEW*/
.pull {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
    text-shadow: .3px .3px #000;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}
.pull div ul {
  list-style: none;
  width: 100%;
  min-width: 200px;
  padding: 30px 0 30px 0;
  margin:0;
}
.pull div ul li {
  color: rgba(255, 255, 255, 0.6);
  display: block;
  transition: all 0.5s ease;
  padding-left: 0;
  position: relative;
  border-bottom: 1px solid border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
.pull div ul li a {
  color: #fff;
  text-transform: uppercase;
  display: block;
  transition: all 0.5s ease;
  padding: 5px 5px 5px 20px;
  position: relative;

}

Because I kind of removed the place for the sidebar when I made the frontpage 3 columns, it would only be fair to move it to a place where it would not be in the way the menu for example, so after removing the sidebar from the theme footer page, I placed it in the menu section.

//OLD:
<nav class="pull" id="pull">
  <?php wp_nav_menu(array('theme_location' => 'primary', 'menu_id' => 'primary-menu', 'menu_class' => 'top-nav')); ?>
</nav>

//NEW
<nav class="pull" id="pull">
  <?php wp_nav_menu(array('theme_location' => 'primary', 'menu_id' => 'primary-menu', 'menu_class' => 'top-nav')); ?>
  <?php get_sidebar(); ?>
</nav>

Another thing I thing is very annoying in the kind of blog I’m working on are related posts. although the idea of having related posts show up under every post is good by itself, the implementation is often very bad. so not having this functionality altogether is often a better approach. while I was ad it, I also removed the post navigation (next and previous post) from the single.php file.

//REMOVED

the_post_navigation();

if (!is_page()): ?>
  <?php techieblog_related_posts(); ?>
<?php endif;

And finally it is time for the big one. All other CSS changes to make the theme more to my liking. This changes mostly come down to changing colors and making things transparent. But I also had to realign some parts because some transparent parts ware overlapping.

/*OLD*/
#hero {
  min-height: 200px;
  max-height: 300px;
  /*<omitted>*/
}
.hentry {
  background: #fff;
  /*<omitted>*/
}
.shape-top-left {
  top: -20px;
  background: #fff;
  /*<omitted>*/
}
.shape-top-left:after {
  border-color: transparent transparent transparent #fff;
  /*<omitted>*/
}
.shape-top-right {
  top: -10px;
  background: #fff;
  /*<omitted>*/
}
.shape-top-right:after {
  border-color: transparent transparent #fff transparent;
  /*<omitted>*/
}
.shape-bottom-left {
  bottom: -10px;
  background: #fff;
  /*<omitted>*/
}
.shape-bottom-left:after {
  border-color: #ffffff transparent transparent transparent;
  /*<omitted>*/
}
.shape-bottom-right {
  bottom: -20px;
  background: #fff;
  /*<omitted>*/
}
.shape-bottom-right:after {
  border-color: transparent #ffffff transparent transparent;
  /*<omitted>*/
}
body {
  color: #555;
  /*<omitted>*/
}
#blog-isotope-masonry article {
  padding: 60px;
  margin: 0 20px 50px 0;
  background: #fff;
  /*<omitted>*/
}
#blog-isotope-masonry article [class*="shape-"] {
  background: #fff;
}
#blog-isotope-masonry article .shape-top-left {
  top: -10px;
  width: 30px;
}
#blog-isotope-masonry article .shape-top-right {
  top: -5px;
}
#blog-isotope-masonry article .shape-bottom-left {
  width: 30px;
  height: 15px;
  bottom: -10px;
}
#blog-isotope-masonry article .shape-bottom-right {
  bottom: -15px;
  width: 45%;
  height: 25px;
}
.entry-title a {
  color: #444;
}

/*NEW*/
#hero {
  min-height: 100px;
  max-height: 150px;
  /*<omitted>*/
}
.hentry {
  background: rgba(50, 50, 50, .6);
  /*<omitted>*/
}
.shape-top-left {
  top: -30px;
  background: rgba(50, 50, 50, .6);
  /*<omitted>*/
}
.shape-top-left:after {
  border-color: transparent transparent transparent rgba(50, 50, 50, .6);
  /*<omitted>*/
}
.shape-top-right {
  top: -20px;
  background: rgba(50, 50, 50, .6);
  /*<omitted>*/
}
.shape-top-right:after {
  border-color: transparent transparent rgba(50, 50, 50, .6) transparent;
  /*<omitted>*/
}
.shape-bottom-left {
  bottom: -20px;
  background: rgba(50, 50, 50, .6);
  /*<omitted>*/
}
.shape-bottom-left:after {
  border-color: rgba(50, 50, 50, .6) transparent transparent transparent;
  /*<omitted>*/
}
.shape-bottom-right {
  bottom: -30px;
  background: rgba(50, 50, 50, .6);
  /*<omitted>*/
}
.shape-bottom-right:after {
  border-color: transparent rgba(50, 50, 50, .6) transparent transparent;
  /*<omitted>*/
}
body {
  color: #777;
  /*<omitted>*/
}
#blog-isotope-masonry article {
  padding: 40px;
  margin: 40px 20px 50px 0;
  background: rgba(50, 50, 50, .6);
  /*<omitted>*/
}
#blog-isotope-masonry article [class*="shape-"] {
  background: rgba(50, 50, 50, .6);
}

#blog-isotope-masonry article .shape-top-left {
  top: -30px;
  width: 30px;
}
#blog-isotope-masonry article .shape-top-right {
  top: -20px;
}
#blog-isotope-masonry article .shape-bottom-left {
  width: 30px;
  height: 20px;
  bottom: -20px;
}
#blog-isotope-masonry article .shape-bottom-right {
  bottom: -30px;
  width: 45%;
  height: 30px;
}
.entry-title a {
  color: #444;
    text-shadow: .3px .3px #000;
}

Now that were all set up there is only one question remaining. This are instructions for changes to the main theme, why did you not create a child theme an made the changes to that child theme?

Well there is a good reason for that, I know it is best practice to make a child theme, so you can continue to receive updates for the parent theme without losing all your changes. Unfortunately I was not able to make a number of changes to the child theme, some parts of the theme turned white and other changes where ignored altogether. this might have to do with the way the original theme was constructed or it might be that I am not very good at CSS (sysadmin not equals web designer). Either way I have created a totally separate theme with Techieblog as foundation. This will make sure I wont receive theme updates but I will have to deal with any problems, that might arise, myself.

image form: http://www.psdtowordpressexpert.com

Just another random ICT blog

This theme (and how it came to be)