Part 5… Man, my fingers are tired. This is a lot of typing, thank God I don’t write code anymore!

Writing Code

Oh wait… Maybe I do it now and again! This part of my wordpress series is all about writing code and some cool plug-ins. There are two major pieces that I’ll go over here.

1. Widgetizing an existing plug-in
2. My favorite wordpress plug-ins

After those two topics, I’m sure my fingers will be spent for the day so I’ll go into the creation of my own plug-in in part six – (is this ever going to end?)

Widgetizing an existing plug-in

Widgets are cool! Unfortunately not every plug-in has been setup to be a widget. The thing about widgets that I like so much are that they give you lots of flexibility with the items in your sidebar. If you’re working on a new site and have yet to decide what the sidebar order should be, the widgets make it simple to move things around and get things just right. Granted, moving function calls around in php is pretty simple as well!

Okay, so off to the widgetizing world. If you want to make it really, really easy – go download this tool. If you want to go and do it the long way and actually create a widget, I’m going to help my tired fingers out and send you to some really good tutorials / resources – so here they are:

1. WordPress Widgets – Automattic
2. Simple widgets – from wpbits
3. How to Create WordPress Widgets – from lonewolf
4. WordPress Widgets Codex

Why didn’t I write my own tutorial? Simple, these ones are really good! Personally, I used the files from Automattic, pulled up the Google example and started to hack away. The rest of the resources I found while I was hacking around after building the site.

My favorite plug-ins

Okay, so here are the plug-ins that I think totally rock!

• Adsense-Deluxe
• Google XML Sitemaps
• Inline Tag Thing
• SEO Title Tag
• Tag Managing Thing
• Tag Suggest Thing
• Tiger Style Administration
• WP-DBManager
• WPG2
• InlineStockQuote
• StockQuoteSB

Okay, now that I’ve listed them all down lets run through why I love em…

Adsense-Deluxe

This is just a really cool plug-in. You can configure your adsense ad units in the config pane and then reference them in the theme or directly in an article. Pretty nice if you have adsense running on your blog.

Google XML Sitemaps

If you don’t know about Google Sitemaps you need to do a bit of research. Once you’ve gotten with the times and have decided that they are important for your site and search rankings, then download this plugin to have them created automatically!

Inline Tag, Tag Managing, and Tag Suggest Things

These are awesome. The ultimate tag warrior looked like a phenominal plug-in prior to native tag support in wordpress. Now these three plug-ins provide all of the extra tag management that you could ask for!

SEO Title Tag

Title tags are very important. Download this now.

Tiger Style Administration

I’ll admit it, I’m very picky about the way my tools look. This plug-in fixes the hideous default wordpress admin style. It has a few quirks, but it’s much nicer than the regular style.

WP-DBManager

Backup, backup, backup… I can’t say it enough. You must have backups. This will take care of it for you.

WPG2

I wrote a whole post about this thing… it is quite possibly the reason that I switched to wordpress.

InlineStockQuote

I wrote it! I better like it!

StockquoteSB

This is a pretty cool tool. I tweaked it quite a bit for my site. The original is nice and does everything you would need.

So there you have it. Links to some great widgetizing resources, and my list of favorite plug-ins. Next time I’ll talk about the creation of my plug-in the InlineStockQuote.

Holy crap, this is getting long! I figured when I started writing about my journey it would maybe be 3 articles, max. I’m easily going to hit five now.

Well, onto the journey…

Customizing vSlider3

I’ll be totally honest here – I decided to make the switch after installing the vSlider3 theme. This thing has to be the coolest, most customizable theme I have ever seen. I was flat out blown away!

When you install this theme, there is an entire Options pane that allows you to change all of the colors, icons, headers, footers, sidebars and just about everything else! Not only that, you can setup “color schemes” for the site so that with a click of a button you can go from theme A to theme B.

It is very, very cool. However… not everything is completely customizable. So I hacked away a bit

The key things that you’ll likely want to change with the vSlider theme are the fonts. I wasn’t thrilled with the default package of fonts, so I went in search of the typography settings. Unfortunately they are buried in a bunch of different style sheets. The good news is that they are commented quite nicely. You’ll find the fonts in the default stylesheet.css file, along with all of the .css files in the styles folder in the theme. Most of the stuff you’ll be looking for will be in the style_post.css and style_header.css

