One of the key features of WordPress is the large number of themes available. You can find a theme to suit any purpose you like, and many are extremely flexible. WordPress, designed to meet almost any website need, has an ecosystem of themes covering every type of website you could possibly desire. Standard blogs, image-heavy Pinterest-style blogs, corporate websites, e-commerce portals, and so on. Most users will select a pre-made theme, apply it to their website, and go on with their life. Well, I guess I’m not “most users.”

I tend to be a bit picky with website design, combing every inch of a design, tweaking even minor details. While there are many talented theme developers out there, none will ever release a WordPress theme that meets every bit of criteria important to me. That is to be expected, of course, and is why many businesses hire designers to create a customized theme (versus select a free, pre-made theme). So, if you can’t find a theme that suits your needs, what are your options? Basically, you have two. You can either create a whole new theme, from the ground up, or you can simply modify an existing theme. I chose the later.

Oh, I suppose you could, as I previously mentioned, hire someone to create a theme for you. Okay, three options.

Modifying the Theme

Instead of starting from scratch, I decided to modify an existing theme. One of the advantages of writing a theme from scratch is the extensive level of knowledge you gain in the process. It really is a great way to fully learn the ins and outs of a system. Yet, knowing how much I would be modifying whatever theme I selected, I figured I’d be able to come close to that knowledge level, even without the ground-up build. When I moved over to WordPress, I had just finished writing a Blogger theme from scratch. Having spent a good amount of time doing so, I was ready to just get something up and running.

My decision made, I began to look for a theme that would suit my purposes. When I was looking for a theme to modify, my goal was to find a theme that met as many of my needs as possible. That only makes sense; the closer it is to perfect, the less work involved in perfecting it. Here’s the main criteria I was looking for in a theme:

• Frequently updated. This would ensure that the base theme would be updated to work with any changes to the larger WordPress system.
• Supports responsive design. I believe responsive design to be one of the greatest developments in recent web history, so it was important that the theme support it. I knew I’d be able to add such support to whatever theme I selected, but if it already had it, all the better.
• Close to the design I envisioned. Much like responsive design, I knew I’d be able to modify nearly any theme to get the look I desired. Again, though, if it was already pretty close, then that would just save time.

After a brief look around, I went with the Catch Box Pro theme by Catch Themes. It’s actually a relatively popular theme, so it is likely that many other websites are using it, making it possible to find a number of identical looking websites out there.  My modifications (more extensive than I originally planned) make the theme nearly unrecognizable, so I have no concerns in that area.

WordPress encourages the use of Child Themes when modifying a theme. Imagine that you were to modify a theme. Tweak this, add that, etc. Then, imagine that the theme developer updated the theme. You would have to make a choice. Either ignore the update from the original developer, losing out on any improvements they have implemented, or update the theme, and then re-implement all of your manual changes. Neither is a particularly good option.

Child Themes allow you to solve these issues by modifying a theme without actually, well, modifying the theme. Essentially, you create a new theme that inherits all aspects of the theme you wish to modify. You then copy any files requiring modification over to your new theme and edit them as needed. These new files will then override the files in the original theme. For example, if you only need to modify one small aspect of a theme, then you only need to copy and edit the one file containing that code. When the original theme is updated, your modified files will be left unchanged, and will continue to override the original theme. Depending on the changes the developer made to their theme, you may have to re-do/modify some of your overrides, but the work involved is still less than if you had directly modified the original theme.

As you can see in the image at the top of this post, I ended up changing much of the theme’s design. I had a few key design goals in mind when I began to setup the site. My overall goal was to create a site that seemed current and fresh. I’ll elaborate upon what I see as the latest trends in design in another post, but for now I’ll give a few highlights.

• Clean and simple. I wanted the page to feel uncluttered and easy to navigate.
• Consistency in color and fonts. I sought to remove any jarring page elements. I wanted the page to flow well, with transitions from one area to the next going unnoticed by the average user.
• Effectively-responsive design. The original theme, while responsive, left a bit to be desired. There was far too much space being wasted on padding, and wider resolutions were stuck with a too-narrow content area.
• A blog should feel like a blog. Blogs have a certain “feel” to them. Page elements are in pretty consistent positions. WordPress blogs, especially, have a pretty standard layout. I wanted to keep this standard feel, so the page would immediately feel familiar to the average blog reader.

