Styling WordPress with Widgets and Plugins€¦ · The page-item-103 is the item you want, as that...

Styling WordPress with Widgets and Plugins Linda Goin

Styling WordPress with Widgets and Plugins If you’ve uploaded and installed Wordpress (WP), you’re probably anxious to style your site with widgets and plugins. In this article, Linda provides tips and tools that can make these design options work best for you.

Itchy Fingers If you’ve already uploaded and installed WordPress (WP), I’ll bet your fingers are itching to install and use widgets and plugins. Really, the best way to figure out those options is to play with them for a bit. If you open a new window (or tab) that shows your home page, you can install and activate widgets and plugins in one window and refresh the other home page window to learn how those tools look like as you go along. The worst issue I’ve run across with clients is that they feel the urge to install every widget and plugin that comes with WP or that is offered online. It is NOT necessary to use every widget and plugin that you find. In fact, some plugins may prove difficult to upgrade if the developer does not stay on top of WP upgrades as well. Keeping it simple from the start can make your design life easy so you can concentrate on content. That said, I’ll go over a few widget tips. I already provided a list of plugins that I use consistently in the previous article, but there are a few more that I want to add this week as well.

Take a look at your widgets If you still have the default template on your site, you will notice that the only place you can install widgets is in the sidebar. The following image is from a default template, but I have added the Hybrid Hook plugin from Justin Tadlock’s Web site for his Theme Hybrid. This plugin adds a new dimension to the design process from the developer’s angle, but only if you’re using one of Justin’s themes. I’ll cover this plugin more in depth in a moment. For now, take a look at what this plugin does with the default WP theme when you click on “Appearances” in the left sidebar of your dashboard and then click on “Widgets”:

Copyright © 2010 DMXzone.com All Rights Reserved To get more go to DMXzone.com

of 16

http://themehybrid.com/themes/hybrid/hybrid-hook


Without the Hybrid Hook plugin, you would not see all the “hook” link availability that you see in the upper right of the image above. You would only see the top tab for the sidebar. Without the Hybrid Hook, you could only add widgets to the sidebar. Even then, you might notice that your right sidebar on your homepage is filled with information, such as the one shown below (without a static page):


of 16


The image above shows pages already constructed for this site, archives, categories, a blogroll and Meta information. While you could add more widgets to that sidebar, I’d rather show you how to eliminate some of the information already on that page.


of 16


How to Eliminate and/or Alter Current Sidebar Widgets If you want to eliminate, for instance, the pages that show on the right sidebar or show just one or two pages, then you’ll need to use the “Pages” widget. Click on the arrow on the sidebar tool in the right column of the widgets page to open that link:

Next, go to the “Pages” widget, grab it when you click on it and drag it into that sidebar space. A dotted box will appear when you drag the widget to that space. If you have widgets already installed in that sidebar, you may notice that you can drag those widgets around to rearrange them. Sometimes, though, you may need to close the sidebar and re-open it to be able to move those widgets around. Why? Who knows. Trust me, it does work. After you drag the page widget to the sidebar space, that widget will open to look like this:


of 16


Now you have options on what you want to show on that sidebar. You can name that portion differently (instead of “Pages,” you might want to say, “More Information,” for instance). You then can sort the pages by page title, order or ID from that drop down menu under the “Sort by:” link. You also can exclue pages by ID – as many exclusions as you want, separated by commas. If I want to eliminate all pages from the sidebar, then I need to discover their ID numbers to install them in that space. One easy way to discover those ID numbers is to “show page source” on the home page window and search for “Pages” on that coded page. You then will find a list of pages with the code that looks like this: <li class=“page_item page-item-103”><a href=“YourWebPage” title=“Sea Adventures”>Sea Adventures</a></li> The page-item-103 is the item you want, as that number 103 is the page ID. When you add those page Ids to that box shown above, you can eliminate those pages showing on the Web site. I added all the numbers included in that list for pages, added them to the “Exclude” option, saved that option and refreshed the home page. This is what happened:


of 16


Notice that every original item on that sidebar has disappeared along with the pages. If I decide to use the pages widget to show one or two pages, the other options still disappear:


of 16


As you can see from this experiment, when you add a widget you can eliminate the original default format design. Now, you can add more widgets and you even can replicate the original design by adding those widgets from the widget dashboard. NOTE: If I want to put the “Welcome” page before the “Destinations” page shown in that Pages link, I would use the page ID to alter their order, since I developed the Welcome page before I developed the Destinations page. You also can adjust the page order by going to that page and altering the order that it falls in development. More about pages in a later article.