Header

The vSlider3 theme has a ton of header customizations available. You can toggle the header border, enable the “rotating” header images and a bunch of other stuff. However, by default the navigation links at the top are not in the rounded border. I didn’t like the way this looked so I had to make a few tweaks.

In order to get the nav links in the right spot, you need to open up the header.php file as well as it’s supporting .css files. I’d be happy to send my copies out of you need a sample to support your needs, they are fairly specific to this site so I didn’t upload them. Click here to download the Header Files for ryanbarr.com.

These are very specific for my site, so please look through them and clean them up as you see fit.

If you want to include the rss link (as I did here on my site) make sure to copy the code out of the sidebar.php file to take advantage of the customizable icons. It is pretty nice when tweaking the theme.

Lightbox

Enabling lightboxing was a little trickier. The vSlider theme supports the lightbox script out of the box, WPG2 supports lightbox out of the box. However, vSlider and WPG2 don’t use the same lightbox configurations. If you download and install the lightbox plugin as recommended by the vSlider webpage, you’ll have a mess on your hands.

I’m sure this isn’t the best way to fix it – but this is what I did! Enable lightboxing in the WPG2 plugin -> lightbox configuration page. Turn it on for everything! Then, open up the file in theme.inc in your gallery vSlider3 theme. Do a search for $theme['lightbox_plugin_active']. Delete whatever is on that line and replace it with $theme['lightbox_plugin_active'] = true;

Handling multiple picture sizes in the lightbox…

Now, if you are uploading big monster files, you’ll probably notice right away that the vSlider theme is picking up your huge version for the lightbox. Here at ryanbarr.com I have gallery configured to create 3 versions of each file, a 640×480, 800×600 and 1024×768 version, I’d like to show the 800×600 version in the lightbox.

To accomplish this, you need to change two things.

In the theme.inc file you’ll need to add the following to the end of the loadWordpressOptions function, right after $theme['columnWidthPct'] = floor(100 / $params['columns']):

 /* Add resizedId to child values, required for Lightbox JS */
    if ( $theme['children'] ){
	foreach ( $theme['children'] as $key => $value ){
	if ( $value['id'] ){
	    list($ret,$resizedIds) =
    GalleryCoreApi::fetchResizesByItemIds(array($value['id']));
	    if ($ret)
	    return $ret;
	}
	$theme['children'][$key]['resizedId'] = $value['id'];
	if ( $resizedIds ){
	    /* Find the best resized option
	     *
	     * Use width/height max=800; */
	    $lboxMaxEdge = 800;
	    $resizedEdge = NULL;
	    $resizedId = NULL;
	    foreach ( $resizedIds[$value['id']] as $resize ){
	    $width = $resize->getWidth();
	    $height = $resize->getHeight();
	    $edge = ( $width > $height )? $width : $height;
	    if ( $edge <= $lboxMaxEdge ){
		if ( !isset($resizedEdge) ){
		$resizedId = $resize->getId();
		$resizedEdge = $edge;
		} else if ( $edge > $resizedEdge ){
		$resizedId = $resize->getId();
		$resizedEdge = $edge;
		}
	    }
	    }
	    $theme['children'][$key]['resizedId'] = $resizedId;
	}
	}
    }
/* end add resizedId to child values, required for Lightbox JS */

Then, make a copy of the album.tpl file (located in gallery/themes/vSlider3/templates) and put in in gallery/themes/vSlider3/templates/local.

In that file, change href=”{g->url arg1=”view=core.DownloadItem” arg2=”itemId=`$child.id`”}” on line 46 to href=”{g->url arg1=”view=core.DownloadItem” arg2=”itemId=`$child.resizedId`”}”

That should fix your the lightbox issues. If you’d like a size other than 800×600 as your lightboxed image, just change this $lboxMaxEdge = 800; to the right size in theme.inc.

Be careful when upgrading the vSlider3 theme! The theme.inc file has been changed, and your “local” copy of album.tpl will override the new copy that you download.

Another note…. somehow, my theme.inc had extra lines at the end of it. If yours does – delete them. They will only cause problems

