$template = preg_replace(
    "#\%date(\:\s*(.*?))?\%#ei",
    "date(('\\2'!=\"\"?'\\2':\$date_format), \$timestamp)",
    $template
);

This falls on the “advanced” side of intermediate, I would think, so here’s an explanation:

This is a standard preg_replace($pattern, $replacement, $source_string). What we want to do is replace the variable %date% in $template with a date string generated from $timestamp. But %date% is too limiting; within the template, we’d like to write something like %date: F j, Y% to get a date like “March 12, 2009,” or any other format.

The regular expression is like so: #\%date(\:\s*(.*?))?\%#ei. The “hashes” (#) here act as delimiters for the regex; the e and i after the second hash turn on “eval’d replacement” and “case-insensitivty”, respectively (learn more about PCRE regex modifiers at php.net). So the regex to deal with is \%date(\:\s*(.*?))?\%. The \% are the markers for our template variables; date is the name of the variable to look for. (\:\s*(.*?))? matches zero or one instances of our “variable modifier”: a colon, followed by any amount of whitespace (including none), followed by any number of any characters (where the extra ? makes the .* “non-greedy”; it’ll stop “eating” characters when it reaches the next percent sign). For preg_replace, this will place our date() format in “\\2″ if it is present; if it is not present, “\\2″ will not be set.

The replacement is as follows: “date((’\\2′!=\”\”?’\\2′:\$date_format), \$timestamp)”. preg_replace will insert the matched date format from the regex into every occurrence of “\\2″ in the replacement string, and then run eval() on the resulting string to get the replacement value (all thanks to the e modifier in the regex). Assuming our regex matched “F j, Y” as the match, we’ll get “date((’F j, Y’!=\”\”?’F j, Y’:\$date_format), \$timestamp)”. The (’F j, Y’!=\”\”?’F j, Y’:\$date_format) part chooses the date format; if the match is not set (ie, an empty string), use whatever is in the variable $date_format; else, if the date format was matched, use it. This allows us to use %date% in the template, to default to a server-side specified format.

And there it is. You can now put “%date: F j, Y%” in your template, and it will be expanded to “March 12, 2009″ (depending on the actual date, of course ). That is, if your templating system works in the first place…

The new layout, also my first WordPress theme (yay), is a bit more flexible. By default, it is full-browser-width, with reasonable space allotted to the right sidebar and the main content areas. For modern browsers that support max-width CSS, the design will stop “growing” at 1,000 pixels, just short of full-width on a 1024×768 resolution. The content and sidebar columns have, in addition to their own (possibly redundant) max-widths, reasonable min-widths. This is to prevent the content from being squashed beyond recognition should someone with an abnormally small browser come along. In this case, the sidebar will drop below the content area when the point-of-no-more-shrinkage is reached.

There’s a whopping 6.3KB worth of images to load per page. Unfortunately, they’re almost all translucent gradients, so IE6 users will receive *html hacks in the CSS to clear most of them, to avoid unsightly grey blocks that would otherwise obscure text. The color scheme was heavily based on Cool Grays Lavender by julievonderropp on Kuler.

In addition to the right-hand sidebar, I put two separate “widget areas” in the footer, one above the other. The bottom section is primarily for displaying the archives links — there are a lot of them (one for each month the site’s been up), and they don’t fit very nicely in vertical sidebars. The top section is simply another sidebar, designed to fit up to three widgets.

A decent amount of work went into the comments section, along with some help and ideas from a comments template posted at ChristianMontoya.com. Even/odd comments are striped for easy differentiation. The post’s author’s name is retrieved via an extra database query, and comments made by that author are given an additional class name, used to attach another gradient image to the background. Also, comments and pingbacks are listed separately, comments first, along with their respective counts. This change is extended to the front and search pages, where another extra query is executed for each post to obtain the number of actual comments for that post. A small amount of extra overhead, but it might be worth it for the extra accuracy. Unfortunately, I haven’t yet thought of a succinct way of displaying the total number of responses (comments plus pingbacks).

Concerning the actual theme construction, at the outset, I really had no clue about making WordPress themes, other than that it involved PHP, HTML, CSS, and some MySQL. The design itself started as an HTML file on my local harddrive, just an idea I started tweaking around. Fortunately, in my research I ran across a full-fledged WordPress theme tutorial on WPDesigner.com; it’s really a great tutorial for beginners to the whole WordPress skinning idea. For what the tutorial lacked, the WordPress Codex was a great reference, along with a couple of google searches for some unclear topics. I did have to consult PHP.net a couple of times, but that’s normal for any PHP project. Overall, though, it wasn’t too difficult, just a matter of putting the right pieces in the right places .