Originally, I had planned to keep the light gray background on the darker gray background. Once I had lived with it for awhile, though, it began to feel “old” to me. It began to feel like an outdated design, not in line with the current state of web design. So, I pulled out the outer background, separated the various page elements, and stuck a small shadow under them. After all was said and done, I ended up pretty happy with how the blog’s design turned out. I was able to meet all of my design goals, without having to invest the time in a complete, from-scratch, build-up.

Let’s Talk About Plugins

As I’ve said before, plugins are one of the greatest selling points of the WordPress system. A huge number of plugins exist, having been created by a massive and continually-active community, covering almost any bit of functionality you can imagine. In an effort to keep this site simple (key goal, remember?), I tried to limit the amount of functionality I tacked on. I did end up with a few plugins, though, so let’s talk about each one.

AddThis Social Bookmarking Widget

AddThis is my social-sharing consolidator of choice. A number of other choices exist, and there’s no real reason for why I went with AddThis. For the most part, all social-sharing consolidators have the same functionality, so I didn’t see much need to debate which to go with. Adding a social-sharing consolidator (is that even a term, or am I making it up?) to your site makes it much easier to add sharing functionality for every social networking site out there. Instead of just adding social networks manually, one-by-one, you can have the Social-Sharing Consolidator (TM) do all of the heavy lifting. With AddThis, you can either select the individual sharing networks you’d like displayed (as I have), or have AddThis display the networks that each user has selected as their favorites (if the user has created an AddThis account).

Manually adding AddThis to a website is pretty simple, but I went with the official plugin in the hope that it would help keep me informed of any changes AddThis makes to their functionality. I placed the AddThis functionality in two locations. The three big networks (Facebook, Twitter, and Google+) ride along the left margin of each post’s page (along with e-mail and print). “Like” buttons for the big 3, along with the expanded “share anywhere” button reside at the bottom of each post. The “like” buttons are pretty standard, requiring just a few style tweaks to get them better aligned. The floating box took a bit more work, requiring some custom JavaScript code to get it working.

First, here’s a look at the style tweaks I put in place. These cover spacing, fonts used, background colors, borders, and shadows. This was all done to ensure that the AddThis buttons fit in with the rest of the site’s design.