More lightbox stuff

If you want to put a ton of pictures in a single post, but not show them all… You’ll need to do just a bit more work.

Add this to your stylesheet.css file:

.hidden_lightbox_image {
     display: none;
}

Then add hidden_lightbox_image as a custom class on the WPG2 -> G2Image options page.

Then… when you want to put all of those photos into a post do the following

• For the item that you want to show on the page. Click the G2Image button in your editor, pick the photo, chose your style (Normal, Left, Right etc…) and insert it.
• Then, for all of the rest of the photos… Somewhere in the post (at the end is probably best) select all of those photos from the G2Image chooser and set the style to hidden_lightbox_image.

I pulled this from the old Gallery Forums at this link.

Sidebar

I didn’t like the way that the theme setup the default sidebar. You can choose to either “disable” the default sidebar through the theme options, or go in and hack the php. I chose the php route as I liked a few of the things the vSlider3 theme did out of the box.

This one is really straight forward, so I’m not going to go into depth here. It was a case of delete this, keep that, move the other thing. Nothing big here, but plenty of tweaking happened. Again – upgrades beware!

Plug-ins…

Well, now that that theme is tweaked and I like what I see it’s time to deal with my stockquote stuff. In my next article on My Journey to WordPress I’ll talk about plug-ins. Developing a plugin, tweaking an existing one to make it a widget and a few of the fun tools I’m using on ryanbarr.com

Stay tuned!

Sections…

I loved sections! Textpattern has it right using sections. For those of you that are wordpress junkies, let me explain… In textpattern, a section is almost like it’s own little site within your site. When done right, sections in textpattern allow you to separate and manage all of the different content areas in the website. Each section, is assigned a stylesheet and template. You can of course use one set of css and templates for all sections, but you don’t have to.

All of the posts to the CMS are assigned to sections. So, in my old textpattern install – I would have posted this into the articles section. The post would also get the textpattern and website categories. The cool thing with sections – you can separate your content – truly separate it.

For ryanbarr.com I had a few sections in my textpattern install. I won’t go through each of them but I’ll talk about three of them, and why I miss them dearly…

1. Articles
2. Trading
3. Pictures

In my articles section, Megan and I put all of the “standard” fair content. Stuff about the family, any random thoughts etc… This was the area of the site that folks who know us and are interested in what we are doing could come to. On the navigation, we had a link to the Barr Family Blog and this was really just a link into the articles section.

The articles section of the site was setup without all of Ryan’s stock information. When a visitor clicked into the section homepage, the page was rendered using our standard theme, just without the business stuff. The same thing would happen when a visitor clicked into a posting in the section. However, the list of postings was also limited to the articles section! That means that folks interested in the family, but who don’t care about options aren’t stuck seeing all the posts I have about options etc…

The trading section was just the opposite. It was really my business, investing, options, iron condor playground. I put the papermoney trades in here, all of my random market commentary, and everything else to do with business in the trading section. Posts in here had the addition of stock quotes on the page, and targeted ads. it was pretty nice. I didn’t place ads or stock quotes in the articles section because they didn’t really fit.

Pictures, well it was just that pictures!

Certain sections were allowed to show on the homepage, and then once in the section you were really in a specific part of a total website. Quite nice really.

WordPress does not do this Or at least I haven’t yet figured out how to make wordpress do this without a ton of php hacking.

Making it work…

Since I decided to move to wordpress I had to make this work. In wordpress you have pages (static content), categories (posts), and tags (pages and posts) – alas, no sections.

Currently, ryanbarr.com is divided between really two, possibly three major topic areas.  The family area, the business area and the pictures area. Taking pictures out to there own part of the site was a snap using the Gallery and wordpress setup that I have running here.  Part one solved.

Breaking out family and business just didn’t seem possible.  So for the site we’ve taken a little different approach. Rather than using a ton of categories as most blogs tend to do, ryanbarr.com will only have a few categories, and we will make judicious use of tags.  Thankfully, wordpress now has native support for tags so that should help out a bit. A few pieces have been broken out into pages, that will also help as well.

