DM Blog

OK, so, obviously, my blog has been redesigned :-)

When I first started out, my main objectives were to:

1. make it easier/quicker for me to write new articles without having to sacrifice my customizations
2. make it easier/quicker for me to update plugins (and/or change themes), without having to do so much code-altering each time
3. redesign my blog to:
   • reduce clutter
   • make it easier to read (font sizes)
   • make it simpler to use and easier to find articles
   • incorporate some new features of WordPress 2.7, like comment threading
4. make sure everything is as standards-compliant and forward-compatible as possible, of course

I think I’ve done a pretty good job on all four of those main objectives…

Since I didn’t originally intend to design my own theme, I started by moving all my "customizations" into a custom plugin. The idea was that if I had all my customizations in a plugin, I could change my blog’s theme "at will" since the customizations were no longer theme-dependent.

My plugin, sort of like many plugins bundled into one, does a couple things:

• adds a ton of "shortcodes" to incorporate my customizations while speeding up writing
• adds functionality to have a thumbnail image for each article (or use a default thumbnail if none is specified)
• adds "quicktags" to the post/edit pages in the admin panel for each shortcode, and a place to specify the article thumbnail
• creates several (moveable) widgets to be used in the sidebars:
  • a twitter widget
  • a google-ads widget
  • a recent comments widget
• adds a custom subscribe page with options to be alerted (via feedburner email) of new articles, or to add the RSS feed to google/yahoo/etc.
• removes wpautop from article content, excerpts and comments
• adds <fieldset> tags to the default search form (output by the new get_search_form(); function) to make it XHTML strict compatible
• removes the lang attribute from the html tag (output by the language_attributes(); function) to make it XHTML strict compatible (keeping only the xml:lang attribute)
• adds custom CSS and JavaScript files to be used by my customizations (including CSS to re-position Peter’s Custom Anti-Spam Captcha and JavaScript to improve the search form for Safari users)

It seems like a lot when you see it in a list like that, but it was actually quite simple to do. (Thanks WordPress!)

So, the shortcodes I added are basically like shortcuts to insert big chunks of commonly-used code. For example, all I have to do now is type [dmreply] and I get this inserted:

<p class="dmreply">
	<a href="#respond" title="Submit a comment">Submit a comment</a> and let me know your thoughts.<br />
	<a href="#subscribe" title="Subscribe to '.get_bloginfo('name'). ' Updates" onclick="javascript:dmsubscribe();">Subscribe</a>
	to the <a href="'.get_bloginfo('rss2_url').'" title="'.get_bloginfo('name').' RSS Feed">articles feed</a> and the 
	<a href="'.get_bloginfo('comments_rss2_url').'" title="Comments feed">comments feed</a> to stay up-to-date.
</p>

Which looks like this:

How’s that for faster? But the shortcodes can also accept attributes. Here’s a list of the other shortcodes I created, and what they do:

[dmyoutube id align title width]

embeds a YouTube video on articles

• id is the YouTube Video’s ID
• align can be either left, right, center, or full and sets the alignment of the video
• title is the title of the video
• width (optional) is the width to use for the embedded video; if no width is specified, it will default to 160px; the height will be set to ¾ of this value

[dmaudio file title linktext]

creates a link to an audio track

• file is the audio file to link to
• title (optional) defaults to "Audio Track" if none is specified
• linktxt (optional) defaults to "play the song" if none is specified

[dmvideo file align title]

embeds a video thumbnail on articles (with a play button over it) and links to the video (title is optional)

[dmphoto file extension align title caption]

embeds a photo thumbnail on articles (with an optional caption below it) and links to the larger version

[dmstars 2.5 ratingtype]

embeds rating stars (out of 5) with a custom rating type (defaults to "Overall" if none is specified)

So, with so many shortcodes, and so many different attributes, it would be easy to forget how to use them. that’s why I added the quicktags on the post/edit pages for each one. All I have to do is click the respective button and it prompts me for all the necessary attributes. Nice!

Another cool thing is that, not only do the shortcodes make writing faster, but I can embed YouTube videos on my articles and still be XHTML strict compatible. For some of the shortcodes, I am outputting modified HTML content to the RSS feeds so that links aren’t broken, javascript is stripped, video thumbnails can be embedded for YouTube (since objects can’t), etc. They also standardize the way everything looks throughout my blog and I only have to change the code in one place for all articles to be updated with the new code and styles. Awesomeness.

If you want to see some of these features in action, have a look around my blog (you can use the searchbar in the header or use the tags listings on the archives page). I converted all my past articles to use these shortcodes wherever there was audio, video or YouTube embedded before. Also, if you’re interested in seeing any of my code, or want help with any WordPress stuff, please don’t hesitate to contact me.

In terms of the theme, like I said, I wasn’t expecting to create my own theme. But after having such an easy time with my plugin functions, I decided, why not? The only theme I could find that I really liked was WPCandy’s v1 WordPress Theme by Michael Castilla, but after realizing that I would still be spending time to modify it to have it the way I wanted (and to incorporate comment threading), I thought, why not make my own theme? I thought about how to re-design my blog and make it fancy, but in the end, I decided to make it a combination of my dmred.ca and DanielMenjivar.com sites, for simplicity sake. I used the included "default" theme as a starting point, but you could say that my blog’s design is very much inspired by the WPCandy theme – thanks a million Michael!

Lastly, since my blog’s design uses a lot of fixed divs, I decided to create a separate CSS stylesheet for the iPhone and took the time to do the same for my DanielMenjivar.com site too. (Since most people probably don’t know that you can still scroll through fixed divs on the iPhone by using two fingers instead of one… There’s a tip for you!)

Anyways, it was a much more pleasant experience than I had expected. I really wanted to make sure that I didn’t "hack" things the way I did with my last theme and wanted to make sure I did things the right way this time. Lesson learned. Now I can change my theme and update all my plugins the easy way, (with one click), without having to worry about losing features, custom edits, etc. (I will admit, it was sometimes hard to find documentation for some of WordPress’ functions, but for the most part, things were easy to find and went very smoothly.)

Well, this has been a long article – thanks for reading!