get_template_part_content for Single Posts

I’ve been looking for a non-intrusive way to insert text before any of my WordPress Single Posts and Pages. In the past, I modified the themes directly, but since I didn’t own the themes I was using, anytime I updated the theme, I would lose all my changes.

I had found I can insert text at the top and bottom of my pages using add_action. For example:

add_action( 'get_footer', 'echo_hello_world' );

function echo_hello_world( $post )
{
   echo "hello world";
}

would add the phrase “hello world” to the bottom of every single page on my blog. You can find a list of tags on WordPress’ Action Reference page.

One of the things I wanted to do was insert some text beneath my header, but before my post. I had found get_template_part_content would do the trick on Pages, but not Single Posts. After I failed at finding a solution online, I looked into how the code differed between Pages and Single Posts.

Single Posts were calling:
get_template_part( 'content-single', get_post_format() );

while Pages were calling:
get_template_part( 'content', 'page' );

So I wondered if get_template_part_content_single would work, but nothing happened. I then tried get_template_part_content-single, lo and behold, it WORKED! Given that Google has 0 search results with that exact phrase, I’m guessing no one’s discovered this action tag or at least posted about it publicly.

So my code ended up looking like:

add_action( 'get_template_part_content', 'echo_hello_world' );
add_action( 'get_template_part_content-single', 'echo_hello_world' );

function echo_hello_world( $post )
{
   if( is_single() || is_page() )
   {
       echo "hello world";
   }
}

As a bonus, here’s a tag you can use to insert text between your post and the comments section: comments_template

Getting WordPress.com Stats Helper to work with JetPack

WordPress recently released their JetPack plugin which replaced WordPress.com Stats plugin. After upgrading, things took a bit to update, but most things worked fine afterwards. However, my Popular Posts widget (Most Viewed Posts) remained broken with the error: WordPress.com stats not installed

I was too busy this week to look into the cause of the issue and a quick search online didn’t result in much traction. This weekend, I finally got some time and found this post on WordPress forums: [Hack] How to use Stats Helper beside Jetpack.

Thanks to herophuong’s help, I realized what was causing the issue. The Most Viewed Posts widget is part of the WordPress.com Stats Helper plugin and it was looking up a function that no longer exists. When you installed JetPack, it automatically deactivated WordPress.com Stats. The helper plugin needed the API key in order to query for data.

You can either do what herophuong suggested in his post, but I thought a more elegant solution would be to create a separate plugin that created the function that it was looking for. That way when there are updates to the plugin, it won’t trample over your changes.

Stats API Key

All this plugin does is add the missing function stats_get_api_key and return the API key. After you download this plugin, you have to add your API key to the plugin.

You probably have an API key already. There are a couple ways to retrieve it.

  • apikey.wordpress.com
  • Akistmet settings – Go into your WordPress Plugins page and click on settings underneath Akismet

You can always go to apikey.wordpress.com to sign up for one if you don’t have one already.

After you download the plugin and obtain your API key, open the included stats-api-key.php and replace ENTER_API_KEY_HERE with your API key. Remember to leave the quotes.

Upload this file to your WordPress plugins directory (usually wp-content/plugins/) and go back to your WordPress Plugins Page, refresh the page if needed, locate the newly added Stats API Key plugin, and activate it.

Your Most Viewed Posts and any other thing that relies on WordPress.com Stats Helper should work now.

A couple things I noticed was it took a couple minutes for it to successfully retrieve the stats. Before it completed that, my most viewed posts widget would show my latest 5 posts. But be patient and it’ll eventually work.

Google Gears + WordPress

WordPress 2.6 first introduced the Turbo button I believe which allowed it to work with Google Gears. I never really thought much about it, but recently I had to modify a bunch of posts on my HD-Trailers.net blog and lets just say things weren’t as snappy as I’d like them to be. Updates took about 10-20 seconds. However I finally decide to try out the Turbo button and see where I could go from there.

Apparently what it does is that it downloads a bunch of static pages, so it doesn’t have to fetch them every time I load any of the editor/admin pages. And I do have to say things are now much snappier. It’s not lightning fast, but lets just say that post updates take less than 5 seconds. One would usually attribute these type of slowness to the webhost involved, but I’m seeing similar slowness on both Dreamhost and 1&1. However, after installing Google Gears and enabling it for both my blogs, things have been very smooth and I’m a much happier camper.

I also hate using my mouse to navigate the WordPress UI and wish they would implement some more keyboard shortcuts/hot keys. I did learn a new one. Apparently alt+shift+p publishes or updates a published post. For more WordPress keyboard shortcuts, take a look at The Ultimate List of WordPress Keyboard Shortcuts.

A few shortcuts I would really like are:

  • Save Draft
  • Preview
  • Jump to a specific section (i.e. Editor, Title, Tags, Categories, etc.)

Finally, I searched around to see what other stuff I use supported Google Gears. I couldn’t find anything officially posted by Google, but Wikipedia had this list:

