WordPress Plugin: WP-Components

Published December 7, 2008 13 Comments 16 Delicious Bookmarks

WP-Components is a new WordPress plugin that allows theme developers to embed a short template tag instead of short bits of text and code that the website owner might want to change later on.

Before creating this plugin, if I had semi-static text within a theme I was developing (such as a short “About Me” blurb) I would either embed the text directly into the template page (sidebar.php) or I would create a “Page” within WordPress and use the iinclude plugin to “include” that page. That way, if the site owner ever wanted to change that text, he or she would just have to edit that particular page.

That worked OK, but there were a few quirks to it. First, the pages would show up in search results. I could get around it by installing a second plugin called Search Everything – that would allow you to exclude certain pages from the search results. But needing to use both these plugins wasn’t ideal for such a simple problem. That’s why I developed WP-Components

Download

Download latest stable version from WordPress Extend

Installation

  1. Upload wp-coponents.php to your wp-content/plugins/ folder.
  2. Go to Settings->WP-Components to set new components.
  3. Add the template tag shown below into your theme’s template files.

Usage

Template tag syntax:

<?php get_component('component_slug'); ?>

Template tag “safe” syntax:

<?php if (function_exists('get_component')) { get_component('component_slug'); } ?>
  • component_slug: [required] The slug given within this plugin’s settings page.

Requirements

  • Only tested on WordPress 2.5+, but there is no reason it should not work on any older versions.

FAQ

  • Where can this template tag go within my theme?
    Anywhere. Literally…

  • How can I ensure this plugin doesnt break my theme?
    The best way would be to use the safe template tag that first checks to see if the function exists before it calls it. See “Usage” above for details.

Version Changelog

  • Ver 0.7 – 2/23/2009 – Fixed javascript issues with the WP image uploader and other plugins.
  • Ver 0.5 – 12/11/2008 – Added Expand/Collapse features for each component, and a few minor style fixes for both the 2.7 and the 2.5.X versions of WordPress.
  • Ver 0.2 – 12/7/2008 – Added deletion confirmation, components are sorted properly, and an ‘undo’ function in case of an oops.
  • Ver 0.1 – 12/5/2008 – Plugin developed

ToDo List

  • TinyMCE – Add TinyMCE support for those that have enabled it within their profiles.
  • Nonce – Add nonce protection to all procedures.
  • i18n Support – Add internationalization support for the plugin.

13 Comments

  1. December 8th, 2008 @ 12:20 am

    Hey Chris, nice plugin you’ve got here! It’s such a simple plugin, but I’ll definitely be able to use it.

    I do have a suggestion. After adding a few components, the admin area could get a bit cluttered, so maybe you could implement a simple JavaScript function to toggle each component box.

    Mike

  2. December 8th, 2008 @ 11:25 am

    Thanks Michael!

    I see exactly what you are talking about – so I’ll try and incorporate this into the next version. I found the article below on how to create jquery cookies for remembering toggle options set by the user… hopefully it will make sense to me once I start into it…

    http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/

  3. December 8th, 2008 @ 5:19 pm

    Kel said:

    Thanks – Love it! How could I love it more? Styling with TinyMCE for starters. (Of course once that was done then I’d be asking for image areas etc… ) Seriously though just the TinyMCE would make this tons more useful imho.

    Thanks again for a clever solution.

  4. December 8th, 2008 @ 8:18 pm

    Just as I were debating what WordPress needs to take a stab at some of the finer CMS features, woot! Test driving this plugin right now, just from reading the 2 comments above this is going to require some labour on your behalf to maintain… good luck!

  5. December 8th, 2008 @ 9:29 pm

    Wow – what response thus far!! I will definitely keep this plugin up-to-date, and will keep adding features as they are suggested.

    I had already thought of the TinyMCE integration, but haven’t gotten around to seeing how to do it yet.

    Thanks everyone!

  6. December 9th, 2008 @ 10:34 am

    Dana said:

    LOVE IT! Just what I needed!

  7. December 9th, 2008 @ 8:42 pm

    Story added to…

    Your story was featured in WPscoop | WordPress Social News and Bookmarking! Here is the link to vote it up and promote it: http://wpscoop.com/Wordpress-Plugins/Wordpress-Plugin-WP-Components...

  8. Matt said:

    Hey Chris,
    Recently implemented your plugin for a client. I was getting a javascript error which was stopping some other plugins from working.

    On line 55 of wpcomponents.js I added:
    if (document.getElementById(“wpcomponent_id”)) {
    and put the rest of that inside, I stopped the error.

    You probably have a better way, but thought I’d let ya know.

  9. Thanks Matt! I made that change in ver 0.7, along with a few others I just came across.

  10. February 26th, 2009 @ 11:08 am

    Leland said:

    I am loving your plugin. Just what I needed. Firebug is picking up the following errors when I am accessing the admin page for this plugin:

    jQuery is not defined
    wpcomponent.js()wpcomponent.js (line 41)
    [Break on this error] jQuery(document).ready(function() {

  11. hhmm… I will check this out. Thanks for the heads up.

  12. April 10th, 2009 @ 1:20 pm

    This is the second time I’ve stumbled across your website in the last 12 months looking for a solution to a WordPress problem. I made sure to subscribe to your feed on Google Reader this time, though. Hopefully, you’ll keep writing great code and great posts to go with it.

    Thanks for all you help in the community–and that community is exactly why I can’t recommend another CMS over WordPress.

  13. April 12th, 2009 @ 7:55 am

    @Jason – Thank you for the comment! I hope I can churn out a couple more posts, but they are definitely few-and-far between.

Leave your Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Get your own Gravatar