Widget Issues: Links Since it’s often more fun to experiment with widgets than to be told what to do, I’ll not spend too much time on the default WP widget options. Instead, I’ll cover an issue that I know clients have encountered time after time in the past. This issue centres on links for the sidebar, because the link widget does not allow you to add links. Instead, you must create categories and manually add links, then return to that Link widget to create your link scenario. First, if you want to add links to the sidebar (or in any other section of the site if you are using another template), just drag that link widget to the area you want for placement. In this case, I’m still using the sidebar:


of 16


Notice that the Links widget is now below the Pages widget in the sidebar window. The Pages widget is closed, as I saved it and closed it. The Links widget, in this particular site, currently has only two options in that drop-down menu: “All Links,” and “Blogroll.” Here’s how I can change that issue:

1. Go to the “Links” option in the left sidebar of your dashboard. Click on that option to open it. 2. Click on “Categories” within that “Links” area to create more categories. 3. When you create categories, you also create options on where to store your links, and those options

will show in the widget as well.


of 16


In the image above, the only link category that currently shows is “Blogroll.” I can change that name to “News” or some other title by clicking on that “Blogroll” link and altering it in the link category area in the middle of that screen above. I also can create a new category by adding a category name in that middle area. Don’t worry about the “slug,” as WP automatically creates the slug for you (unless you want to alter that slug name, but I can’t find a reason to do this yet). The next part, the “Description,” is very important, as you want to fill that area with keywords or keyword phrases for search engines.


of 16


I took a snapshot of the right section of the link categories page to show what this section would look like after I added a “Bahamas” category and changed the “Blogroll” category to “News” above. Note the arrow pointing to the click radio box by the “Bahamas” category. This box will enable me to delete that category later if I want that option. But, the News category (originally the “Blogroll” category) does not have that option – this is because WP does not want you to eliminate all link category options. You always will have one link category (no matter what you name it) despite your desire to eliminate that option. If you do not want those links to show on your Web site, then don’t add the link widget. This is easier than going into WP code to eliminate those link options. NOTE: The descriptions above were added in the lower box on the “Add Category” option. Note that I added the category name as well as the Web site name for search engine optimization (SEO). Now, before those links can show up on your link options, you must gather some links. I added three Bahamas links to the link page by going to “Links” in the left sidebar of the dashboard (same area as the link categories) and by clicking on “add new.”


of 16


The image above shows how I added one link to that Bahamas category. Fill in the name of the site, add the URL (Web Address), provide a description (which may or may not show up on your Web page depending upon your preference or the template design), and click on the category you want that link to belong. Note that in the right column above, you also have an option to keep a link private. This option can enable you to build a link base that is similar to bookmarking if you choose. You might notice, also, that I build the description from the “Name” area – in other words, the “Name” and “Description” are the same. If I chose to add the description to the site so that it is visible, I might be more or less descriptive depending upon the design. Since I don’t often add the descriptions that are visible, I keep life simple for myself (using the name for the description on a link also is what I would do when I add a “title” to linked code). You can scroll down on that page to see more options, but I mostly ignore them except for the “Target.” For accessibility purposes, I never use the “open new window” option. I always have the link open on that same page. Additionally, if you scroll to the bottom, you will see options that allow you to add a site’s RSS, an image and more. Play with those options to see what you like and you also can learn more about those accessories at WordPress Codex or through WordPress Support for Links. Now that I’ve added a new category and some links, I’m going to return to the “Appearance” tab in the right column of my dashboard and click on “Widgets” again. I’ll go to the Sidebar area in the right column, open it, and click on the arrow of the Links widget to open that widget.


of 16

http://codex.wordpress.org/Links_Manager

http://en.support.wordpress.com/links/


Now, when I click on that drop-down menu, I see the Bahamas category. I choose that category and I decide what I want to show in the list below that menu. I’ll save it and close the box and check the homepage to see how everything looks:


of 16


The three links I chose for that homepage now show up under the Bahamas category, without descriptions and images. If I want more link categories, I simply add more link widgets. That’s the beauty of WP widgets, as you can add as many links, text boxes and other widgets that you want – so, there’s no need to over amplify the widget choices. Just use what you need and leave the rest behind.

Hybrid Hooks If you downloaded and installed the WP plugin, Hybrid Hook, you have even more options to play with your theme, as long as the theme belongs to Theme Hybrid. In other words, you can download the Hybrid Hook and install it, but it won’t work unless you’re using one of Justin Tadlock’s themes. But, note the options shown below, and think about all the things you can do to that Web site if you can add text, PHP and priorities to your Web site (Warning: You also must be using version 2.8 or higher of WordPress to use this plugin):


