WordPress Text Widget: Create a custom sidebar box like this with text, an image and a badge.
RELATED POSTS:
How to Use the WordPress Gravatar Widget to Create an About Me Box in Your Sidebar
How to Add a Flickr Photo Widget / Badge to WordPress Sidebar
This Intermediate level WordPress tutorial shows how to use a text widget to customize a sidebar in WordPress. The final product of the tutorial can be seen here in the Business Blogging 101 website’s right sidebar. The HTML code used in this example is below.
NOTE: this video tutorial uses version 2.5 of WordPress. The latest version of WordPress is now 2.7.1. The only difference in this case is that in version 2.7.1 Widgets are now located under Appearance > Widgets (using the navigation buttons in the left side of the WordPress Dashboard). Here is a screen shot of the WordPress 2.7 Dashboard highlighting the new Text widget interface. In version 2.5, Widgets are located under Design > Widgets. Everything else is exactly the same. Use the comment form at the bottom of this post to ask a question if you get confused.
Widgets are a useful feature of most new WordPress themes. These themes are called “widget enabled” or “widgetized” themes. They allow you to add custom content to your sidebars with little or no knowledge of HTML or other code.
In an earlier tutorial, I showed how to add Flickr photos to a WordPress sidebar using the Flickr photo widget.
The example I use in this tutorial shows how to create a custom text box with a short biographical note. Part of that text is a link. In PART TWO of this tutorial, I show how to insert an image into the same custom sidebar box, along with a LinkedIn profile “badge”. You can use these Text Widget techniques to put whatever you want into your own WordPress sidebar.
HTML code used in this tutorial example:
<img src=”https://mcbuzz.wordpress.com/wp-content/uploads/2008/08/3058dc0.jpg” /><br />
I’m an <a href=”https://mcbuzz.wordpress.com/about/”>online marketing consultant</a>, specializing in Web 2.0 social media marketing, search engine optimization, pay per click advertising and WordPress websites for business.
<a href=”http://www.linkedin.com/in/mcbuzzmarkmclaren”><img src=”http://www.linkedin.com/img/webpromo/btn_viewmy_120x33.gif” border=”0″ alt=”View Mark McLaren’s profile on LinkedIn” width=”120″ height=”33″ /></a>
How to Use a Text Widget to Customize a WordPress Sidebar (Part 1)
How to Use a Text Widget to Customize a WordPress Sidebar (Part 2)
Filed under: WordPress Tutorials | Tagged: markmclaren, mcbuzz, sidebar, text, tutorial, widget, WordPress, WordPress Tutorials |
Free WordPress Tutorials - Business Blogging 101 
[…] Continue here: WordPress Tutorial – How to Use a Text Widget to Customize a … […]
[…] How to Use a Text Widget to Customize a WordPress Sidebar […]
This is just what I was looking for. I wanted to create a “Selected” or “Featured” post short roll instead of a long laundry list of categories. I was kinda baffled by text widgets but this looks easy. Thanks for showing the HTML – I never use the Visual editor just the HTML since i never really have to pull off anything too ambitious – I can just copy and paste the HTML formulas and fill in the blanks. Great post.
@hideoussunday
Glad that was helpful. Thanks for letting me know. Feedback is always appreciated!
Depending on how you want to use links in the sidebar, you might also find useful the tutorial called “How to Make Menus of Links Using the Blogroll – PART TWO” http://bit.ly/wp-menus-of-links-2
The Menus of Links tutorial was done with WordPress version 2.3, so the admin panel is slightly different than the current one, but the technique is still the same.
In the current WordPress admin panel, you will find that the Blogroll is now just called “Links” – under “Manage > Links” and the Blogroll categories are called “Link Categories”. To create a new link, click on “add new” at the top of the Manage > Links admin page.
It’s worth noting the change from “Blogroll” to “Links”, since that is the point of the Menus of Links tutorial. What used to be a purely bloggy feature of WordPress – bloggers could easily create links to other blogs in the sidebar – can be used much more generally to create links to anything, including posts or pages on your own site, hidden or private pages, PDFs, Word docs, etc.
I’ll copy and paste this here and at the home blog – thank you for the further suggestions – many times I find the terminology confusing and I persist in believing some function is not what I’m looking for based on bad inferences. The Blogroll is a good example: in my head I’d only use this to link to other blogs. Your suggestion sounds like what I’m looking for. Thanks again – this place is very useful if I haven’t said so before 🙂 and I DO check Lorelle and the forums for answers- but I like that you take the time to explain what all this stuff is – many take it for granted. I think people forget what it was like to start a blog for the first time and be faced with terms that sound very similar- like badges and buttons and categories and tags.
Sounds good! Thanks for the kind words. Let me know if I can be of further assistance.
Mark McLaren
Last time I’ll fill up your comments section (but no promises). Using the Links (formerly Blog Roll) for creating a Featured Posts list did exactly what I was hoping to do. Thank you for the suggestions and instructions- makes it less daunting to try putting something new on the blog (for fear of messing something up).
This is a very helpful post. I had been wondering about how to do this for a while. Thank you very much. The only thing I am not sure about is how to make it show up with the same borders as my current theme. The widgets I add all show up in one box. My website is here: http://www.simplisticthoughts.com. Any help would be great.
Thanks,
Nick
@Nick
Thanks for your comment. I will take a look at your theme.
Question: Is your blog hosted on a 3rd-party hosting site like Yahoo! or GoDaddy or http://pair.com or … ? If so, you have the ability to edit your theme files, so conceivably you could change the format of your widgets in the sidebar. I’m not sure why everything you add to the sidebar using text widgets would show up in one box. Have you tried adding more than one text widget to the sidebar?
Mark McLaren
Hi Mark,
The blog is hosted by bluehost so I can edit the files. Most of the wdigets are are in the script, but if I add more than one of my won it ends up in the same box bordered box. For instance if I add two text boxes they show up in one bordered box with a dotted like in between them. It makes it difficult to distinguish the two.
This Is Awesome!
how do u put music on ur website?
My Blog Is From WordPress
@gigsdx
If you host on a third party like GoDaddy, Yahoo! or http://pair.com you can install widgets and plugins to play music from your blog.
But if you use wordpress.com you can only use the widgets and plugins they provide.
I don’t see any music player widgets available right now on wordpress.com.
Take a look at the links on this page.
http://widgets.wordpress.com/?s=music
You can click on the post titles listed there. It looks like the best one for you would be Sonific SongSpot — if you host on a third party server. But I just read the page linked to from there and it doesn’t seem to be available any more. Too bad!
Sorry I don’t have a solution for you. Let me know if you find one.
Mark McLaren
Hello Mark
I´ve sent you an e-mail yesterday. Maybe it´s better this way.
My question is: Do al WP themes support widgets?. I am using the Blix Theme and can´t insert text widgets. If this is the case, is there a way to enable widgets for this theme?.
Thank you for your help!.
Carolina
Hi Carolina,
I created a separate post as a reply to your question. You can read it here: Text Widgets, Digg 3-column vs. Blix 2-column WordPress.com Themes
Hi Mark,
I manage to upload a photo to a sidebar. What do I do to wrap text around the photo (not in the blog roll but in the sidebar).
Cheers /John …great site you are running here, one of the contenders for top position in my bookmarks list 🙂
Hi,
My objective is to have different sidebar content in different category pages. For example if I have one category with shoes as the theme I am keen to have ads and content related to shoes in the sidebar. I would like to set up another category e.g. with hats as the theme and then have ads and content related to hats in that specific category sidebar. How do I approach this?
Great site, Mark! It rocks!
Cheers /John
@johnsand
This can certainly be done with WordPress, but you or someone else would need to create custom page templates using PHP code – or create a special kind of page to display categories – in order to do it. Ideally, there would be a premium WordPress theme you could buy with a page like this already built-in, so that you could use it without having to know PHP yourself.
I did a little looking around and could not find any themes with a feature like this. That’s not to say that something like this is not available. I’m just not able to tell you where to look. I would suggest maybe writing to some of the top premium theme builders like StudioPress.com, WPRemix.com or WooThemes.com. Tell them what you want to do. Maybe they have a theme that can do it.
Another alternative would be to pay a WordPress consultant to build the page(s) for you. I offer this kind of service. There are also lots of other WordPress coders that can do the same. If you are interested, let me know.
Before you go that route, you need to be clear about what exactly you want to display on these special pages. The WordPress “page” that displays results for a single category is not really a WordPress “Page” in the strict sense. It’s an automatically generated listing of all the posts on your blog that fall under a specific category. Unless you are a PHP coding wizard, you don’t really have control over what displays in the body of these pages. You are always going to get a listing of blog posts, but it is possible to have a different sidebar on every category page. It’s also possible to have a different sidebar for every single post that falls under a specific category. Is that what you want?
Or maybe you want to have complete control over what appears on a page that talks about, for example, shoes, and you want to have a sidebar on that page that has related content. That would be a WordPress “Page” in the strict sense. The content would not come from your blog posts, it would be created separately – just as I have created a page on the Business Blogging 101 site called “About” https://mcbuzz.wordpress.com/about/ There are no blog posts on that page. It’s a traditional, “static” web page. It’s not part of the blog. Making a page like this is easier than making a page that shows a specific sidebar for a category listing on your blog.
I don’t have a tutorial about how to do any of this, but there are some decent related tutorials available on the Web. Here are the ones I know of: http://delicious.com/mcbuzz/sidebar+wordpress+widgets (Unfortunately, these are not videos.)
Mark, I managed to solve the problems which I posted above. I think they were related to the free theme I used. I have changed to another theme which is properly supported (and developed it seems) and all current issues are solved. Thanks again for taking time to check the issues I brought up recently. That and your tutorials have helped A LOT to get me up the ranks on establishing my first site. Thanks!
Cheers /John
Mark,
Great site! I was on the fence whether to make the switch from Blogger to WP and your site convinced me.
I created some text widgets with graphics but they are not behaving. There’s a post title for you, “Widgets Behaving Badly”.
The link from the text widget seems to bleed over the widget below. I can’t seem to figure it out.
If you want to see what I mean, go to http://inventionaddict.com/
On the right sidebar my “Blogroll” links to the text widget above it. Really weird.
Great blog. Thanks for all you do.
@inventionaddict
Thanks for the props. Much appreciated!
As for the widget weirdness on your site, I see that. Very odd. Although, there is something similar on this (Business Blogging 101) site.
If you look at the right sidebar under the Vodpod video widget you’ll see a left and right arrow that appear over the WordCamp Seattle heading in the widget below. But if you click on these, they go away. They belong to the Vodpod widget. I guess that’s not exactly the same. Yours is weirder.
Have you tried changing the order of the widgets or putting that one in the left sidebar? It must be a CSS issue, but I would need to look more closely. Will do later on tonight or tomorrow.
Hi Mark,
thanks for all your helpful WordPress tips. I have been trying to figure out for a few days how to put either a downloaded Paypal donation widget on my sidebar or just a simple Paypal button but nothing is working. I followed your instructions from the video above for the linkedin button thinking it would work the same for my Paypal button but it didn’t work at all Any suggestions? Here is the script Paypal gave me to copy and paste. What can I do with it so it works?