So, there you have it. My first post in almost a month (sorry ) is a self-centered look-at-me post. Criticisms, comments, and congratulations on the design are welcome. As are lectures about what coding, design, or WordPress standards I may have broken . In other words, I look forward to your feedback.

There doesn’t seem to be much info on Google regarding un-spamming comments, so I thought I’d look into the database to see what I could do. Comments are held in the MySQL table “[wp-prefix]comments” (the default is “wp_comments”). One of the columns in that table is “comment_approved”. Unmoderated comments have a 0 in this column. Approved comments have a 1. And marked-as-spam comments have “spam”. To un-spam a comment, use your MySQL client (be it phpMyAdmin or the MySQL command line program) to edit the comment_approved field back to 0 (or 1) in the appropriate comment’s row. Unfortunately, “delete” really means “delete” — a deleted comment is removed from the database altogether, so you’ll have to scrounge legit comments back together from the emails that WP sends.

I really don’t see why the WP devs didn’t build an un-spam function into the WP admin. It seems like an obvious addition, given the structure of the database.

If any of you have a question you think I could answer (that other readers would be interested in, of course ), by all means, shoot me an email. Tips on possible subjects would be appreciated, too.

Don’t get me wrong, Blogger was great to use as I began my blogging journey. A freely-hosted blog is probably the best way to test the waters, so you don’t spend $10 on a domain and who knows how much on hosting for a blog that’ll be dead in a few months. It’s just that hacking functionality into Blogger, when that functionality can easily be gained through a WordPress plugin, gets old after a while. And besides, I had to do something with my new server .

The main problem with moving is that free services like Blogger give you very, very little control over the server. The best way to maintain whatever incoming links and “Google juice” you’ve built up, assuming you’re moving to a new domain, is to set up a 301 Permanent Redirect to the new blog. And, well, Blogger doesn’t like that idea .

The next best thing, though nowhere near as desirable, is to setup various client-side redirects, and hope that at least one of them works. This, of course, pretty much leaves behind whatever link juice you may have, but it’s better than users coming to a seemingly dead blog without some way to find the regularly-updated version.

Here’s what I did: throughout the course of using blogspot, I’ve been using “post pages”, which is essentially a permalink. You can setup self-hosted WordPress to use the .htaccess file to redirect users from the old URL version (with year, month, and trailing .html) to the new version used by WordPress. For details, see BlogBloke.com’s article (currently under construction, see the google cached version). To test if your implementation works (after importing all your Blogger posts), pull up an article on the blogspot blog, replace the blog.blogspot.com in the url with your WordPress blog’s base address, and hit enter. You should be redirected to that same article on your WP blog.

As for performing the actual redirect, there are several ways to go, including javascript, meta redirects, and plain links within your pages. I set up a simple javascript redirect that goes in the head of the blog template. This takes the current URL, replaces the blogspot part with the new blog’s URL, and sends the user there. Instant client-side redirect, provided the user has javascript enabled.

<script type='text/javascript'>
// < ![CDATA[

document.location.href=document.location.href.replace(/oldblog.blogspot.com/, "newblog.com");

// ]]>
</script>

I put this directly under the title tags, so it would be executed as soon as possible. Then, it occurred to me to move the Google Analytics tracker code above that, so that I would still receive stats from that site.
Note: The CDATA tags are from the fact that New Blogger templates use XML. Occasionally, I would get issues with using my javascript without CDATA tags surrounding the code. These may or may not be necessary.

In addition to the javascript redirect, I put a Text widget above the main blog content, alerting users to the new location, in case they’ve disabled javascript.

I wouldn’t recommend using a meta tag redirect, unless you can somehow incorporate the current article’s URL into it. You don’t want to auto-redirect the user from the article they want to read to the homepage of your new blog, even if you give them a 6-second warning. It’s just downright inconsiderate. If you can’t “seamlessly” redirect them, tell them how they can get to the new place, and leave it at that.