The one thing with this setup that I’m not too happy about is the fact that wordpress doesn’t really support viewing posts by category.  You have the archive pages, which I am using, but once in an article, the segregation goes away.

I’ve also lost the ability to really support the “two” major rss feeds I used to send.  With the new setup, I can do rss feeds by category, author, tag etc.. however, I haven’t figured out how to send an rss feed for a group of categories.  If I could set this up, that would be perfect.  Until then, we’ve decided to just use the main rss feed only.  It will muddle the content a little bit, but it’s not horrible.

I’m still looking for a way to fix this, so if you know of something – post a comment please!

Importing Data

Now that Meg and I have decided on an organizational strategy, it’s time to bulk load some testing data so that I can make sure everything is working correctly.  Off to Manage -> Import…

First things first, the textpattern import into wordpress is broken.  It doesn’t take categories in correctly.  And please make sure that you change the name of your admin user before you do this import.   Here are the things to watch out for…

1. Categories do not import correctly.  They show up in the list without any problem, but the association of post -> category somehow gets lost in the shuffle.
2. When you import users, their password is reset.  Make sure you rename the admin account in either textpattern or wordpress before running the import script.  If you don’t you will be kicked out of the import and have to do a password reset… it is a pain.
3. Posts (articles) are imported in plain text, ie: textile.  If you don’t want to use textile in wordpress, this is a problem.  You will lose all of your formatting.
4. WordPress doesn’t have sections, sections do not get imported.  If you’ve used sections in textpattern they will be lost

To fix a couple of these annoying problems, I hacked my textpattern.php import file.  I’ll post a copy of it on this post, just note that it doesn’t work perfectly – it was a hack for my use and I don’t plan to support it.  Please use at your own risk. This script met my needs so I left it alone after that. Here are the things that I fixed/added.

1. Added a Section import into the Categories import part of the script
2. Added a button to skip the user import, you can still import users if you want
3. Changed all of the posts to import the Body_html and Excerpt_html, that fixes the annoying little plain text thing
4. Made the section a category for the post

The only thing that I can see that still doesn’t work is the normal category assignment.  I looked at it, the code appeared to be correct, but still no dice.  Since I decided to get rid of my textpattern categories and redo things with tags, this was okay with me and I didn’t bother to fix it.

I’ve got data!

So now I’ve got data! Everything in the development instance is running pretty well.  I had to run the data import script a few times to get everything fixed, but after a bit of debugging we are good to go.

Now that I’ve got data… oh man, the site still needs work.

The vSlider3 theme is pretty cool, but it has a few goofy things that I wasn’t happy with.  In the next post I’ll run through the things that I tweaked in the vSlider theme to adjust the way that Gallery 2 works, as well as some of the things in wordpress.

Oh yeah, here is the import script (from wordpress 2.3.1):  download

For part two of “My Journey to WordPress” I’m going to talk about setup and configuration. I mentioned that my host does a simplified installation of both wordpress and gallery. It made the first part of this really, really easy. I literally, log into my administration web-panel, then click install.

After about 5-10 minutes I had emails in my inbox letting me know that the software was up and running. Excellent! I logged into wordpress, and it was setup in no time flat, gallery was a little more cumbersome, but still quite simple to setup really.

With the gallery setup, a few of the plugins needed additional configuration so they didn’t work right out of the box. But that was no big deal. Now that gallery and wordpress were both independently working, it was time to hook them together and then pass off the site.

To install the WPG2 plugin, just download, unzip, ftp/ssh/sftp/whatever the files over to your wordpress plugins directory. After installing, enable the plugin then head over the to the WPG2 tab in the admin interface.

General configuration of the WPG2 was pretty straight forward. The URL rewrites section gave me a little bit of trouble, so make sure to enable and disable it in Gallery first. Then try it in WPG2. You’ll also need to download two additional Gallery plugins per the WPG2 docs. That process was very straightforward in the Gallery admin panel, click on plugins then the second tab , download, activate, enjoy.

Now the trouble begins…

I had this great setup all ready to go, Gallery 2 integrated with wordpress! It was perfect. I clicked on the WPG2 page and saw this horrible theme that didn’t fit into wordpress at all! Uh-oh

