Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header (http://forum.bytesforall.com/forumdisplay.php?f=43)
-   -   How To: Add new Widget Area with widget(s) to Header Area and more ... (http://forum.bytesforall.com/showthread.php?t=17159)

TotalBalance Mar 28, 2012 11:44 PM

How To: Add new Widget Area with widget(s) to Header Area and more ...
 
1 Attachment(s)
Background:
In my quest to develop a highly functional portable authoring/CRM platform, I've presently settled on Wordpress and the WP Theme "Atahualpa" as key components.

Together the high level of customization and functionality are hard to beat.

Objective:
The objective of this exercise was to:
1) Create a clean WP design with as much writing "white space" as possible.
2) Have the ability to add custom widgets to the Header area for additional functionality without "white space" sacrifice.

The challenge is I'm no programmer and WP Theme design is not in my vocabulary.

However, thanks to some nice plugins, Atahualpa and especially great support from the BFA Fourm, we're close enough to share my results in hopes others can benefit and perhaps contribute or recommend additional enhancements.

So without further adieu, here's a quick explanation of the screen capture and and how it was accomplished.

Approach:
Handling Pages, Categories and Links
To free up white space by eliminating sidbars yet moving needed elements to horizontal locations, I leveraged the WP Custom Menus feature, further enhanced with the Atahualpa Theme.

Images: A and B
A. Add active Pages and Links, including WP Admin areas, to top menu bar.
B. Add active Categories to secondary menu bar.

Pretty simple.

* Go into the Admin area of WP and create two custom menus. One for Pages and Links the other for Categories.
* Refer to the outline text in the image for A and B to see how it was done.

For the final effect we customized the Atahualpa Theme under "Appearance|Header Area|Style & edit HEADER AREA|Configure Header Area" by adding the following into the option code box:

Code:

%pages %logo %bar1 %image %cats %bar2
Add Widget(s) to Header Area
Sometimes I find it hard to write or continue once I've started. I also need to be cognizant of any appointments, deadlines, etc. that might be coming up. Leveraging the Header Area, would be ideal.

To prove the concept, I decided to have a little fun by adding random Motivational Quotes to the Header area.
As for notifications, I'll need to find a Google Calendar Widget that I can be add in the same way. The latter is not yet implemented.

Add Random Quotes to Header Area
1st, I needed to find a nice Quote plugin that provides widget functionality. After trying a quite a few I settle on "th0th's Quotes". Besides offering both widget and shortcode functionality, it also allows for the import/export of Quotes in XML format. A real time saver as I've already got 100s of inspirational quotes to include.

Image: C
C1. Install the Quotes plugin
After installation, check to make sure the "Quotes" widget is now available in the Admin Dashbard Widget area.

To properly place the Quote's widget in the Header area vs. a sidebar, Atahualpa really starts to shine as a theme of choice. However, to accomplish much of it, there is some PHP & CSS coding required and definitely beyond my layman's comprehension. Fortunately, BFA "Atahualpa" Forum support came to the rescue :-)

C2. Create new Widget Area to hold Quotes widget
Here's the original thread from Juggledad

Atahualpa allows for a lot of customization, including the creation of new Widget Areas that will show up in the Admin Dashbard's "Appearance|Widgets" section.

The PHP code to do this is:
Code:

<?php bfa_widget_area('name=Your Widget Area Name'); ?>
As per instructions from Juggledad this code needs to be the 1st entry in the "Appearance|Header Area|Style & edit HEADER AREA|Configure Header Area". Here's the full line of code I ended up with, adding to what was already there:

Code:

<?php bfa_widget_area('name=Quotes Area'); ?> %pages %logo %bar1 %image %cats %bar2
Now go check your Widgets area and you'll see a new Widget container on the right, titled "Quotes Area", that you can drop widgets into.

C3. In the available widgets, you should also see a widget titled "Quotes". Just drag the Quotes widget into the "Quotes Area" widget box and customize as needed.

C4. We're almost done! To properly format and place the widget where you want, in this case centered in the Header Area of the theme, you'll need to add some custom CSS code. Working off of Juggledad's instruction and code example, here's the final code, added to "Appearance|Atahualpa Theme Options|Various Content Items|Add HTML/CSS Inserts|CSS Inserts":

Code:

#wrapper {position: relative;}
div#quotes_area
{
    font-size: 16px;
    text-align: center;
    color: #000000;
    border-spacing: 0;
    padding: 10px;
    left: 25%;
    position: absolute;
    top: 25px;
    width: 50%;
    z-index: 99;
}

Although it's hard to tell from the image, the Quote widget is in a container that is sized 50% of the Header width, placed 25% from left boarder and 25px from the top to properly align as shown. The text is center aligned, with a font size 16px and black. You'll want to tweak as needed for your purposes.
Now, every time you refresh any page, there will be a new positive affirmation for your sub-conscious mind to absorb ;-)

Where to Put Post Listings?
Almost as an after thought, I still wanted to easily see a list of my most recent posts. While I can always use search or Categories to refine and find a desired post, having recently worked and readily available posts is a nice bonus.
Of the first few I tried, I settle on "Posts List" for this effort. I may use something else down the road but for now it does a nice job of generating filtered or full listing of posts written, allowing you to display them on any page or post of your choosing via a shortcode. For this effort, having the post list display on my static home page meets the requirements.

Image: D
D1. Install and configure Posts Link Plugin
D2. Add the Posts Link shortcode, with appropriate parameters, to those pages and posts needed.

We're done (for now)!

In a small way of giving back I hope this little guide is of help to others. All comments welcome but if they are of a technical nature PLEASE refer them to either Juggledad or lmilesw! Thanks again to both for all their help, without which, this guide would not be :-)

P.S. For those interested, the entire PC environment used for this effort is portable. By that I mean it's all self-contained on a 16G SD card (Installed: XAMPP, Wordpress, Google Chrome, etc). All you need to do is plug the card with adapter into an available USB port or directly into a compatible card slot and you're ready to go :-) Yes, I DO backup often using Dropbox and CrashPlan!!

Lars

loislanemiami Aug 29, 2012 06:29 PM

This post is a "Huge" help. Thanks!

kmoneyham Nov 11, 2012 11:08 PM

Thanks so much for this post. I used this advice from you and Juggledad to add a row of social media icons and login links to a site I'm working on. Thanks!


All times are GMT -6. The time now is 05:14 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.