Plugins | Chrisdigital's Blog

Lately I’ve been working a lot in WordPress and it has started to dawn on me how powerful the software is. I can only imagine what’s coming in WordPress 3.0. The power I’m referring to specifically is the ability to use custom fields with posts/pages. This basically allows an editor the ability to associate related information with an entry or record into the database. As a simple example, visualize splitting an entry into 3 variations: Full, summary, tease (or large, medium, small) and have every thing encapsulated in the same database record. Here on ChrisDigital’s Digital Designer Blog, I’m using this in the Bookmark links section to grab the “referrer”, “source” and their URLS from each post. This is very cool…

Foundation for a framework

In addition, anybody has access to the source code so you can blow up the whole posts/pages paradigm (by using your own code methodology) and still have access to all the built-in WordPress goodies. I can easily see an advanced developer using this code base as a framework to make a stripped down event booking system, inventory control catalogue or some other database entry system that needs an easy admin user interface for maintenance personnel. They can even change the admin interface for their purposes, or just find a cool admin theme like this one I came across recently.

Why WordPress?

If you’re not familiar with WordPress, check out WordPress.org for some background information. It’s safe to say I really like WordPress, and it reminds me a lot of a CMS that I really liked (despite a few quirks that it had) and used 3 years ago for a project. The CMS I’m referring to is CMS Made Simple. If you find that humorous you should realize that at CMSMS has been downloaded 750,000 times (as of October 2009) and it does have a loyal user base. However, CMS pales in comparison to WordPress’ recent update, 2.9, which has been downloaded 3,999,515 times (as of this writing) and that fact alone gives you an glimpse into why I switched. Nevertheless, my experience with CMSMS was very positive and I barely had to touch the documentation. It just all made sense, and I jumped in with both feet. I was up to my elbows in code, mucking around with templates in no time. I’m pretty much in the same place with WordPress right now.

Back to the powerful magic

As I was working in WordPress recently, I ran into a situation in which I needed to pull specific data out of the database about each page in a WordPress install and then print that information to the homepage for a theme I was tweaking. The answer was integrating custom fields into each entry and adding some minor edits to a few template files. When I finished, I got up from my desk and went to get a latte. I was done.

To get an idea of what you can do with this feature, Smashing magazine has a great roundup of some custom field hacks that can make your theme stand out. And as I mentioned in the intro here’s a great post about hacking the appearance of WordPress custom fields and how they function in the control panel. There’s no doubt in my mind that depending on the scale of your project WordPress makes a flexible CMS.

Jumping into WordPress theme development

Needless to say, you can find guidance for creating your own WordPress theme online. In addition, there are some powerful WordPress theme development frameworks you can experiment with that pretty much push theme development to the next level. Personally, I like to target my tweaks and be the originator of the code changes instead of adding another layer of coding standards/documentation that I will need to deal with.

Can I get a little help?

Half the battle of understanding any software or framework is finding help and figuring out the nomenclature and structural paradigms of folders and files. In this regard, WordPress is impressive; you just need to do a couple of Google searches and you have an answer to whatever is confusing you, ails your current install, or offers the right fix for the piece of code that you’re tweaking.

You can easily pull up resources in your Web browser such as WordPress’ codex, forums, developer community, plug-in architecture, and themes. It’s like this growing unstoppable force. Check out these video WordPress tutorials for example. This is a sample of how hard devotees work at WordPress evangelism. Eventually, you will be assimilated. You can even test drive it for free on their hosted platform.

Why go through all this trouble?

Why would you want to invest time into bending Wordress to your will? I’ll give you two reasons:

1. For now it’s open source with a reasonable learning curve that gets you up and running quickly.

2. And as mentioned above, WordPress’ admin control panel is pretty easy to use AND explain to your Web design clients for example. Which means they’re not calling you for very easy edits, and you can focus on big ticket changes. No more having to track and bill for minutiae.

More Resources

Here’s a rundown on 5 approaches you can take to get your Web clients familiar with the WordPress admin interface.

