Conditional Sidebar Widgets – Making a Website More Flexible

Dancers displaying flexibility.
Dancers displaying flexibility. WordPress frees you up for similar quality of artistic flexibility

If you have your own website, whether it’s hosted professionally, or it’s a freebie, it’s nice to have a certain amount of easy programmability.

On WordPress sites, for instance, we might see a sidebar next to our articles. For beginners, this sidebar will likely remain unchanging. It might contain a search input textbox, a list of recent blog articles and an advertisement or two. It might also include links to social media sites.

WordPress comes with the ability to add widgets to your sidebar depending on one of a number of criteria, like tags, categories, authors and others. This allows you to control which ads show up on which articles. It’s pretty cool and relatively easy—all beginner-level stuff.

A Love of Programming

I understand that not everyone is interested in programming. And that’s what is cool about the WordPress sidebar widgets. I’ll get back to those in a moment.

I’ve always loved programming. Even when my late father worked for the NASA contract facility for Documentation Incorporated (Doc.Inc.) in the 60s, and I experienced computer flow charts for the first time, I was a geek at heart.

For years, I rented website hosting space and programmed all my websites by hand—HTML, CSS and PHP functionality. Though that was lots of fun, it was also time consuming. Life begged me to find a better, easier way. When finally I moved all my websites to the free platform at WordPress.com, I no longer had the unique, professional-sounding addresses I had once enjoyed, but that was a small price to pay for making everything far easier. WordPress makes it easy to achieve website flexibility without having to do all the programming yourself.

This cool piece of programming on a WordPress site involves the ability to place code in my sidebar conditionally. I have over 20 titles in my own pen names. If my blog article involves climate, I can display one or more of my climate science books in the sidebar.

This variable functionality is easy to include on the widget page of the dashboard of wp-admin for your WordPress site.

https://%5BYOURWEBSITE%5D.wordpress.com/wp-admin/

WordPress Flexibility

WordPress admin menu, widgets
WordPress admin menu, widgets.

The following discussion assumes that you already have at least one article with the tag or other criterion with which you will be controlling the appearance of the desired widget advertisement or notice. This also assumes that any picture you wish to use in that widget has already been uploaded to your WordPress media library.

To utilize this powerful tool, from your WordPress admin menu, select “Appearance” and then “Widgets.” This is where you control what appears in your sidebar and possibly other areas of your page, depending on the WordPress theme you’re using. Each theme has its own number of page elements. Some come with multiple sidebars and multiple page footers.

The illustrated sidebar area (below) is rather Spartan. It’s called merely, “Widget Area.”

WordPress Widgets page.
WordPress Widgets page.
WordPress, add Custom HTML widget dialog box.
WordPress, add Custom HTML widget dialog box.

The available widgets reside in the center of the screen. As you can see, there are quite a number of exciting tools you can include in your own sidebar. Some themes default to several widgets which can be removed, if you desire. This theme defaults merely to a “search” tool. Scroll down until you come to the “Custom HTML” widget. Click on it, and then click “Add Widget.”

As always, WordPress may change the appearance of their admin page or any of the tools used, so modify these procedures as needed to achieve the same end result. If WordPress is markedly different, please let me know and I’ll update this article.

WordPress sidebar "Widget Area."
WordPress sidebar “Widget Area.”

In the Widget Area (sidebar), your new Custom HTML widget is added, ready for you to add a title, if you desire, plus text and HTML code, as needed.

A text-only widget can work, but people respond far more to pictures. So, if you have a picture already uploaded to your WordPress site, you can add it here in code. This is really pretty simple, so don’t freak out that this includes a tiny amount of programming. We will go over the beginner’s level HTML code in just a moment.

However, we need some information before we begin.

WordPress, admin menu, media library selection.
WordPress, admin menu, media library selection.

First, we need to find the location of the desired picture. This assumes that the picture you will need is already uploaded to your WordPress website. So we don’t lose our work so far, simply click on “Media” in the admin menu, then Right-Click “Library” to open in a new tab. From your gallery of pictures already uploaded to your website. Click on the desired picture. This opens up a pop-up form with a number of details concerning the picture. On the bottom right, click on the “Copy Link” label. This will select all of the address for the desired picture. Either press “CTRL-C” on your keyboard, or Right-Click and select “Copy” from the pop-up menu.

WordPress, media library, grabbing a picture's address.
WordPress, media library, grabbing a picture’s address.
WordPress, widget text and code.
WordPress, widget text and code.

The Custom HTML widget shown here now has a title, some text, a link to the desired destination (in this case the book’s sales page), and the code for the image to be displayed, inserting the URL address we just copied into the source (“src”) attribute.

For beginners, here’s how this code works. The <a> tag has to have a start and an end (</a>) to enclose the affected area—the picture or text that will link to the destination web page. The <img> image tag does not require an end, because it doesn’t need to modify something else; it stands alone. So, the code for our linked picture takes this basic form:

<a><img></a>

For the <a> tag, we need to add the destination address, so that when the visitor clicks on the picture, they will be directed to the web page where the book is sold. This is handled by the “href” attribute and the value assigned to it within the quotation marks; this is the destination for the visitor’s click.

In the <img> tag, we need the location of the picture assigned to the “src” source attribute. So, we type in the needed information in a form similar to this:

src=”http://websitename.com/picturename.jpg”

I’ve added additional code—width=250—to constrain the picture to the desired width in the sidebar.

Finally, I let the visitor know that they can click on the picture to find more information.

That’s all the “hard” work. Now comes the fun part.

Before saving the widget, click on the “Visibility” button next to the “Save” button.

WordPress, Widget Visibility, conditional on Tag settings.
WordPress, Widget Visibility, conditional on Tag settings.

Here, we won’t explore all of the possibilities. Simply ensure that the first drop-down list contains the word “Show”, then click on the “Select” button and choose the type of criterion you wish to use to control whether or not the widget appears. On my website, I use the “Tag” selection. This requires that the tag already be in use, otherwise it won’t show up on the list of available tags (the next drop-down list). If your desired tag has not yet been added to your web page, you will need to add the tag and update or publish the page.

For example, if my article is about miracles, I may want to display an advertisement for my book, The Science of Miracles. To enable the appropriate ad widget, I add “tsom” to my list of tags for the targeted article. Then, when someone visits the blog article on miracles, they will see the cover of the book, The Science of Miracles.

I hope this helps those who have their own WordPress sites. If you have any questions or concerns, please let me know in the comments section, below.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s