The Simple Image Link has been updated to allow the image to be displayed based on the user’s role.
This replaces the ‘Display image’ checkbox in earlier versions.
This is useful for WordPress, including MU, installations which allows users to login.
This functionality was inspired by Praveen’s comment and initial code.
Thanks for all the feedbackon the plugin to date.
With a few lines added to your WordPress theme’s style sheet you can transform boring widget titles into a smorgasbord of colors, small fonts, big fonts, backgrounds, borders – you name it. This post will show you how.
But please no flashing text (i.e. blinking text).
WordPress themes normally apply the same style to all of the widget titles within your sidebars.
With some additional entries to your theme’s style sheet, you can give each widget title its own unique appearance, transforming the (boring) version above to:
How do you add entries to your theme’s style sheet?
It’s as easy as 1, 2, 3 & 4.
When adding entries to your theme’s style sheet, it is best to add them after the existing content.
The style sheet entries used to achieve the above are:
Subscribe.widget_recent_entries .widgettitle
{
color: blue !important;
font-size: 1.7em !important;
}
.widget_categories .widgettitle
{
color: white !important;
background-color: blue !important;
font-weight: bold !important;
padding: 10px !important;
}
.widget_pages .widgettitle
{
border-bottom: 2px solid black !important;
}
.widget_calendar .widgettitle
{
font-variant: small-caps !important;
}
So how does this work.
When a widget is rendered to HTML, it is done so using the following format:
<li id="widget-id" class="widget widget-specific-style"> <h2 class="widgettitle">Widget Title Text</h2> ... </li>
Each widget has its own unique ID and class specific style, as well as the generic ‘widget’ class.
If we look at the recent posts widget, we see:
<li id="recent-posts" class="widget widget_recent_entries"> <h2 class="widgettitle">Recent Posts</h2> ... </li>
So we can style any ‘widgettitle’ classed item which follows a ‘widget_recent_entries’ classed item as is our want.
So to achieve our pimped version, we added the following:
.widget_recent_entries .widgettitle
{
color: blue !important;
font-size: 1.7em !important;
}
The period character (.) before the names ‘.widget_recent_entries’ and ‘widgettitle’ is critical since this is used to denote a class name.
You will note the use of “!important” which forces that specific setting to be used. If this was not used, then the entry may be overridden due to the rules used to determine the precedence of style sheet entries.
Now consider the categories widget, we see:
<li id="categories-227973261" class="widget widget_categories"> <h2 class="widgettitle">Categories</h2> ... </li>
So to pimp the categories title we add the following:
.widget_categories .widgettitle
{
color: white !important;
background-color: blue !important;
font-weight: bold !important;
padding: 10px !important;
}
Now the categories HTML is slightly different to the recent posts widget in that the ID is qualified by a number, 227973261 in this case. The recent posts widget can only be used the once in your sidebars, whereas the categories can be used multiple times, and the ID, which is automatically generated by WordPress, uniquely identifies that instance of the widget.
Using the class name within the style sheet will cause all widgets with the same class to be affected. So if we added another Categories widget to the sidebar, its title will be styled the same.
How can you pimp the category titles differently? I’m glad you asked.
If we look at the page source we will see that the categories widgets are rendered as:
<li id="categories-227973261" class="widget widget_categories"> <h2 class="widgettitle">Categories</h2> ... </li> <li id="categories-234397751" class="widget widget_categories"> <h2 class="widgettitle">Another Categories</h2> ... </li>
We target individual category widget instances by using the widget ID instead of its class, so the style sheet entries become:
#categories-227973261 .widgettitle
{
color: white !important;
background-color: blue !important;
font-weight: bold !important;
padding: 10px !important;
}
#categories-234397751 .widgettitle
{
color: white !important;
background-color: red !important;
font-weight: bold !important;
padding: 10px !important;
}
The hash character (#) is used to denote an ID of an item within the page. So, we are styling any item which has a class of ‘widgettitle’ which follows any item with an ID of ‘categories-227973261 or ‘categories-234397751′.
So now our sidebar looks like this:
Whilst the widget appears within your sidebar, the ID will not change. However, if the widget is deleted and then recreated, the ID will change. So any existing ID based style sheet entries will no longer have any affect.
I would save the original theme’s style sheet and also record any changes you make to this file. This will allow you to easily identify what changes you have made and why, so if your theme is updated, which will replace the contents of the style sheet within the theme, you can easily remake your required changes.
Have fun pimping your widget titles!
This post was inspired by a comment posted on our Simple Image Link Plugin page. The original comment is here and my response here.
So you want to put an ad or an image in your sidebar. And you want it to link to another site. And you want to do it easily, without having to muck about with the code in the text widget.
While there are many WordPress plugins that offer sophisticated ad management, there are not many that offer a simple solution.
Well, we are pleased to announce a new WordPress Plugin – Simple Image Link.
WP Simple Image Link lets you easily add images to your sidebar, be they advertisements, buttons of support or buttons of protest without the need for any HTML.
So instead of having to put all this code in your text widget:
All you have to do is fill in this form:
And Voila! It is easily added to your sidebar:
Also, imagine if you have 8 or more text widgets in your sidebar. It would be hit and miss trying to locate the correct image as they can not be named; was it on the 6th, or the 5th? Nope it was the 7th widget.
So if you include eight Image Link widgets in your sidebar, it is easier to figure out which is which because you can name them:
Pretty simple don’t you think?
You can download WordPress Simple Image Link and read about it in more detail on our download page.
If you can think of any ways to improve this plugin or just have questions, please leave us a note and we’ll get back to you asap.
There have been so many great posts written about WordPress last month, and rather than rewrite what’s already out there, I thought I’d point you to my favorites. If you know of any terrific posts I’ve missed, please let me know!
The State of the Word
Matt Mullenweg’s State of the Word presentation at
WordCamp 2008 in San Francisco. Video (approx 47 minutes).
WP Super Cache 07 can expose you to duplicate content penalties
A bug in the WP Super Cache plugin affects every blog that uses it in “ON” or full “Super Cache” mode, and has URLs that end with the “/” (forward slash) character. If the plugin is on “half on” mode, you’ll be fine. Read
Donncha’s post if you want to know how to fix it.
Pimping your WordPress theme for humans
Read Rae Hoffman’s eight tips to pimp your WordPress theme; that is, make it more SEO friendly.
Most desired WordPress Hacks
This post focuses on 11 commonly requested theme hacks when developing WordPress sites.
How to easily make WordPress archives that rock
An archives page is an essential part of a blog, so if you don’t have one, you should consider creating one. If you don’t know how to, read this.
How to upgrade WordPress using subversion
A detailed explanation and how-to on upgrading WordPress using Subversion
Designing for WordPress
Chris Coyier offers a three-part series (including video tutorials) on creating a WordPress theme.
Create a WordPress theme from scratch
Another three part tutorial series, this time from Kailoon, covering: structuring, designing in Photoshop, slicing, coding into fully CSS based html, and finally WordPress implementation.
Author comment styling in WordPress
This step-by-step tutorial shows you how to edit the default WordPress theme to make author’s comments stand out from the rest.
Building a better blogroll
This tutorial shows you how to improve upon the concept of a blogroll by not just listing sites, but dynamically pulling recent headlines from them. The post walks you though the technologies, design, markup, CSS, and ends with fixing IE to ensure the thing works.
Widget best practices
A checklist of widget best practices from Stephan Spencer
WordPress Theme Releases
There were nearly 50 themes released for WordPress in August according to Ajay at Weblog Tools Collection. If you’re thinking about changing your blogs look, head on over. Or, just subscribe to their feed to stay up-to-date.
Clean up your backend
Michael Gray suggests 15 WordPress plugins to help you clean and maintain a secure and orderly backend.
30+ Plugins to make your WordPress blog more social
Whether you want your readers to bookmark your site across various services or get to know you better, this post by Sean Aune shows you where to start when it comes to selecting plugins for social media and WordPress.
8 easy SEO plugins for WordPress
Joost de Valk shows you which plugins to use if you want to increase your blogs performance in search engine rankings. According to Joost, some of the blogs he did this on had 50% more traffic from search engines within two weeks.
Theme Authenticity Checker
Ever wondered whether you’ve got malicious or unwanted code on your blog? This TAC plugin scans all of your theme files for advertisements or dangerous JavaScript inserted into legitimate themes by third party theme download sites.
WordPress Developer Assistant
Ever wondered where that action or filter hook gets called, or thought how great it would be if you could output a full listing of PHP gloabl variable values on each page so debugging would be easier? Then, this is for you. WordPress Developer Assistant is a toolkit that makes life as a WordPress developer easier.
Archives by Selected Categories
This plugin generates a list of posts separated by category (you can choose to display all, or just select categories). Most recent posts are listed first, and dates are listed beside the post.
Woopra WordPress plugin
A new WordPress Integration Plugin which brings Woopra statistics right into your WordPress dashboard.
UserAgent Spy WordPress plugin
UserAgent-Spy is a WordPress plugin which displays the user’s Operative System and Web browser in the comments section.
Broken links Remover wordpress plugin
Allows you to fix bad/broken links, both text links(anchor tags) and image links (img tags). It blocks the display of such links on your WordPress post/page, until you fix them.
Yoast Breadcrumbs
Breadcrumbs are the links, usually above the title post, that look like “Home > Articles > WordPress SEO”. They allow your users to easily navigate your site and they allow search engines to determine the structure of your site more easily. If you’re not using it, you should be.
Twitter Tools 15b2
New beta version of Twitter Tools is ready for testing. Twitter Tools is a WordPress plugin that creates integration between your blog and your Twitter account.
When you self host your own WordPress blog you have access to the most basic of WordPress functionality.
In order to get the same functionality, and more, for your blog as that provided by WordPress.com, you will need to install some of the many WordPress.org plugins.
We have written a beginner’s guide to FTP for WordPress (1.39 MB PDF) which will show you how to:
If you have never used an FTP client before, or don’t even know what FTP stands for, and fish transferring ponds it is not, this guide is for you.
