Category Archives: WP Stuff

Adding Style to Plugins

I’m near completion of my latest plugin that requires a little CSS magic.
Being a huge Fan of CSS, I thought it best to check out how it could be done.

I’ll give credit where credit is due.

Thanks goes to  Artem Russakovskii and his post on wordpress-plugin-development-how-to-include-css-and-javascript-conditionally-and-only-when-needed-by-the-posts

And as a follow up from the good folk from the WP Codex – http://codex.wordpress.org/Function_Reference/wp_enqueue_style and also regarding a new look on CSS and styling Anchor Tags – the Proper Way…. as shown by Anatoly Lubarsky at http://blogs.x2line.com/al/articles/159.aspx

To all of the above, a big thanks. I went from “hey how do you go adding in CSS with a plugin” to having it working in about 20 minutes, including research and dreaming up new stuff.

That’s another step forward in the Plugin “How To’s”.

Plugins for WordPress

Plugins make life  more enjoyable. Takes a lot of the headaches out of building a interactive website.

There is a plugin for just about anything you want you website to do.

If you can’t find what you are looking for then you need to find Tim Brownlaw. The code guru of the internet. By the way did I mention that he is the owner of www.advancedwordpresstutorials.com

Multi Widgets

Creating Multi Widgets just got easier.

There are some good sites which explain this with some example code. Some good examples are available at: http://wpengineer.com/wordpress-built-a-widget/ If you do want to try out the example on that page you’ll need to do a couple of things.

Create a new folder under your ../wp-content/plugins .
Create a new file to save it in.
Add the Plugin Header – The example on the page doesn’t show one – it’s an example!
Add a registration function to keep things happy. What is there won’t work – or it didn’t work for me so needed this addition.

Now this example code worked after I performed the changes above ( Yes I am going to describe them in a moment!) . As it is an example – you are going to have to make some decisions on what you are going to call it etc.
Step 1.

Now as this is an example of a Multi Widget – I created a folder called multi-1 ( when I’m experimenting/Developing – I always put my plug-in code in Folders ).
Step 2.

Next is to copy and paste the sample code into a file – again I called this multi-1.php and this lives in the previously created folder with the same name.
Step 3.

Add in the following Plugin Header – Remember this is an example bit of code we are just seeing what it does…So some of the info doesn’t matter. The one that does is the Plugin Name.

Plugin Name: Multi -1
Plugin URI: http://www.somewhere.com
Description: Example of a Multi Widget
Version: 0.1
Author: Multi-1
Author URI: http://www.somewhere.com

The important line here is Plugin Name: Multi -1 as this is what you are going to see in your Plugin page – the plugin name called Mutli-1 – so you can find it to activate it. That always helps.
Step 4.

Add the additional registration code. This is a snippet of the original code from the example.

} And this is the code with the added function.

add_action(‘widgets_init’, ‘My_RSS_Widget_init’);
function My_RSS_Widget_init () { 
 register_widget(‘My_RSS_Widget’);
} 

Again this is just one way to achieve this...

The bit we changed is...

add_action('widgets_init', 'My_RSS_Widget_init');
function My_RSS_Widget_init () {
 register_widget('My_RSS_Widget');
}

So after you've done all that, you can go into your Plugins panel and activate the plugin called Multi-1 . Then go into Appearance -> Widgets and install a few instances of Multi-1. One thing I did check was the table - wp-options - to see what the new entries were. This new wp_widget class takes care of the creating and destroying of each widgets values. Which if I were to do this the old way.. I'd have to write the code to achieve the same thing. This is where this Class really shines. So now I ( and you ) can get busy creating multi widgets and not worry about all the "housekeeping" code.
Just remember...

This new class only works with WordPress 2.8 and above. Can't say it works in the upcoming WordPress 3 as it's not around yet... Everyone should be running the latest versions of WordPress anyway so if they want to use your new Multi Widget - they'll have no excuses not too! Ok, I think that covers most of it.. If not, please leave a comment and I'll get back to you on it. What I have described here is exactly what I have done and it works a treat. So it's a very good "framework" to build upon. Have fun!

Is wp_register_widget_control being deprecated?

I’m reading here and there on a few WordPress Codex pages that this function along with it’s mates is going to go the way of the Dodo bird. That’s my interpretation and not a quote.

While that’s fine, the replacement functions – in this case -  register_widget_control,  do not seem to  have the same functionality!

Which makes me wonder… Is there some undocumented way to achieve the same things using these “recommended” functions? Are they frowned upon?

This was noted in a blog I was reading regarding creating Multiple Widgets which also noted that the WordPress Widgets API has a heading for this with a few words but nothing more…

And here I am quoting from http://codex.wordpress.org/Plugins/WordPress_Widgets_Api#Widgets_-_One_or_many