There are a number of web applications that use Gears. These applications come from a variety of companies, including Google (Gmail, YouTube, Docs, Reader, Picasa for mobile, Calendar), MySpace (Mail Search), Zoho (Writer, Mail), Remember The Milk, and Buxfer. WordPress 2.6 added support for Gears, to speed up the administrative interface and reduce server hits.

The only things I use on that list other than WordPress are Google Reader and YouTube. Gears allows Reader to work offline, which is neat I guess, but half the stuff in my RSS feeds requires me to visit the site. For YouTube, I believe Gears support was only added to the uploader and <sarcasm>you know how big a video uploader I am on YouTube</sarcasm>.

WordPress Flash Upload Not Working

After upgrading to WordPress 2.7 awhile back, I noticed they included a flash uploader for images. However, I never did get it to work as I was unsure what to do with the following UI:

WordPress Flash Uploader Not Working

I ended up switching over to the browser uploader, which has worked for me.

The other day I decided to go figure out what was wrong. At first I thought it was because I didn’t have the latest version of Flash, but even after upgrading to Flash 10, it still did not work. Then I thought maybe it only works in IE and not Firefox, but even on IE with the latest version of Flash, it didn’t work.

I started researching the issue online and found: Flash Upload Not working in Latest 2.7 ver

Turns out the version of swfupload included with WordPress is incorrect or broken. I went to swfupload – Google Code and download the latest version, and overwrote the files in /wp-includes/js/swfupload. The only file you really need to keep in there is handlers.js.

Now the flash uploader is working like a charm:

WordPress Flash Uploader Working

WordPress Automatic upgrade

Apparently there’s a plugin that does what I’ve been waiting for WordPress to incorporate all this time: WordPress Automatic upgrade:

WordPress Automatic Upgrade allows a user to automatically upgrade the wordpress installation to the latest one provided by wordpress.org using the 5 steps provided in the wordpress upgrade instructions.

WordPress automatic upgrade upgrades your wordpress installation by doing the following steps.

  1. Backs up the files and makes available a link to download it.
  2. Backs up the database and makes available a link to download it.
  3. Downloads the latest files from http://wordpress.org/latest.zip and unzips it.
  4. Puts the site in maintenance mode.
  5. De-activates all active plugins and remembers it.
  6. Upgrades wordpress files.
  7. Gives you a link that will open in a new window to upgrade installation.
  8. Re-activates the plugins.

The plugin can also can be run in a automated mode where in you do not have to click on any links to go to the next step.

Sweet! I thought the automatic plugin update was really neat already. If this works, then it’ll be sweet! Just make sure you haven’t actually modified WordPress code or your upgrade would overwrite it. Previously, I went and modified WordPress core code to get my collapsible sidebar menus, since that wasn’t exposed in the theme layer. However in my recent upgrade, I forwent all that and only made slight changes to the theme so it’d be easier for later upgrades, so upgrading won’t have to be a multi-hour process and tons of breaking changes. I’ll also be able to upgrade more frequently instead of every 6 months to 1 year.

Next thing they need to add is the ability to download and install new plugins on the fly. Currently I have to download the zip file and upload it myself. But given that they can already automatically upgrade plugins to the latest version, I’d think adding a new plugin shouldn’t be too hard.

Update: Speak of the devil. WordPress 2.7 was just released today. Got to test the plugin first hand today and it was a smooth as a baby’s butt. It was basically the steps above, one after another. Personally I think it requested confirmation too many times. Like I don’t think it really needed my confirmation to go and download the latest version of WordPress. I think it should be 2 simple steps: 1. Backup, 2. Upgrade. Any option needed for backup should be on the 1st page. Any option needed for upgrade should be on the 2nd page. However, it definitely made the upgrade process a lot simpler.

Tons of new stuff that I have yet to check out. Definitely a big improvement over 2.6. The editor space is a lot bigger now (fills up the width of your screen instead of set at some fixed width). The common panes (publish, tags, and categories) are move to the right side. Unfortunately they haven’t made it possible to resize the panes individually. I still don’t understand why you can resize the editor window when it’s in Visual mode, but not in HTML mode.

I just watched the video on their blog and they’ve basically rendered this plugin useless. They’ve apparently built the WordPress upgrade directly into 2.7. They’ve also addressed a few of the points I’ve brought up (i.e. automatically downloading and installing plugins).

New Theme

So I’ve finally upgraded to WordPress 2.6.5. Nothing new that I’ve really noticed yet.

I’ve also taken this opportunity to change my theme. The one I’ve decided to go for now is simpleX. I’ve also considered Clean Home and Pixeled, but both had their quirks which I couldn’t think of a easy way to over come.

Given that, I still had to make some changes to simpleX where it did not play nice with the Most Viewed and Recent Comments widgets. I had to add the following to my CSS stylesheet for it to actually render okay:

