Archive

Posts Tagged ‘Themes’

Theme Hacking – Part 2

December 26th, 2008

Before I get started here I thought I would just give a quick ‘hat tip’ to mg12 for creating such a great free theme. I’ve only worked on 4 blogs to this point but I’ve been through many themes. This one is an absolute pleasure to work with! Thanks!

However, there were just a few more things I wanted to do.

My installation of Disqus broke the comment links on the single post page. (single.php)

Theme Hack

Neither of these links went anywhere as they were making calls to the internal WordPress comment system. Since we’re using Disqus we’ll have to code things a tad differently.

In single.php

<span class="date"><?php the_modified_time(__(‘F jS, Y’, ‘inove’)); ?></span>
            <div class="act">
                <?php if ($comments || comments_open()) : ?>
                    <span class="comments"><a href="#comments"><?php _e(‘Goto comments’, ‘inove’); ?></a></span>
                    <span class="addcomment"><a href="#respond"><?php _e(‘Leave a comment’, ‘inove’); ?></a></span>

Since Disqus does the job for both of these links we can simply remove the line making the #comment reference.

<span class="date"><?php the_time(__(‘F jS, Y’, ‘inove’)); echo ‘. Posted By <a title="author" href="’; the_author_url(); echo ‘">’; the_author(); echo ‘</a>’; ?></span>
            <div class="act">
                <?php if ($comments || comments_open()) : ?>
                    <span class="addcomment"><a href="#disqus_thread"><?php _e(‘Leave a comment’, ‘inove’); ?></a></span>

While here, I added author info to the single post display just like we did previously for the front page. Also we changed #respond to #disqus_thread in our link reference.

While working in single.php I thought I would add code to display an Adsense block just after the post but before the comments. I’ve been told this is a prime ad spot so I thought I would take advantage of it.

Unlike the sidebar ads which were inserted using Text Widgets this had to be hard coded into the theme page. (single.php)

<p class="under">
                <?php if ($options['categories']) : ?><span class="categories"><?php the_category(‘, ‘); ?></span><?php endif; ?>
                <?php if ($options['tags']) : ?><span class="tags"><?php the_tags(”, ‘, ‘, ”); ?></span><?php endif; ?>
            </p>
            <p align="center"><script type="text/javascript"><!–
google_ad_client = "pub-xxxxxxxxxxxxxxxxx";
/* 468×60, created 12/26/08 */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
//–>
</script>
<script type="text/javascript"
src="
http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>

Finding the code which displays categories and tags, I inserted my adsense code between that and the call to the comments function. Tucked in nicely. :)

Theme Hack

Now that I’m making millions (ha!) I turned to my final task.

I’ve always found that having a comment link at the end of the post is preferable to me than at the top. This theme only features a comment link at the top of the post. We don’t want to move it, we just want to add another at the end of the post.

In index.php

<?php if ($options['tags']) : ?><span class="tags"><?php the_tags(”, ‘, ‘, ”); ?></span><?php endif; ?>
                    <span class="comments"><?php comments_popup_link(__(‘No comments’, ‘inove’), __(’1 comment’, ‘inove’), __(‘% comments’, ‘inove’)); ?></span>

We simply duplicate the code used at the top of the post and insert it after the category and tag code at the bottom.

Theme Hack

Now that the user has read the post, there’s a handy link right there to make a comment.

I was honestly expecting this Theme Hacking series to go on a bit more. But, thanks to such great work by the theme author, I think I just might be done hacking. :)

I bet some of you are wondering about why I’m posting about such simple tasks. Two words: relevant content baby! While I’ve been screwing around getting things setup I’ve been seeing hits for search terms such as: ShareThis, ‘startup wordpress blog’ and most recently, ‘disqus startup’ All of these are due to the content I’ve added up to this point.

A head start, so to speak. :)

Themes , ,

Theme Hacking – Part 1

December 22nd, 2008

newThemeTE As you can see by the screenshot (and site itself) I’ve found a theme! And after only 2 days of searching! I actually found this theme early in my hunt but I wasn’t about to deny myself 48 hours of agonizing searching anyway. :)