If you are looking for other PHP-based CMS’ to consider check out Silverstripe, MODx, Expression Engine, Drupal, Joomla, and I’ve been hearing a lot about Elgg lately.

Here’s a great question and answer thread from LinkedIn.com (account required) that details some plugin favorites by Linkedin members and issues associated with using plugins.

Recently I ran into a weird issue in WordPress as I was remixing an older theme for a friend’s blog. Like most people, I operate under the assumption that WordPress’ visual editor will work as the name sounds. But sometimes you can run into instances where the visual formatting of the entry/post you see in the control panel, does not match up with the content’s appearance on the blog. Glitches can show up when you hit the publish button, in this case- disappearing line breaks are the culprit. The source of the problem is likely a combination of at least two things…

Issue 1. CSS Styling in theme doesn’t provide spacing for line breaks

The theme you’re using probably doesn’t have a CSS style to address breathing room under tags. This is assuming you know enough about HTML and CSS to try to manually format your post… (look for class tags like “.post_content” or “.entry-content” or something similar in your theme css code to edit.)

Why is that?

Some theme designers “zero out” all margin and padding settings on every page element GLOBALLY (eliminating browser defaults) and then manually put it back in various css styles or html tags (to their own taste) in their code as they develop their theme. Adding a padding adjustment to address this issue to your stylesheet is what’s needed here.

Tweaking or building a WordPress theme is a process that has a lot of moving parts, it’s no surprise this got overlooked until you started posting. It’s always a good idea to thoroughly preview a theme before you invest time in it, or pop some “dummy content” into your database so you can see how your aesthetic work is developing as you go.

Issue 2. It’s a bug

Let’s just make sure we’re running the latest WordPress upgrade. Sometimes that’s a magic elixir for a bug. In rare cases, it’s not an option to immediately upgrade your install – so keep reading.

There are notorious TinyMCE bug(s) in certain browsers. To be fair TinyMCE operates with JavaScript (which means it’s at the mercy of your browsers’ implementation of JavaScript standards.)

These issues have been around for a while, not recognizing visual line breaks or not supplying the underlying tags to display posts properly in HTML was just another one.

At least, that’s what I thought before I did some more digging….

No, It’s a feature

Turns out, this seems to be a “feature” of TinyMCE, to strip and tags from posts at “save” (for XHTML compliance reasons and consistent behavior across browsers.)

Whatever the cause, it’s a source of pain for blog editors when it rears it’s ugly head. You can see a discussion here with several attempts at a work-around in WordPress forums.

My Solution:

I took the alignment advice of forum poster “dandelph” (towards the bottom of the above discussion) in combination with an edit to my “style.css” file:

Step 1. Style it

I added a case to address this in my style.css file: .post_content p {padding-bottom:10px;} //adds 10px of padding under each tag

Step 2. Give TinyMCE a reason to keep the tag

I added the post as usual via typing or cutting and pasting it from plain text in Visual Editor mode. Set up my line breaks as desired, then I highlighted it all and hit the left align button in the visual editor tool bar (behind the scenes this wraps all the paragraphs in tags) You can verify quickly by toggling over to HTML mode in the editor. The reason this works apparently is the editor understands the tags are necessary to force left alignment and leaves them alone. Go figure.

Step 3. Stick the landing

Hit “Save/Publish” button and you should be all good.

Extra Credit: Plugins and hack fixes

The WordPress plugin developer community is definitely on top of this, and those of you out there that like to muck around in code can look up how to hack the TinyMCE build that shipped with WordPress.

Here’s a post over at WP Garage that covers WordPress/Tiny MCE plugins and hacks pretty well.

WP Garage mentions a plugin that “upgrades” WordPress’ native WYSIWYG Editor to TinyMCE-Advanced. This plugin provides a suite of tweaks to TinyMCE including access to your visual editor controls. Once you activate TinyMCE-Advanced, you should see a checkbox in WordPress settings you can use to toggle the code stripping feature on or off. You also end up with a wider variety of options for your visual editor tool bar, and the editor should start behaving more like you expected.

The CMS power of WordPress