Widgets – One or many

Widgets can be coded so that they can exist one time or they can exist multiple times. WordPress is doing the work for you to instantiate your Widget multiple times if you follow some rules.

And those rules are…… lots of white space on a webpage. Hmm, I must need new glasses or get some fancy filter for my LCD to show “Secret WP Stuff”!

So do I use the ‘wp’ versions and be able to achieve what I want, or do I follow the recommendations and just say “Sorry, I can’t do anything useful like I want to”?

Well, I’m up for the challenge and as long as these “not recommended” functions are there,  I’ll use them. It’s certainly vague, at best, as to what the WordPress Coders have in mind!

The worst thing that can happen is everything breaks! Hmm , I’ve never experienced that before!

Let’s see if  I can get my head around this Multi Widget stuff!

Of course there are other ways to “Skin an animal” – preferrably not a cat!

Addition: I’ve just found that in the resources on the wordpress codex page is the link to the site I’ve been referring to.

You can also Check out the party they had Dec 2009.

Update

Well I have found the reason! The reason is that from WordPress 2.8 and beyond,  multi widget functionality has been implemented using a new class called WP_Widget.

This is explained in the post – Mulit-Widgets

Cheers

Tim

Calendar

I like the simplicity and functionality of the Calendar plugin from Kieran O’Shea. Out of the box it was a bit hard to read for my aging eyes though. I wanted the calendar on its own “Page” but with my fixed-width 2 column theme it appeared “squashed”.

I decided to make a template for the calendar page removing the side bar. As I have navigation in the header this still left my visitors a way back to any of my main pages. The result was much easier to read. A few tweaks to font sizing and colors to match it to my theme and it worked out fine.

I was able to set up recurring events and single events quite quickly. One feature I will look for in the future is the ability to temporarily “exclude” a date from the recurring schedule on a one-time basis to meet “real life” situations when things may be cancelled that day.

As all the events I set up begin with the new year it can be viewed here American Legion Post 79 after Jan 1, 2010 as it is currently saved as a draft page.

Overall I’m very pleased with this plugin.

Give it a go if you need a calendar.

Lou

CodeBanter AR Plugin

?>
Now that text, should be contained within the light gray area, but as you can see, the description text is stepping out of bounds. Anyway, let’s see what we can do to fix this.

The best place to start when “investigating” these situations is to work backwards. So let’s see what the generated code is. You can do that by right clicking on the page and selecting the “View Source” option then pick on some keyword to help locate it.

This is what we get…

It is quite busy for a simple form with lots of tables etc. While I could whinge about it not being a CSS layout, the short story is “Well it works…”

Ok, what can we see?

No dead people around, so it’s not any of those… but there are three css class instances being used.

The Plugin.

This is Codebanters Aweber/Getresponse Subscription form Plugin available from http://www.codebanter.com/projects/. It might be something you find useful, but of course there are other ways to implement a subscription form. It seems though that it doesn’t quite like my site.

Now I’m not out to rubbish this plug-in. The fact that it’s broken on my site is probably due to my “not having” or” having” done something. So we are just looking at it from an instructional point of view. I’m fixing it so I might as well write about it too!

Don’t go busting out of my page.

As you may have noticed, the little newsletter subscription box up at the top right is “breaking out” off the page. For a Website on Advanced Worpress Tutorials, this doesn’t look good.
So let’s take a look and see what the problem is.

What’s the problem?

In a nutshell…. this is…. (I’m just firing up “The GIMP” to take a screen shot.)

codebanter_pagebreakout

CodeBanter Breaking out of the page

Keep in Touch!

So we have, dbx-box widget_recent_entries, dbx-handle and dbx-content.

Now, I wonder if they are defined anywhere? One rule of thumb is to wrap any thing that’s going to appear as a widget in the themes default settings. I know this firsthand from just having written my first plug-in ( to be documented later..). But this is also intended to be placed on a page/post so these styles have been included to allow you to change it’s appearance. Which is great if you know CSS!

So hunting through the files it appears that we have to define these styles ourselves. Which means adding some CSS to our themes CSS file.
That isn’t a bad thing, it’s just a bit of extra work we have to do and in fairness, most AR forms require some tweaking.

So let’s tweak!

After having a deep look at this I found two things..

  1. The long word of “AdvancedWordpressTutorials” exceeded the allowed width causing the breakout. So that just required the breaking up of the word by putting in spaces.
  2. The default style of the heading is dull and boring, so I defined an entry for .dbx-handle by adding it to the bottom of my theme’s style.css file. (described below)
 .dbx-handle {
color:red;
text-align:center;
font-weight:bold;
}

Summary

Hopefully this has shed a little light on how to find out why things break and how to fix them. This is not very detailed, mainly due to my solving and writing at the same time ( well now it’s documented ).