Why I chose this theme…

  • Clean look. (Who wants a dirty blog?)
  • Supports Widgets.
  • Valid CSS and XHTML. (A must!)
  • Table-less design. (Also a must!)
  • Right Sidebar.

The Right Sidebar was a primary criteria in my search. Likely no real advantage to it but I like the idea of rendering content before anything else. I suspect Search Engines prefer it too.

But with all themes there are some things I wanted changed. So, with my trusty code editor on standby I started hacking.

First up was the XHTML validation. The theme dictated XHTML1.1. Unfortunately, this presents a problem for me. I use Windows Live Writer to compose my posts and I always use images. For some reason WLW will break strict XHTML (and in this case XHTML1.1) validation. It has something to do with image parameters but I won’t go into that in any detail here.

Changing this was simple.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

The above line appears at the top of index.php. A simple change to XHTML Transitional will solve my problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Now I can use WLW to my heart’s content without fear of breaking validation.

Next on my to-do list was to include author information to the post header info.

Theme Hack 1

Previously this theme only included date and comment links. It may just be my sick need to see my name in lights, but I’m thinking ‘recognition’ is a big key in blogging. Be it a picture or a name you want something to stick in peoples minds. The more people see it, them more likely they’ll remember it later.

By changing this line…

<span class="date"><?php the_time(__(‘F jS, Y’, ‘inove’)) ?></span>

 

… to …

<span class="date"><?php the_time(__(‘F jS, Y’, ‘inove’)); echo ‘. Posted By <a title="author" href="’; the_author_url(); echo ‘">’; the_author(); echo ‘</a>’; ?></span>

I was able to easily insert the author info.

With my name in lights I pushed on. Time to insert my FeedBurner Chicklet.

themeHack2

The RSS feed link was hard coded into the theme so back to our trusty editor. I needed a new CSS style for this. I created the following element in style.css:

#burner {
float:right; /* make the box look full */
padding: 5px; /* so chicklet image would line up with RSS image
}

Then in sidebar.php i added this line…

<div id="burner"><a href="http://feeds.feedburner.com/TornElements"><img src="http://feeds.feedburner.com/~fc/TornElements?bg=E1E1E1&amp;fg=000000&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></div>

… just after the RSS code but within the same display element. Tucked in nicely. :)

Pretty basic stuff here. I hope I’m not boring too many people. Hopefully it’ll help out some of the newer people entering into blogging.

Themes , ,

WordPress Installed. Now What?

December 20th, 2008

tornElements One of the more difficult chores of setting up a new blog is selecting a Theme which is right for you. As you can see by the screen shot here, I haven’t quite made it that far yet.

Many of us are anxious to get posting. Who wants to spend endless hours hunting for Themes? Not me!

Unfortunately, we must make the time. If only there was a ‘Theme Blender’ that would allow you to mix certain aspects from several different Themes together.

When it comes to Themes, you have four choices:

  • Free – There are some great free themes out there. Unfortunately they’re lost in a sea of crap themes that will make your eyes bleed after a couple hours of searching.
    Quite often the free themes feature excessive links in the footers. I don’t mind linking to the authors homepage but I don’t need my blog acting as a site map to their entire web site. Fly one link and leave it at that! Otherwise, I’m not interested. NEXT!!
  • Paid Theme – If you have the cash this is the way to go. There is some nice work out there and most themes are reasonably priced.
    In some cases authors will allow you to remove footer links in Paid Themes.
  • Hire A Professional Coder/Designer – Expensive but you’ll get exactly what you want.
  • DIY (Do-It-Yourself) – Likely the most ambitious of the 4 options. It’s cheap and you’ll get exactly what you want. If you’re not satisfied, you’ll know exactly who to blame. ;)

So, in the next few days I’ll be putting on my protective eye-gear and sifting through pages upon pages of GawdAweful Free Themes. I’ll hack something into place. Eventually I’ll go the DIY route.

Since we’re just getting started here I thought I would spend the next few days talking about things I’m doing to get this place up and running.

Boring stuff, but I’ll try to ad some life to it. :)

Themes , ,