I figured that I must have missed something. Being the a developer type, and a guy, I didn’t bother to read the instructions, I just stared clicking and watching the error messages. So I figured, what the heck, let’s see what the docs have to say. A quick google for WPG2 takes me to the old plugin homepage, put luckily there was a link to the “new” homepage via wordpress.org. On the homepage I see a quickstart guide – perfect! Or not…

The quickstart said to to exactly what I did! I’ve got wordpress and gallery integrated, heck I can even use the snazzy gallery picker while writing my articles… but the page looks horrible!

I figure that it must be a theme thing or something, so now it is time to go and figure that one out. Back to google. I did a quick search for “wpg2 wordpress theme” and came up with a few interesting hits.

• The first a site with a bunch of modified wordpress themes that are “optimized” for gallery… I have no idea what that means, it wasn’t in the quickstart… I didn’t realize you needed to optimize for this integration… Bookmark it, comeback later.
• Next, that old help forum… it rules in the google search so be careful! Just a bunch of php nonsense. I don’t know php – and I don’t want to know it! That is what I loved about textpattern… wordpress is beginning to piss me off.
• Next, another site from the old forum… Didn’t they move all of this stuff?!!? Wait!! Something that might be useful!
  

Before you begin

• – if you need to modify the header.php file of the WordPress theme to suite your needs, try to do this before proceeding
  - it’s recommended that you use a Gallery2 theme which is optimized for WordPress integration, like the WordPressEmbedded Gallery2 Theme for Gallery 2.1 or the WordPress Gallery2 Theme for Gallery 2.0.x.

Aha! There is some sort of wordpress embdeded Gallery 2 theme. That makes sense… Since I’m using a version of Gallery 2 that is above 2.1 that might just be the ticket. Download, install.

Okay, so now gallery has a new theme. It’s pretty boring, but what the heck, I haven’t seen it in wordpress yet. That site at the Gallery 2 old forum mentioned something about the header.php file… Whatever, lets see what we get

Not good… Okay, so it’s not totally plug and play. This is becoming painfully obvious. And what happened to the quick start, this isn’t feeling so quick now!

Stop! I’m working on my friends site… this isn’t going to work. The site looks like crap, I’m hacking a live version and this just isn’t good… Detour. Reset my development instance of ryanbarr.com. Install of the the files from my host, re-configure and walk through the steps I’ve taken so far… a while later… Resume, on my development instance of my personal site.

Now you see how I got roped into this whole mess… Since I’m already working on it to figure it all out…

Next step, lets try hooking into the “bookmarked” link I found earlier. I download a few of the “optimized” themes, activate and suddenly all is well in the world. The blog, and the gallery are working perfectly together – but why? I realize that I have no idea why this is suddenly working, the quick start guide wasn’t so quick and now I’m lost. Okay, time to read some more.

Back to the official homepage of the plugin. Under WPG2 Operations I finally find a few pieces of what I’m looking for. But it is sparse to and sort of fragmented. Again, no mention of this elusive Gallery 2 theme I found while googling, the only thing close was a page that was “under construction,” it linked back to the place I found my Galley 2 theme… So I guess if you look hard enough it is there, not not obvious.

Well, At this point I’m still a little lost, and don’t really have any desire to learn php (I do happen to know about 13 other programming/scripting languages, so i guess another one can’t hurt). What I really want it a customizable theme that doesn’t require me to re-do all of the work I just did in textpattern!

The support forums… Lets see, click, click, click, there we go… Found them! The support forums are located here. There are three options, if your looking for help with themes etc… go to WPG2 CSS/Layout Support. Don’t bother with the other areas, they will help if you have other integration issues

The forums are excellent! The guys that work the plugins seem to have answered all of the questions quickly and I was able to find what I needed… My theme vSlider3 this particular theme seemed to have it all. Customization, integration into gallery, options, configuration, no php required! Download, install!

Why didn’t I start at the support forums… Oh yeah, they are buried in the google results! That will work itself out with time…

Now I’ve installed vSlider3 and have a working site! Excellent!

Okay… now that this is all working, lets see about getting all of our content back into wordpress like it was in textpattern. Off to the admin panel, manage -> import -> textpattern -> oh crap.

