Skip to contentSkip to author details

wordpress

A 7-post collection

New Blog

Written by Michael Earls
 blog  wordpress  ghost

Goodbye, WordPress!

After much internal mental debate, I have decided to restart my blog from scratch. The blog has been powered by WordPress for a very long time (since I converted it from DasBlog somewhere around 2004).

After a recommendation from Shawn Wildermuth, I decided to go with Ghost. It was very easy to get setup (I had it up and running in about 10 minutes, including all Internet DNS changes and nameserver reassignments).

Also, it works perfectly with SSL, so I am able to provide SSL to my readers, which is a goal I had for the new year.

Why Change?

WordPress was starting to irritate me. It injected an enormous amount of unnecessary HTML and it rendered very large documents for simple pages. The biggest issue I had with it is that it encoded all of my source code before storing it in the database, causing it to render incorrectly and cause me grief.

With Ghost, all I have to do is wrap it in code markdown: my code here (using ` character on either side) for inline code and four spaces for multi-line code, like so:

function doIt(message){  
    var abc = message + ', World';
    alert(abc);
}

I haven't found a code formatting "plugin", but the fact that I no longer have to fight with WordPress to insert code makes me happy.

UPDATE: I found a code formatter. I am using Google Code Prettify.

The HTML rendered by Ghost is clean and small, just like I wanted it. I got some errors from Google analytics, so I haven't put in my analytics tracker, yet. As soon as I do, that will probably be the ugliest element in my output.

I am going to make an attempt to create a blog that is low-impact and allows readers on mobile devices to read my blog without eating up too much of their data.

WordPress is heading in the right direction with their recent updates, but there's really no way they'll ever extract themselves from their worst attribute: everything is written in PHP.

What now?

For the future of my blog, I am going to look at the traffic for each of the posts in my old blog. I will migrate the most popular posts to this new blog so that they will remain on the Internet. Hopefully, I can find a way to make the permalinks work.

Update: Ghost has a great guide on how to import a WordPress blog into Ghost. I have used this guide to successfully move my blog over. It even retained my permalinks. The only thing it can't do is retain the links to the years and months (ex. https://cerkit.com/2009/12/ is now broken.

If not, I guess I can count on Google to re-index my site, especially now that it will not be as "wordy" on the HTML side.

Also, I believe that I read somewhere that they give higher rankings to sites that support SSL (https).

Thanks for bearing with me. I also need to look into what to do about my RSS subscribers. This may be the end of an era as far as that goes.

EDIT Jan 19, 2016: Ghost provides an RSS feed at https://cerkit.com/feed

Merging two menus in a custom WordPress theme

Written by Michael Earls
 bootstrap  menu  theme programming  wordpress

Update: I have switched to using Ghost as my blogging engine, but this code still works on WordPress.

I have been working on a custom theme for my WordPress website. I had the need to combine the Primary menu with the Social menu to create a Bootstrap navbar (I am creating a Bootstrap theme for WordPress). Instead of creating two separate menus, I need to merge them because I don’t want two expand buttons and I’m not sure how that would work on a navbar.

I am using the default wp_nav_menu() (link) in my theme.

Here is the code (I can’t get my blog editor to format it correctly. You can see the properly formatted code here).

<nav id="top-navbar" class="navbar navbar-default navbar-fixed-top" role="navigation">  
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="/" rel="home"> My Website </a> 
</div> 
<div class="collapse navbar-collapse" id="navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
        <?php 
        /* Show the primary menu */ 
        wp_nav_menu( 
            array( 
                'menu' => 'primary', 
                'theme_location' => 'primary', 
                'container' => false, 
                'depth' => 2, 
                'items_wrap' => '%3$s', 
                'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 
                'walker' => new wp_bootstrap_navwalker()
             ) 
        ); 
        /* Create a social menu that displays icons for social networks 
         * it is special because it needs to integrate with the existing links                
         */ 
        wp_nav_menu( 
            array( 
                'menu' => 'social', 
                'theme_location' => 'social', 
                'container' => false, 
                'depth' => 1, 
                'items_wrap' => '%3$s', 
                'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 
                'walker' => new wp_bootstrap_navwalker()
            )
        ); 
        ?> 
        </ul> 
    </div>
</nav>

Notice that I had to manually add the code for the div that has collapse navbar-collapse and the <ul> that contains the menu items since we won’t be using the built-in container from the call to wp_nav_menu().

Here is the php specific menu code:

<?php  
/* Show the primary menu */ 
wp\_nav\_menu(  
    array( 
        'menu' => 'primary', 
        'theme_location' => 'primary', 
        'container' => false, 
        'depth' => 2, 
        'items_wrap' => '%3$s', 
        'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 
        'walker' => new wp_bootstrap_navwalker()
    ) 
); 
/* Create a social menu that displays icons for social networks 
 * it is special because it needs to integrate with the existing links 
 */ 
wp\_nav\_menu(  
    array( 
        'menu' => 'social', 
        'theme_location' => 'social', 
        'container' => false, 
        'depth' => 1, 
        'items_wrap' => '%3$s', 
        'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 
        'walker' => new wp_bootstrap_navwalker()
    ) 
); 
?>

Here are the main settings that give us what we want:

  • 'container' => false – prevents WordPress from wrapping your menu
  • 'items_wrap' => '%3$s' – simply returns the <li> element containing the link to your item.

Note: You can leave the ‘fallback_cb’ and ‘walker’ blank to use the default walker. However, I am using the custom wp_bootstrap_navwalker  from twittemHere is my fork that adds support for FontAwesome fonts.

CSS Goodness!

Written by Michael Earls
 apple safari  chrome  css  firefox  google chrome  safari  wordpress

I just finished working on two custom templates/themes for WordPress. I used no HTML tables, just

tags and CSS. There were two tags – one each for the XHTML validation badge and the CSS validation badge. All the other images were background-images in CSS.

What’s most shocking is that I have one code base (XHTML and CSS) that works in IE 7+ (even in IE 7 quirks mode), Google Chrome, Firefox, and Apple Safari. I’m psyched. This is the first time in my career that I haven’t had to write javascript to detect the browser version. Of course, I am assuming that my visitors have more recent versions of their browser. That’s why I put a “this site optimized for…” deisclaimer at the bottom. Hopefully, it won’t look too awful in older browsers.

The sites both validate against XHTML and CSS. I’m really excited about this. I almost can’t believe it.

As soon as my domain name (cerkit.com) transfers to GoDaddy, I’ll post my new custom template/theme to the site and start piling on the blog entries!

Adding an RSS Icon to the “Subscribe to Comment RSS feed” link in a WordPress Template

Written by Michael Earls
 RSS  wordpress

In working with my custom template for WordPress, I came across an unfortunate problem. It seems that the default output for the function post_comments_feed_link() displays a simple anchor tag with a link to the comment RSS feed.

I like to use the RSS Icon (feed-icon-14x14) to indicate that the feed is, in fact, an RSS feed. It’s easily recognized over just plain text. This is not possible in the default implementation, so I had to do some hacking.

To get the icon on my page, I had to do two things:

  • Edit the *link-template.php *file in //wp-includes folder
  • Edit the style.css file

In link-template.php, search for the function named “post_comments_feed_link()”. Once you find that function, notice that the last line is:

echo applyfilters( ‘postcommentsfeedlinkhtml’, “$linktext”, $post_id, $feed );

Simply change it to the following code:

echo applyfilters( ‘postcommentsfeedlinkhtml’, “ id=’CommentRSSLink’>$linktext”, $post_id, $feed );

This will give us an ID to hook up with in our CSS file.

In your styles.css file, simply add the following:

#CommentRssLink
{
background-image: url(‘img/feed-icon-14×14.png’);
background-repeat: no-repeat;
background-position: 0;
height: 14px;
padding-left: 18px;
}

Make sure you have the correct feed-icon (you can get them here) in the /img *folder.

You might also want to change your /comments.php to change the wording of the text, as demonstrated below.

Here’s the final result:

rssSubscribeScreenCapture

All in all, I’m finding WordPress to be very easy to enhance and extend. This change allowed me to offer my readers an easy to recognize way to subscribe to my comments’ RSS feeds.

I hope this helps.

Switching teams…

Written by Michael Earls
 dasBlog  godaddy  wordpress

I’ve converted from a dasBlog lover to a complete WordPress fanatic. I’ve been writing a custom template and theme for Laurie and it’s been a wonderful experience. I’ve had to learn a little PHP, but it’s worth it. It uses mySQL as a backend database. The Admin console for mySql is AWESOME!

I think I’m switching teams.

I am having trouble with an e-commerce gateway. It’s a little over my head and the documentation is sparse. However, it has a lot of great features, so I’m determined to make it work.

Overall, I’m very pleased with my experiences with WordPress. I’m also extremely impressed with GoDaddy’s hosting setup (I’m using the Windows hosting).

Moving to Wordpress

Written by Michael Earls
 cerkit  wordpress

I’ve decided to break my permalinks (after keeping them around for 5 years or so) and move on to using WordPress as my blog host. For those of you that are subscribed to my RSS feed, nothing will change for you.  However, for those of you who visit the website, you’ll need to change your bookmarks to http://cerkit.wordpress.com/. Cerkit.com will be retired, but Cerkit will live on. Once I figure out a good use for the domain, I’ll crank it back up again.  But for now, All I really need is a simple blog, and WordPress provides that for me.

Update: I’m using WordPress.com’s Custom Domain service now, so cerkit.com still works.