#recent-comments li {
   background: url(images/meta.gif) no-repeat 5px 7px !important;
   padding: 5px 5px !important;
   padding-left: 20px !important;
}
.recentcomments a {
   background: none !important;
}
.recentcomments a:hover {
   color: #333 !important;
   text-decoration: none !important;
   background: #E8C8C8 !important;
   border-bottom: 1px solid #c47373 !important;
}
#most-viewed li {
   background: url(images/meta.gif) no-repeat 5px 7px !important;
   padding: 5px 5px !important;
   padding-left: 20px !important;
}
#most-viewed a {
   background: none !important;
   display:inline !important;
   padding: 0 !important;
}
#most-viewed a:hover {
   color: #333 !important;
   text-decoration: none !important;
   background: #E8C8C8 !important;
   border-bottom: 1px solid #c47373 !important;
}

Given this chance, I also went through my blogroll and friends list and purged any link that was no longer working or haven’t updated in some time.

I’m still not 100% sure I’m going to stick with this theme yet. I dig the simplistic view. Maybe all it needs a new header image. 🙂

Update: I’ve also ended up disabling new user registrations and purging users I did not recognize. If you used to have an account and can no longer sign in, do let me know. I had several hundreds of user registrations and most of them were fake. They probably expected to be able to spam better if they had registered an account.

Update #2: Added more padding to the Most Viewed and Recent Comments, along with the little gears icon.

Update #3: Borrowed some icons from famfamfam.com. Didn’t really think gear cogs represented posts and comments that well.

WordPress Visual Editor Changes My HTML Code

I have a love/hate relationship with WordPress’ Visual editor. The editor can be great sometimes. Other times it can be a pain. I already disable “WordPress should correct invalidly nested XHTML automatically” as their definition of nested XHTML doesn’t really cover everything XHTML supports.

So if you noticed, I’ve began to recently embed flash videos into my blog posts, something I’ve avoided doing for some time since it doesn’t really fit well with my theme, which I’m in the market of changing. Still searching for one that I’d like. I recently switched to the Green Light theme for my HD-Trailers.net Blog, but I’m not sure if I want to have that here at Krunk4Ever!

I love the fact that when you try to add an image, it’ll automatically fill in the height/width and allows me to set alignments and etc. However, for everything else, I usually use the HTML editor which allows me to put in code directly.

Anyway, today’s blog post is how frustrating the Visual Editor can be some times. The main problem started because I started embedding flash videos into my blog post. I like my webpages to be XHTML valid, and for those who have this gene, you’ll know that most flash code websites provide are XHTML invalid. I found out how to modify it. Basically the <embed>...</embed> is invalid and I have to add a few attributes to the <object> tag.

For example for this video on YouTube (Lime in the Coconut), the embed code they provide is:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/BUG8A8e8KC0&amp;hl=en&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/BUG8A8e8KC0&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

To make it XHTML compliant, you covert it to:

<object width="425" height="344" type="application/x-shockwave-flash" data="http://www.youtube.com/v/BUG8A8e8KC0&amp;hl=en&amp;fs=1"><param name="movie" value="http://www.youtube.com/v/BUG8A8e8KC0&amp;hl=en&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/BUG8A8e8KC0&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Resulting in:

<object width="425" height="344" type="application/x-shockwave-flash" data="http://www.youtube.com/v/BUG8A8e8KC0&amp;hl=en&amp;fs=1"><param name="movie" value="http://www.youtube.com/v/BUG8A8e8KC0&amp;hl=en&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param></object>

Just for kicks, here’s the video:

If you watch House, M.D., you’d recognize this song, which was hilarious!

However, if you switch to the Visual editor and back to the HTML editor, WordPress decides that your flash code should look like this:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/BUG8A8e8KC0&hl=en&fs=1" /><embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/BUG8A8e8KC0&hl=en&fs=1" allowscriptaccess="always" allowfullscreen="true"></embed></object>

It removed my type and data attributes, stuck in the classid and codebase attributes, and then re-added the embed block back in. WordPress strives to create XHTML compliant code (hence the check to correct any invalid nested XHTML), but why re-add the embed block which is XHTML non-compliant?!?!? I found it annoying and basically the flash video would have to be the last thing I add or else the code gets “corrupted”.

I tested the newest version of WordPress (2.6.5) and this issue still exists. I found the following threads where people have been complaining about this issue:

It appears the WordPress folks have no plans on fixing this issue as they’re suggesting to use one or the other completely and don’t switch between editors. I’m generally okay with that approach, but on my HD-Trailers.net site, I have multiple people editing posts and can’t really enforce one editor for everyone. I have a SQL script I run every few days to fix some stuff that “disappears” after a post gets edited.

Others have suggested using a different visual editor, but it doesn’t seem that any is that great…

I have a hunch that the embed code is needed for flash to work on IE6, but if you’re surfing the web and still using IE6, you don’t deserve to see the flash content on my site. ;p

Update: Another common thing I do is insert <div align="center">...</div>, so stuff are aligned in the center, but switching between between the Visual and HTML editor removes the divs. It’s actually quite annoying.