In my next installment… Read about the joys of importing data from textpattern, and what I did about sections… What do you mean wordpress doesn’t have sections?!?!?!

Wow…

I never thought I would do this, but I’ve dumped textpattern. It actually came about rather quickly and I’m quite happy after doing it. Just a few weeks ago, Megan and I began the process of re-vamping the website. She really wanted to start blogging some more, and well, I needed to stop slacking off and start really blogging again. We talked about the options and figured that a re-design of ryanbarr.com was the way to go. It’s been quite a journey. One that I’ll probably split over a few posts so that this one isn’t obscenely long!

Anyhow, here is the story… I started off by completely re-doing the site in textpattern. I nabbed a pretty nice theme from textplates.com, and then dove in. After working out with Megan how we should manage the whole site, we decided to move a ton of content around (which of course wreaked havoc on my google placements) and totally reset the way a bunch of things were handled. I installed a ton of new textpattern plug-ins to try and make the administration a little more user friendly and even wrote a few myself to handle some stock quote functionality I was looking for. After spending a few weekends working on it, we finally had it ready to go.

Then a good friend of mine asked me to help her setup a new website – michellerenephotography.com.

My response: No problem! I’d be happy to help you out. Lets get a domain setup, I’ve got a great host that you can work with etc…

Then the kicker… “We’ll you know, it’s a photography site. I’d really like to have some serious image management. Really, I’d like it to be a gallery first, then a blog second.”

Serious image management?

I wasn’t quite sure how to approach it. I’ve been using textpattern for quite some time, and have built quite a few client sites using it. Textpattern is a great CMS, but serious image management is not it’s strong point. So, like any good open source kinda guy I went in search of an existing project. I happened to stumble upon a project called Gallery 2, and a wordpress plug-in called WPG2. Interesting… a full image management studio with pre-existing integration into wordpress. This could be worth a try.

The only hangup that I had was, well… I’d never used wordpress, and the last time I looked at it customization and theme’s were all handled through php hacks. Not nearly as elegant a design as textpattern.

I was a little more than skeptical, but I figured what the heck.  It’s her site and  if I can get her started I’m sure she can finish it off.  So, after a bit more research, I was ready to install. Given that michellrenephotography.com is a brand new site, I put the tools up and started hacking away.

My host does a cool quick install of both wordpress and gallery2 so we were off to the races quickly.  I got the two systems up and running, did a bit of quick configuration and then went about getting the plug-in working.  That is when I realized that there was no way on earth she was going to get this all figured out without some serious help.  Permissions, themes, configuration, ssh, linux and a ton of other things that are way to geeky for her to understand.  Well, I figured I’d better dig in…

As I worked on getting things working, I found that wordpress had evolved quite a bit since the last time I took a look.  Quite frankly, I was  downright impressed with it!  I’ll walk through my challenges and learning through this hole process over the next few posts…

Stay tuned to hear about the configuration and setup of the WPG2 plug-in.  The core of the blog/gallery setup that runs ryanbarr.com

Add In-line Stock Quote Data to your Posts. Based on the StockQuoteTT Plug-in by Andrew Hill. I took the framework that Andrew Hill put together and instead of setting up stock quote tool tips, which were driving me nuts based upon my sites design, I pulled in the current data from yahoo.com and placed it in-line.

This is my first WordPress plug-in, so I welcome any commentary on improvements etc…

• Version: 0.2
• Tested on WordPress versions: 2.3.1, 2.3.2

Usage

To use the plug-in, simply extract the files from the zip and drop it into your plug-ins folder. There is a sample .css file included that you can place into your style-sheet for customization.

After you extract the files and activate the plug-in, it would be best to sneak over to the ‘Options’ section and configure the plug-in. From there, you should be good to go. The plug-in acts as a content filter so you don’t really need to do anything else.

Enjoy!

Change Log

• 0.1 – Initial Release
• 0.2 – Enhancements for page load speed and protection against timeout
  • Added support for CURLOPT_CONNECTTIMEOUT parameter via the options control page.
  • Moved query to global function and usage of global variables to reduce the number of queries made to the yahoo engine and speed up page load time.

Download

Version 0.1 – Inline Stock Quote Plugin Version 0.2