Todays Blogging 101 assignment was to add and/or customize two widgets, one text-based and one image-based. Which sounds like great fun.
The main reason why I choose my theme is that it appeared to provide a “place” for all of my content. Maybe I am just a little bit of an organization freak, but hey, unlike home and real life which I feel I have no control, I can try to be a little more proactive here.
My blog design includes 4 widgets for content, the sidebar, and 3 widget areas along the bottom of the site. My biggest challenge was not finding a place to put my ideas, but to ensure that there was not any duplicate content on the home page.
Here is the current layout of my widgets:
- Widget 1: Large 700 X 400 Image linking to a post
- Widget 2: & widget 3: Category specific posts
- Widget 4: Display the five most recent posts – however, do not duplicate posts from Widget areas 1 through 3
- Bottom1: My Tag cloud; Bottom 2: Recent comments and s link to my calendar; Bottom 3: Home of my Flickr photos.
- Sidebar 1: A smorgasburg of the must haves; contact information , Avout Me (text widget),
Design Challenges and Difficult to Implement
So here were a few challenges in configuring my widget areas:
- How to separate my posts by category – Difficulty 1
- How to create a catch all post section; basically show the last 5 articles, however with a twist, that are not displayed anywhere else on the page. – Difficulty 5
- How is the best way to show my Flickr content
- URL Link – Difficulty 1
- Thumbnails in a widget area – Difficulty 3
- A dedicated page to showcase my photos – Difficulty 3
- Add the blue WordPress “Follow Blog”Button
My Solutions
After a lot of trial and error – here were solutions I came up with. Let me know how you think the trio works.
Separate my Posts by Category
This was a pretty simple solution thanks to a great Plugin that came with my theme called – Genesis – Feature Page. In addition to adding posts by category, I was also able to easily configure a Featured Image of varying sizes with each listing and control the number of posts listed. After all, as much as we love to write, a picture can do an amazing job at catching our readers eye. The Plugin also had the ability to offset the number of posts. This looks handy if you have a sticky post — the option would all you to start displaying posts on your home page from number two (skip the most recent / sticky).
Create a Catch-All Post
The idea of a catch-all area seemed pretty easy at first glance, just tell Genesis – Feature Page, to display all categories. Bingo – the five most recent posts are displayed. The only trouble was that, if one of my Category Widgets had a new article there was duplication between the two lists; with one area showing the most recent article on for example, Crohn’s Disease, and the catch all list displaying the same article. A second issue that quickly popped up is that Blogging 101 posts, were taking over.
In doing some research – the most common solution was to create a new Category, such as Featured Posts or Home Page, and link articles that were not found under the other Categories. So when an article moved off the Topic specific category and to the catch all category, flag it with a new Category. (Did that make sense?). Honestly, trying to remember to move an article from one Category to the Next seemed like too much work in the long run and prone to errors. So the hunt was on.
Idea 1: I did a little more digging into my Feature Page there was a very setting called, EXCLUDE PREVIOUSLY DISPLAYED POSTS. Seems like the perfect solution right? And truthfully was almost perfect until I stumbled upon a little hiccup that I will try to explain. All web pages, load from top to bottom and loads my widgets as follows: Widget 1: Display Today’s Post; Widget 2: Yesterdays Post; Widget 3: Display an earlier post from yesterday; Widget 4: Catch All (Do not show previous posts): Will Return to this one in a moment; Widget 5: Blogging 101 Posts.
So off I went, engaged the Exclude Previous Posts, in my catch all widgets and crossed my fingers. Todays post skipped, yesterdays post skipped, earlier post from yesterday, skipped — all great! Wait — all my Blogging 101 posts are showing up in Widget 4 and again in Widget 5. Why is that, I said – exclude previous posts. Humm ….. well, as I noted, web pages are loaded from top to bottom. What is happening is that Widget 4 area, recognizes all of the other widget areas that load before them, and exclude them when it is populating Widget 4. As the Blogging 101 post are not show in areas 1 to 3, they are populated in my catch all area. Ok, back to the drawing board and the hunt was on.
Idea 2: So close, yet so far. So how can I have my catch all work, as it has been, and in addition, ignore my Blogging 101 category? Text Widget to the rescue; and a little custom coding. I won’t bore you with the PHP code here, but in simplest terms, I took the php code that was use to create the feature Post Plugin; and included an additional line of code to exclude my Blogging 1o1 Category. Bingo – perfect!
Add Flickr
I have been able to incorporate Flickr into two sections of my site with the help of two great apps, one as a widget on the bottom of my homepage and a second as a Page.
Flickr Badges Widget – is a simple widget to display your Flickr latest photostream in widget area using javascript from http://www.flickr.com/badge_code_v2.gne. Find your Flickr ID from Flickr NSID Lookup if you do not know your flickr id. With its very beautiful widget interface, tabbed system, and powered by jQuery makes this plugin easier to customize. Just put your Flickr ID and your widget will be ready to lunch.
Key Features & Options
- Beautiful widget interface
- The type of images from user or group.
- Flickr NSID support.
- Get the image from recent or use random function.
- Displays up to 10 images.
- Optional image sizes.
- Intro text for additional text before the widget content.
- Outro text for additional text after the widget content.
- Custom scripts and stylesheets for each widget.
- Free supports.
Flickr Photostream – Plugin that allows you to show your Flickr Photostream, Photosets, Galleries, Group Pools, or Tags in your blog, with a very elegant and awesome layout. With this highly customizable Plugin, You can configure the height of the rows to have a grid that can be like the justified grid of Flickr or of Google+. But, you can do more! For example you can configure the margin between the images, create rows with fixed height, or decide if you want to justify the last row or not! Be sure to check out the developer, Miro’s website for examples on this great app.
Features:
- A gallery with the same layout of Flickr or Google+, configurable as you want.
- Fast and light. Also uses a cache to load galleries instantly.
- You can show photos from your Flickr Photostream, from a Photoset, from a Gallery, or from a Group Pool.
- You can show all the photos that has some Tags.
- You can create multiple galleries with different settings, also in the same page.
- Customizable image sizes, always with a justified disposition.
- Photo titles shown when the mouse is above.
- Decide if use a lightbox (Colorbox or Swipebox) to show the original photo, or Flickr.
- Customizable style, you need just to change a CSS.
- Pagination with SEO friendly URLs. Decide if you want to show the newer photos or not.
- Available in English and Italian
So there you have it — my Widget Changes and the Pluggins that power them!
Follow Blog Button – While there are several ways visitors to your site can follow your WordPress.com blog, you also have the ability to create a Follow Blog button that can be added to external websites. This button will allow people who click on it to receive e-mail notifications whenever you publish a new post on your WordPress.com site. So far it looks like it is working. Why not click on the Follow Me button to your top right (just below my picture).