.addthis_floating_style { border-radius: 4px; border: 1px solid #d5d6d6; box-shadow: 1px 1px 5px #cccccc; -moz-box-shadow: 1px 1px 5px #cccccc; -webkit-box-shadow: 1px 1px 5px #cccccc; }
.addthis_default_style a, .addthis_default_style a:hover, .addthis_default_style a:focus, .addthis_default_style a:active,
  .addthis_pill_style a, .addthis_pill_style a:hover, .addthis_pill_style a:focus, .addthis_pill_style a:active,
  .addthis_floating_style a, .addthis_floating_style a:hover, .addthis_floating_style a:focus, .addthis_floating_style a:active { background-color: inherit; border-bottom: none; color: inherit; text-decoration: none; transition: none; }
.addthis_default_style .at300b, .addthis_default_style .at300bo, .addthis_default_style .at300m { padding: 0 8px 0 0; }
.addthis_button_tweet { min-width: 0px !important; }
#at_hover { color: #365f91 !important; }
#at_hover.atm-s .at_bold { color: #365f91 !important; }
#at_hover.atm-s a:hover .at_bold { color: #365f91 !important; }
#at_hover.atm-s a:hover { background-color: #eeeeee; border-bottom: 0px none; color: #365f91 !important; text-decoration: none; }
.

For the floating box, I added the following code to the template’s “content-single” file. This was done to get around some of the limitations in AddThis’s plugin.

<div style="left:50px;top:50px;" class="addthis_toolbox addthis_floating_style addthis_16x16_style">
  <a class="addthis_button_facebook"></a>
  <a class="addthis_button_twitter"></a>
  <a class="addthis_button_google_plusone_share"></a>
  <a class="addthis_button_email"></a>
  <a class="at300b" href='.' onClick='CleanPrint(); return false' title='CleanPrint'><span class="at16nc at300bs at15nc" style="background: url('<?php echo get_stylesheet_directory_uri(); ?>/images/widget013_top.gif') no-repeat scroll 0 0 transparent; background-position: 0 -752px;"></span></a>
</div>
.

Finally, with the help of the always-excellent JQuery JavaScript library, I put together some JavaScript to keep the floating box moving. When a post is first loaded, the floating box is placed near the post’s header. This JavaScript code watches for the scroll event. Whenever the page is scrolled down by a certain number of pixels, the floating box is removed from its position and locked to the top of the page. Then, when the end of the page is reached, the floating box is re-positioned near the end of the post, preventing it from coming along as the comments are viewed. The sharing buttons are about sharing the post, not the comments (they have their own sharing functionality), so I wanted to make sure the floating box stayed with the post.

jQuery(function () { // document ready
  if (!!jQuery('.addthis_floating_style').offset()) { // make sure ".addthis_floating_style" element exists
    jQuery('.addthis_floating_style').css({ position: 'absolute', top: 40, left: -32 });
    var stickyTop = jQuery('.addthis_floating_style').offset().top;
    jQuery(window).scroll(function () { // scroll event
      var windowTop = jQuery(window).scrollTop(); // returns number
      var mainLeft = jQuery('#main').offset().left;
      var mainTop = jQuery('#main').offset().top;
      var contentTop = jQuery('#content').offset().top;
      var contentLeft = jQuery('#content').offset().left;
      var stickyWidth = jQuery('.addthis_floating_style.addthis_16x16_style').outerWidth();
      var stickyHeight = jQuery('.addthis_floating_style.addthis_16x16_style').outerHeight();
      var endTop = jQuery('#endpost').offset().top;
      if (windowTop > (endTop - stickyHeight - 40)) { // the extra 40 is necessary to account for the fixed div's top setting
        jQuery('.addthis_floating_style').css({ position: 'absolute', top: ((endTop - contentTop) - stickyHeight), left: (0 - stickyWidth) });
      }
      else if ((stickyTop - 40) < windowTop) {
        jQuery('.addthis_floating_style').css({ position: 'fixed', top: 40, left: (contentLeft - stickyWidth) });
      }
      else {
        jQuery('.addthis_floating_style').css({ position: 'absolute', top: 40, left: (0 - stickyWidth) });
      }
    });
  }
});
.

CleanPrint

Coming up with a good printing solution was a priority for me. I suspect I will be posting a number of tutorials and walkthroughs, and posts of that nature often end up getting printed. Many users will print that sort of content in order to avoid switching from screen to screen as they follow along. I stumbled upon the CleanPrint system on a rather large online magazine’s website and it appeared to work great for them, so I thought I would give it a try.

CleanPrint allows you to customize the content you’re printing in various ways. You can change the size of the text, while the system alerts you to how many pages your content will print on. You can remove all images, or entire blocks of content, with a simple click. You can even save your content in various formats and storage systems (PDF, Email, Text, Box, DropBox, Google Drive, and Google Cloud Print). Overall, it’s a pretty slick system.

I installed the CleanPrint add-on, but truthfully, it really wasn’t necessary. Like most plugins of this sort, all the plugin does is put the main JavaScript code in your header and give you a few options for the placement of the relevant buttons. I didn’t want to be limited to their rather limited placement options, so I implemented the system myself. Installation is pretty simple. Using this site, you can generate all of the necessary code.

Once implemented, you can then work on modifying which portions of your page get printed when the user clicks the CleanPrint button. Through the use of simple style classes, you can define the purpose of the various portions of your page, and choose to exclude content that shouldn’t be printed. I made sure to style my post sections appropriately, and then excluded various bits of content (the header section, footer section, sidebars, etc.). CleanPrint was able to get close without me manually defining content areas, but it wasn’t perfect. It did a much better job once I defined what I wanted printed.

To see how the CleanPrint system works, simply click the Print icon in the floating social networking box on the left-hand side of the page.

Disqus

Disqus has long been my preferred commenting system. I’ve used it, with success, on numerous websites over the years. The Disqus system makes it especially easy for users to leave a comment. They can post as a guest (basically anonymous), or they can post using one of a few different integrated login systems. The hope is that, by allowing users to login using a number of different systems, while making it as easy to do so as possible, they will actually choose to login. Non-anonymous users tend to post more insightful comments, as they are no longer hiding behind the anonymity afforded by the Internet.

Using Disqus allows you to enjoy the latest innovations in commenting systems without having to modify your system every few years. As Disqus rolls out updates, they’ll just show up on your site. They’re pretty good about allowing you to toggle options, so you shouldn’t have to worry about an update you don’t like coming down the line.

While you can install Disqus manually (and relatively easily), installing the Disqus plugin results in one big advantage. The Disqus system will convert all comments already on your site to the Disqus format (storing them in the Cloud in the process), and likewise, will convert all comments left via Disqus to the WordPress format. This means that any comments that are made on your posts are stored in your site’s database, making it possible to remove Disqus while still retaining your comments. This could prove to be especially handy should Disqus ever close up shop. Here’s Disqus’s list of plugin features:

• Uses the Disqus API
• Comments indexable by search engines (SEO-friendly)
• Support for importing existing comments
• Auto-sync (backup) of comments with Disqus and WordPress database

And here is Disqus’s list of features, in general:

• Threaded comments and replies
• Notifications and reply by email
• Subscribe and RSS options
• Aggregated comments and social mentions
• Powerful moderation and admin tools
• Full spam filtering, blacklists and whitelists
• Support for Disqus community widgets
• Connected with a large discussion community
• Increased exposure and readership

Sounds pretty appealing, doesn’t it? WordPress comments, while useable, are nothing but basic in comparison.

Note that there is one downside to Disqus. It requires JavaScript to run. Disqus works in a similar manner to other JavaScript-based systems. You simply place a call to Disqus’s JavaScript file within your site’s code and this JavaScript file then pulls your comments down from the Disqus servers, displaying them on your site. So, if a user doesn’t have JavaScript enabled, then that JavaScript file never runs. If that JavaScript file never runs, then the Disqus comment system never loads. Nicely, any pre-existing comments will still display, but the user won’t be able to perform any other comment-related actions.

Before deploying Disqus on this site, I did take a moment to look over their latest competitor: LiveFyre. They’ve got some pretty slick stuff going on, some of which Disqus has already emulated. You’ll see LiveFyre all over the Net right now as a rather large media corporation has adopted the system for their comments. LiveFyre’s main selling point is its ability to integrate social networking posts into your comment stream. Say someone posts your blog post on their Facebook page. LiveFyre will find that post (assuming it’s posted publicly) and display it right in your comments stream, allowing any comments left on that Facebook post to become part of your overall comment system. They offer a number of other features, like a count of people currently viewing the content, rich text commenting, and friend tagging.

I chose to stick with Disqus mainly because it is a system I’m familiar with. Also, they’re time-tested, having been around for a few years now. LiveFyre’s features are attractive, but they’re not of much use to a site like mine. I suspect comments will be few and far-between, and that shares and comments on social networking sites will be just as rare.

Scroll To Top

I decided to throw in a “scroll to top” button, making it easier for readers to return to the top of the page. I started with this scroll up code, written by Mark Goodyear. I then modified it to change the layout a bit, change when the button appears, and fix a bug where the button would shift when a user hovered their mouse over it. Here’s a look at the full source code:

/*
  Originally based upon the following Wordpress plug-in:
    scrollup v2.0.0
    Author: Mark Goodyear - http://markgoodyear.com
    Git: https://github.com/markgoodyear/scrollup
 
    Copyright 2013 Mark Goodyear.
    Licensed under the MIT license
    http://www.opensource.org/licenses/mit-license.php
 
    Twitter: @markgdyr
 
  Modified by Dan Brust for blog.danbrust.net.
*/
! function (a, b, c) {
    a.fn.scrollUp = function (b) {
        a.data(c.body, "scrollUp") || (a.data(c.body, "scrollUp", !0), a.fn.scrollUp.init(b))
    }, a.fn.scrollUp.init = function (d) {
        var e = a.fn.scrollUp.settings = a.extend({}, a.fn.scrollUp.defaults, d),
            f = a("<a/>", {
                id: e.scrollName,
                href: "#top",
                title: e.scrollText
            }).appendTo("body");
        e.scrollImg || f.html(e.scrollText), f.css({
            display: "none",
            position: "fixed",
            zIndex: e.zIndex
        }), e.activeOverlay && a("<div/>", {
            id: e.scrollName + "-active"
        }).css({
            position: "absolute",
            top: e.scrollDistance + "px",
            width: "100%",
            borderTop: "1px dotted" + e.activeOverlay,
            zIndex: e.zIndex
        }).appendTo("body"), scrollEvent = a(b).scroll(function () {
            switch (scrollDis = "top" === e.scrollFrom ? e.scrollDistance : a(c).height() - a(b).height() - e.scrollDistance, e.animation) {
            case "fade":
                a(a(b).scrollTop() > scrollDis && a(b).width() >= e.maxWidth ? f.fadeIn(e.animationInSpeed) : f.fadeOut(e.animationOutSpeed));
                break;
            case "slide":
                a(a(b).scrollTop() > scrollDis && a(b).width() >= e.maxWidth ? f.slideDown(e.animationInSpeed) : f.slideUp(e.animationOutSpeed));
                break;
            default:
                a(a(b).scrollTop() > scrollDis && a(b).width() >= e.maxWidth ? f.show(0) : f.hide(0))
            }
        }), f.click(function (b) {
            b.preventDefault(), a("html, body").animate({
                scrollTop: 0
            }, e.topSpeed, e.easingType)
        })
    }, a.fn.scrollUp.defaults = {
        scrollName: "scrollUp",
        scrollDistance: 300,
        scrollFrom: "top",
        scrollSpeed: 300,
        maxWidth: 550,
        easingType: "linear",
        animation: "fade",
        animationInSpeed: 200,
        animationOutSpeed: 200,
        scrollText: "Scroll to top",
        scrollImg: !1,
        activeOverlay: !1,
        zIndex: 2147483647
    }, a.fn.scrollUp.destroy = function (d) {
        a.removeData(c.body, "scrollUp"), a("#" + a.fn.scrollUp.settings.scrollName).remove(), a("#" + a.fn.scrollUp.settings.scrollName + "-active").remove(), a.fn.jquery.split(".")[1] >= 7 ? a(b).off("scroll", d) : a(b).unbind("scroll", d)
    }, a.scrollUp = a.fn.scrollUp
}(jQuery, window, document);
 
var $nocnflct = jQuery.noConflict();
$nocnflct(function () {
    $nocnflct.scrollUp({
        scrollName: 'scrollUp', // Element ID
        scrollDistance: 600, // Distance from top before showing element (px)
        scrollSpeed: 600, // Speed back to top (ms)
        animation: 'fade', // Fade, slide, none
        animationInSpeed: 200, // Animation in speed (ms)
        animationOutSpeed: 200, // Animation out speed (ms)
        scrollText: 'Scroll To Top', // Text for element
        activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
    });
});

To use this code, place it in a .js file, then include that file on the page you want to display the Scroll To Top button on. Like so:

  <script src="scroll.js" type="text/javascript"></script>
.

I suggest placing this code near the end of your source code, right before the </body> tag. That way, the code won’t run until the rest of the page has loaded. This helps to keep your pages loading quickly.

Finally, you’ll need to style the Scroll to Top button. Here’s a look at my styling:

/* Scroll to Top button */
#scrollUp {
	bottom: 40px;
	right: -10px;
	width: 50px;
	height: 40px;
	margin: 0px;
	padding: 10px 20px 10px 5px;
	font-family: sans-serif;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 0 #fff;
	color: #828282;
	-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
	background-color: #E6E6E6;
	background-image: -moz-linear-gradient(top, #EBEBEB, #DEDEDE);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#EBEBEB), to(#DEDEDE));
	background-image: -webkit-linear-gradient(top, #EBEBEB, #DEDEDE);
	background-image: -o-linear-gradient(top, #EBEBEB, #DEDEDE);
	background-image: linear-gradient(to bottom, #EBEBEB, #DEDEDE);
	background-repeat: repeat-x;
	-webkit-transition: bottom 150ms linear;
	-moz-transition: bottom 150ms linear;
	transition: bottom 150ms linear;
}
#scrollUp:hover { 
	-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
 	right: 0px;
}
.

WP-Syntax

You may have already seen this plugin in use while reading through this post. WP-Syntax is one of many syntax highlighter plugins available for WordPress. Essentially, it is designed to add syntax highlighting (pretty colors) to any programming code you post. This plugin (through GeSHi) supports a huge list of popular programming languages, and is pretty easy to use. To use the plugin, you wrap your code in a <pre> tag. You may specify various parameters you want applied to your syntax via attributes applied to the <pre> tag.

I find it best to set the “escaped” parameter to true when displaying syntax. It causes far less problems with the editing interface in WordPress. By HTML encoding the code myself, then switching to Text mode and pasting the code in-between the <pre> tags, I find that I am able to return to the Visual editing mode without any problems. Most syntax highlighters recommend that you do all of your editing in Text mode, which can be a bit of a pain. Here’s one example of an online HTML encoder.

Wrapping It Up

A theme modification here, a plugin implementation there; it all adds up to a website customized to fit my exact needs. I tried not to get too in-depth when discussion the various modifications I’ve made, as I know it won’t interest most readers. If you’re interested in more information on anything I’ve discussed here, or elsewhere, do let me know. Maybe it’d be something worth writing an expanded post on.