Once you’ve got the web-based redirects working, you need to take care of your RSS readers. If you used Blogger (which, since you’re reading this, I assume you have), check out their RSS redirect service. If you’re using FeedBurner, it’s almost as simple. FeedBurner has acquired a FeedBurner WordPress plugin called FeedSmith. Simply install the plugin, re-burn your FeedBurner feed (”Edit feed details” from your feed’s dashboard, and enter your WordPress feed, which should be at http://blog.com/feed/), and enter your FeedBurner URL in the appropriate field in WordPress’s Settings → FeedBurner page. Your existing readers shouldn’t notice any change (they may receive duplicate entries of your recent articles), and any future subscribers will be redirected to your FeedBurner feed.

Seems I’m a little late

Finally! Blogger now officially supports Scheduled Publishing! Simply create a new post, click the “Post Options” dropdown (next to the Labels field), set “Post date and time:” to a future date, and publish. The post will then be filed as “Scheduled”.

To view your scheduled posts, go to the “Posting” tab, select “Edit Posts”, and choose to show either “All” or “Scheduled” posts.

‘Bout time

The main holdback I have is forwarding existing traffic. I already use Feedburner, so forwarding my RSS should be a snap. But what about Google traffic? What about all those blogspot-centric URLs I’ve scattered about the net? They will inevitably link straight here, but is there a way to automatically forward incoming links to the new location? And what about the ever-important (sarcasm) technorati ranking? Granted, I’m only rank 17 right now, but I’d rather not lose what little “credibility” I have.

Does anyone have any tips for a truly seamless Blogger-to-WordPress transition? Or at least some tips on maintaining my current traffic?

Over my spring break, I decided to spruce up my blog a bit (read: redesign). Unfortunately, I am design-challenged and too cheap to pay someone to create a new design for me. So I started perusing the designs available at OSWD, and found a nice template called Blue Spring.

After finding, downloading, and familiarizing myself with the template’s HTML and CSS, I set about hacking it into Blogger XML submission. It was mostly an effort of looking at my existing template, as well as the generated HTML, and revamping the CSS to support the structure produced by the Blogger widgets (mainly the Blog and Header widgets).

After combining HTML and CSS into one XML file and making sure the CSS supported all the widgets one might want in the sidebar, I set about “making it customizable”. Not everyone likes to muck about in the CSS code — some (most?) prefer to use Blogger’s “Fonts and Colors” tab to do what they can. Supporting this was a simple matter of pulling out all the major colors and fonts into skin variables. After that, I made sure that all the widget sections had the proper settings.

Now, a “how to” on usage. In the original template, there were designated spots above and below the header for links, namely “navigation” and “other”. I have left these as two empty sections, with a limit of one widget each. They are optimized for the “Link List” widget, but, as you can see by the search bar I’ve placed at the top, you may be able to fit other widgets in them. Beware when putting something other than a LinkList widget in the bottom slot, though — it can seriously mess up your layout (and can usually be fixed by removing the widget).

The “Page Elements” layout is slightly a mess; as I have no clue how to modify the XML file to fix this — without melting the layout — you’ll just have to deal with it The “edit” link for the top LinkList section is hidden by the logo. To get around this, move the widget to the lower slot (or a slot on the sidebar), edit it, then move it back.

Before uploading the template to your blog, be sure to upload the images to a hosting service, and replace all images used in the template with the appropriate URLs. Searching the XML file for “images/” will show you the images to be replaced. If you have a favicon for your blog, find the following section:

  <!-- link href='#favicon-url-here' rel='shortcut icon' type='image/gif'/>
  <link href='#favicon-url-here' rel='icon' type='image/gif'/ -->

Uncomment it, and replace “#favicon-url-here” with the URL of your favicon. If you want a small RSS icon to the right of the bottom LinkList section, find this section:

        <!-- span id='feedlink'>
          <a href='#your-rss-feed-here'>
            <img alt='Subscribe' src='images/rss.gif' />
          </a>
        </span -->

Uncomment it, and replace “#your-rss-feed-here” with the URL of the feed you want visitors to subscribe to.

As the devil is in the details, you will, more likely than not, come across issues if you try to add custom or third-party code to the sidebar (or any other part of the template, for that matter). The CSS has been tweaked to make most of the official Blogger widgets look good; anything unofficial is just that, unofficial. Please keep in mind that I am not your personal HelpDesk, nor will I likely have time to help everyone “fix” their blog. There are Blogger help forums, as well as HTML/CSS help forums, that will be more than happy to help you, if you ask.

For you web standardistas out there, I don’t know if the Blogger engine puts out standards-compliant code or not, but almost any Bloger blog you try to validate will turn out hundreds of errors as such, I didn’t quite worry about making the template standards-compliant. If it is, it’s completely on accident The theme does NOT render properly on IE6-. Seems to work fine on IE7, IE8 is unknown.

As always, with anything remotely related to technology, BACKUP!!! Go to your blog’s layout, select the “Edit HTML” tab, and click the “Download Full Template” link. Save the XML file to your computer, so you have a backup to restore from if you prefer your old template.

The template’s footer (and some comments in the CSS) credits the designer, DCarter, and the one who converted it into a template (Templater?), me. If you do use this template, please leave this info intact.

[ 5/11/08 ] Update: Turns out the first version would break when text size was increased, if you had menu items. Fixed by adding overflow:hidden; to the first #main-wrapper declaration. Still doesn’t work in IE6. Also added overflow:hidden; to the #sidebar declaration, and the layout now mostly works in IE6 (there are still a few quirks, but it’s usable). The sidebar is strangely displaced in IE5.01 and slightly off in IE5.5 and IE4.01 according to browsershots.org, but the template now supports “all major browsers on all major operating systems”.

Additional links:
Download the Blogger template
OSWD: Blue Spring template
Blue Spring WordPress template
Open Source Web Design
The header image I use

This template featured at The Blogger Templates

Section targeting allows you to suggest sections of your text and HTML content that you’d like us to emphasize…when matching ads to your site’s content. By providing us with your suggestions, you can assist us in improving your ad targeting. We recommend that only those familiar with HTML attempt to implement section targeting.

To implement section targeting, you’ll need to add a set of special HTML comment tags to your code. These tags will mark the beginning and end of whichever section(s) you’d like to emphasize…for ad targeting.

The HTML tags to emphasize a page section take the following format:
<!– google_ad_section_start –>

<!– google_ad_section_end –>

So, essentially, to super-target your ads, just wrap the relevant content in these special HTML comment tags. For Blogger blogs using the XML templates, however, it’s a bit trickier. More likely than not, you’ll want to target your ads to the content of your blog posts. To do so, it would appear obvious to wrap the <data:post.body/> Blogger tag with the appropriate comment tags, like so:

<!-- google_ad_section_start -->
    <p><data:post.body/></p>
<!-- google_ad_section_end -->

The problem is, Blogger’s template engine strips out all HTML comments contained within <b:includable> tags. Fortunately, Blogger themselves have a solution to this issue: <data:adStart/> and <data:adEnd/>:

<data:adStart/>
    <p><data:post.body/></p>
<data:adEnd/>

These tags will be expanded by Blogger into the desired HTML comments, allowing you to super-target your AdSense ads.

Beware of being too specific in your targeting, however. Google has put in measures against “keyword spamming” your ads:

Include a significant amount of content within the section targeting tags; including insufficient content may result in less relevant ads or PSAs. Please also be sure only to emphasize significant sections of your site’s relevant content, since it’s against our program policies to the ad targeting to result in ads that are not relevant to the content of your pages.

That means no exclusively targeting your post titles or post tags.

Also of use are the “ignore tags” that go hand-in-hand with the targeting tags:

You can also designate sections you’d like to have ignored by adding a (weight=ignore) to the starting tag:

<!– google_ad_section_start(weight=ignore) –>

This is good for topic-irrelevant content that appears on pages, specifically the content-ridden sidebar(s) that almost every Blogger blog has. Simply wrap the sidebar div in these tags to de-emphasize its content.

The way I set up my ads was to enable per-post ads (blog layout -> page elements -> click “edit” on the “Blog Posts” element -> check “Show ads between posts”), then move (only!) the <data:adCode/> line to the desired position within my post template, after the fashion of an article on Woork. I then removed all Blogger-added adStart and adEnd tags, and placed my own around my <data:post.body/> line, as specified above. I’ve found it works rather well on the individual posts’ pages, though it seems to get a little confused on the front page. This is understandable, since there are multiple targeted content sections to process on the homepage, all with different content.

After specifying the targeted sections, I wrapped my sidebar content in the ignore tags. In my template HTML (no need to “expand widget templates”), I searched for the sidebar section:

<b:section class='sidebar' id='sidebar' preferred='no'>
...all the various widgets...
</b:section>

And wrapped the entire section in the ignore tags:

<!-- google_ad_section_start(weight=ignore) -->
<b:section class='sidebar' id='sidebar' preferred='no'>
...all the various widgets...
</b:section>
<!-- google_ad_section_end(weight=ignore) -->

And, voila, ads that are more relevant to my content! Enjoy!

In my last article “Most Popular Posts list for blogger,” I presented my version of Chris Riley’s Analytics API workaround. I also promised to go through the JavaScript for those who were interested

The JS

Without further ado, the code:

<div id="popularposts"><noscript>Please enable javascript to view the most popular posts list.>/noscript></div>
<script type="text/javascript">
<!--
function topcontentCallback(obj) {
    try {
        var url,title,output;
        output='<ul>';
        for (i=0; i < obj.count; i++) {
            url = obj.value.items[i].url;
            try {
                title = obj.value.items[i].name[0].content;
                title = title.replace('<title>', '');
                title = title.replace('</title>', '');
                title = title.replace('Tech Knack: ', '');
            }
            // if we didn't get the title (bad Pipe!), give a pseudo-
            //   title from the URL
            catch (e) {
                title = url.substring(
                             url.lastIndexOf("/")+1,
                             url.lastIndexOf(".html")
                         ).replace(/\-/g, " ");
            }
            //remove the <title> tags the pipe leaves in.
            output+= '<li><a href="'+url+
                     '" title="'+title+'">'+title+'</a></li>';
        }
        output += '</ul>';
        document.getElementById("popularposts").innerHTML = output;
    }
    catch (e) {
        var error = "Error fetching data: "+e;
        if (e.toString().indexOf('i')!=-1) error += "<br />i: "+i;
        document.getElementById("popularposts").innerHTML=error;
    }
}
//-->
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=bi6F5qPK3BGfvuxf1vC6Jw&_render=json&_callback=topcontentCallback" type="text/javascript"> </script>

The Div

<div id="popularposts"><noscript>Please enable javascript to view the most popular posts list.</noscript></div>

The div with id “popularposts” is the div whose content will be replaced with our list. It initially contains some noscript text for those without JS.

The Function

function topcontentCallback(obj) {

The topcontentCallback function is the function used to handle the JSON output by the Yahoo! Pipe. “obj” is the JSON string passed in by the Pipe.

    try {
        ......
    }
    catch (e) {
        var error = "Error fetching data: "+e;
        if (e.toString().indexOf('i')!=-1) error += "<br />i: "+i;
        document.getElementById("popularposts").innerHTML=error;
    }

We enclose the main processing code in a try block. Firefox2 and IE6 (and presumably 7 and 8 ) support try blocks in JS. This way, if there is a problem processing the data (a referrenced node is missing, etc) the user gets a nice little error message rather than a JS error thrown by the browser. In te case of an error, the previously mentioned div’s content is set to “Error: <error message>”. Not useful to visitors, per se, but good for debugging your script. The “if (e.toString().indexOf(’i')!=-1)” part simply appends i’s value (from within the try block) to the error message. Again, good for debugging.

        var url,title,output;
        output='<ul>';

Declare some variables, initialize the output variable (we use an unordered list for display).

        for (i=0; i < obj.count; i++) {
            url = obj.value.items[i].url;

We loop over the items given by the Pipe. First we pull the url of the popular page.

            try {
                title = obj.value.items[i].name[0].content;
                title = title.replace('<title>', '');
                title = title.replace('</title>', '');
                title = title.replace('Tech Knack: ', '');
            }
            // if we didn't get the title (bad Pipe!), give a pseudo-
            //   title from the URL
            // if we didn't get the title (bad Pipe!), give a pseudo-
            //   title from the URL
            catch (e) {
                title = url.substring(
                             url.lastIndexOf("/")+1,
                             url.lastIndexOf(".html")
                         ).replace(/\-/g, " ");
            }
            //remove the <title> tags the pipe leaves in.

Here we try to pull the page’s title, as pulled by the Pipe. I’ve noticed that, occasionally, the Pipe will have trouble getting the page’s title, and so leaves the title blank, which doesn’t play well with our script. Within the try block, I get the content of the title; I then try to replace (remove) the title tags and the site’s title. If there is no title text from the Pipe, this will throw an error. In the catch block, we use the page’s url to “guess” the title, removing the “.html” at the end using url.substring(), and replacing the intermittent dashes which replace punctuation and spaces with .replace(). These two commands are strung together to be url.substring().replace(). The result: if the article titled “CSS trick – two background images” doesn’t have a title attribute in our JSON, the title is given as “css trick two background images”. For this reason, you should enable “post pages” in your template’s preferences.

            output+= '<li><a href="'+url+
             '" title="'+title+'">'+title+'</a></li>';

Here we append to our ul an li containing a link to the popular page.

        }
        output += '</ul>';
        document.getElementById("popularposts").innerHTML = output;

After the for loop, we add the final </ul> and replace the div’s contents.

All this is just a function; without calling it, it is no good.

<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=bi6F5qPK3BGfvuxf1vC6Jw&_render=json&_callback=topcontentCallback" type="text/javascript"> </script>

This imports the JSON created by the Pipe, telling it to render in JSON format (&_render=json) and to call our function to handle the JSON (&_callback=topcontentCallback). If you copy and paste the src to a browser window, you’ll see that the content is simply a function call with the JSON as the parameter:

topcontentCallback({"count":7,"value":{"title":"TechKnack".......}});