of 16


http://themehybrid.com/


While you can use the tabs shown above to add to your pages, I find it more useful to go to the “Hybrid Hook” link under the “Appearance” tab in the left column of my dashboard. When you click on that link,


of 16


you’ll see this page:

The first arrow above shows where the Hybrid Hook option page is located. The second arrow points to the options, which are the same as they are in the previous image, but they are laid out in boxes with an “Execute PHP?” radio box to the bottom right of each option. Additionally, you can see where you can place priorities here in the radio boxes to the left of the execute PHP option under each category. Finally, the third arrow points to documentation and forums that you can use, but only if you’re a member of the Theme Hybrid club. I mentioned in a previous article that joining the Theme Hybrid club costs a small fee, and it is worth every penny for support on Justin Tadlock’s themes as well as for any plugins and other options that he provides. But, today I noticed that his fee to join is nothing – nada, zip, no money. I would suggest joining ASAP so that you can gain access to all the support and documentation you need for those themes and plugins, as those themes are the ones I’ll be working with in this series of articles. Join now to gain access to the Hybrid Hook documentation as well, as it is easy to understand and provides more explanations than I can add here, That said, I will provide a tip about the PHP code and the sidebar links for Hybrid Hook – you can add PHP to a text widget after you drag that widget into a hook link in your sidebar, and it will work. For instance, if I want to add a PHP script that for Google Analytics, I can add a text box widget to the “Hook: After Footer” link in my right sidebar, then add the code (no need for a title), save it, close the box and it will work (NOTE: Google Analytics can take up to 24-48 hours to show stats, so be patient to see if the code works for you – if not, then at least you have access to forums where you can learn if others had this problem as well).


of 16

http://www.google.com/analytics/


More Plugins When you go to the Theme Hybrid site, you may learn that some widgets do not work with those themes. But, in addition to the plugins I mentioned in the previous article, I discovered some plugins that do work and that can add a dimension to your site as well:

• Video Widget: Add some YouTube/Daily Motion/Google sidebar videos with this plugin, based upon Executable PHP widget for multiple widgets, YouTube widget for the idea, and Video Embedder for the video HTML library. You can see that widget in action in the upper right column at Appomattox News (refresh the page to see new videos).

• Hybrid Hook Widgets: Want more links in your left sidebar? Go for it with widgets that compliment the Hybrid Hook. While you’re at the Theme Hybrid site, you might want to pick up on some Hybrid Tabs as well.

• AddtoAny: This button allows readers to add your article or site to any number of social media sites. The developer stays on top of WordPress upgrades, too, so expect to use that upgrade option for your plugins with this widget (that’s a good thing). You’ll have settings for this widget, so take time to make sure it’s placed on the page where you want it (after or before a post, etc.).

Conclusion I talked about Child Themes in the previous article, and now that membership in Theme Hybrid is free, you might want to join to learn more about Child Themes there as well. In the next article, I’ll begin working with a theme from Justin’s choices (most likely Theme Hybrid), and I’ll show you how easy it is to leave that original code alone. Seriously – it’s easy. If I can do it, anyone can do it. In the meantime, here are some more links about WP widgets (in no particular order). Note that some of these articles and videos already seem outdated, as WP is moving right along in development of their widget aspects:

• WordPress Plugin Directory: I’ll repeat my previous warning here: Not all plugins are created equal, even if WP lists them in a directory. Keep it simple, utilize widgets rather than plugins when possible, and your life will be much more relaxing.

• Widgetbox: Once again, choose carefully. Just know this resource is here if you need it. • Working with WordPress Widgets: Watch this video to gain some insight into how to use WP widgets. • How to use Wordpress Widgets: Another video that may help you learn more about widgets. • How To Use WordPress Sidebar Widgets: I included this short tutorial, as it shows what the text box

widget looks like.


of 16

http://www.nikohk.com/plugin-wordpress-video-widget/

http://www.appomattoxnews.com/

http://www.appomattoxnews.com/


http://www.addtoany.com/

http://wordpress.org/extend/plugins/tags/widget

http://www.widgetbox.com/

http://wordpresstraining.com/videos/customize/working-with-wordpress-widgets/

http://www.slideshare.net/msincome/how-to-use-wordpress-widgets

http://www.powertheme.com/tutorials/how-to-use-wordpress-sidebar-widgets/

Styling WordPress with Widgets and Plugins€¦ · The page-item-103 is the item you want, as that...

Documents

Transcript of Styling WordPress with Widgets and Plugins€¦ · The page-item-103 is the item you want, as that...