The Hello Bar is a simple web toolbar that engages users and communicates a call to action.
You are here: Home / Blog

Replace Nav Right RSS links

2011
4 Comments

One of the students in my Family Tree class asked how I replaced the Nav Extras RSS links with my own Social Media (RSS, Facebook and Twitter) links (including icons). It’s pretty simple, really. The code from Creativity Included was pulled into the recently renovated Family Tree theme in the example pictured above.

functions.php

First, I filter out the old RSS links

remove_filter('genesis_nav_items', 'genesis_nav_right', 10, 2);
remove_filter('wp_nav_menu_items', 'genesis_nav_right', 10, 2);

Then I create a new function to replace the one I removed

add_filter('genesis_nav_items', 'child_nav_right', 10, 2);
add_filter('wp_nav_menu_items', 'child_nav_right', 10, 2);
function child_nav_right($menu, $args) {

Next I check to see if the nav extras are enabled

    $args = (array)$args;

    if( !genesis_get_option('nav_extras_enable') || $args['theme_location'] != 'primary' )
        return $menu; 

    if(genesis_get_option('nav_extras') == 'rss') {

I set up a variable to hold the RSS link info

        $rss = '<a rel="nofollow" href="'.get_bloginfo('rss_url').'">RSS</a>';

I do the same for my Twitter link info

        $twitter = '<a rel="nofollow" href="https://twitter.com/username" target="_blank">Twitter</a>';

And finally my Facebook link info

        $facebook = '<a rel="nofollow" href="http://www.facebook.com/pages/City-ST/Business-Name/999999999999" target="_blank">Facebook</a>';

I string them together to build the menu component

        $menu .= '<li class="right rss"><span class="rss-icon">'.$rss.'</span> <span class="twitter-icon">'.$twitter.'</span> <span class="facebook-icon">'.$facebook.'</span></li>';
    }

Otherwise, I want to use the default nav right menu

    else {
        $menu = genesis_nav_right($menu, $args);
    } 

    return $menu; 

}

style.css

Edit the block of code flagged /* rss option

This basically sets up a unique icon for each link. The hover state changes the background position, allowing you to have a rollover effect. Sprites rule!

#nav li .rss-icon a, #nav li .twitter-icon a, #nav li .facebook-icon a {
	overflow: hidden;
	margin: 0 0 0 10px;
	padding: 3px 0 3px 18px;
}

#nav li .rss-icon a {
	background: url(images/icon-rss.png) no-repeat 0 0;
}

#nav li .twitter-icon a {
	background: url(images/icon-twitter.png) no-repeat 0 0;
}

#nav li .facebook-icon a {
	background: url(images/icon-facebook.png) no-repeat 0 0;
}

#nav li .rss-icon a:hover, #nav li .rss-icon a:active, #nav li .rss-icon a:focus, #nav li .twitter-icon a:hover, #nav li .twitter-icon a:active, #nav li .twitter-icon a:focus, #nav li .facebook-icon a:hover, #nav li .facebook-icon a:active, #nav li .facebook-icon a:focus {
	background-position: 0 -18px;
}

Planning for success

2011
1 Comment

I love WordPress

Let’s get that out right up front. My entire career revolves around WordPress and the Genesis Theme Framework in some way or another. I design premium Genesis child themes for StudioPress and Theme Garden. I customize those themes for clients. And recently, I started classes teaching about everything from creating cool blog headers to branding using WordPress as your CMS. I think it’s a great tool. I love everything about it. Except…

Something is missing

When I worked in design studios, we usually had a highly structured process for every new project we started. In fact, I’m pretty sure most shops had an entire web page devoted solely to their “unique” process, because at the time (the archaic mid-90′s) we thought it was pretty darn  revolutionary. It usually went something like this:

I don’t know what it is about WordPress sites—maybe it’s because so often we start with a theme—but too often we, as designers, skip vital steps in the web design process. We jump straight from signing the contract into choosing or designing a theme. We pick out color palettes and make webfont kits without ever thinking about a site’s goals or how a user might interact with the site. We depend on the theme we’ve chosen to make those decisions for us. But good design is at least 50% usability. If your site has the Most Beautiful Design Ever™, but nobody can figure out how to buy something, or has a hard time finding the information they’re looking for then the site is not well designed.

Those who fail to plan plan to fail…

If you wanted to build a shed in your backyard, you’d draw up some kind of blueprint first, right? You wouldn’t just pick a paint color and hammering away. If you did, unless you were some kind of shed-building savant, you’d most likely wind up with a pretty sad little shed. The same thing goes for a website. You need to know what you’re going to build before you start building it. Skipping the planning part of the project is why that “simple” web project turns into the client wanting 856 revisions. Or needing to swap themes in the middle of a build. Or spending 8 hours coding a component the client didn’t really need. Or just producing a website that doesn’t provide a very memorable or smooth user experience.

Ask Yourself These Questions

Whenever I’m planning a website I always ask myself three vital questions to ensure that I know what to build:

What type of content does the client have?

If they have an existing site, I go over it and see what categories and tags they’re using. Do they post a lot of blog posts? Are they short or long? Do they use a lot of images? Videos? Block quotes? What do they post about the most? Do they have a newsletter signup? Social media icons? Do they *really* need a search bar, category listing or tag cloud?

How should I organize that content?

I ask myself about the goals the users will have – I usually set a primary, secondary and tertiary goal. For instance, if you have a crocheting site you may decide your primary goal is to sell your custom work, a secondary goal is to sell your custom patterns and a tertiary goal is to get people to sign up for your newsletter. When you organize the information, it should be with those goals in mind.

How should I execute that content?

Once I know what I want the website to do, that’s when I determine what tools I will use to accomplish my goals. I will choose a theme with functionality that matches my needs. I’ll find plug-ins that allow me to extend functionality (for instance, a newsletter, contact form or e-commerce solution). Then, when I start designing, I don’t waste time going down roads that don’t help me help the end user accomplish their goals quickly and easily.

There’s so much more to the planning process

You could probably write a book (well, at least an eBook) on it. However, if you’re interested in learning more about planning your web design project, you might be interested in my upcoming Information Architecture for WordPress class. In in, I’ll deconstruct a live, existing website and walk you through how I would complete the planning phase from research to wireframing. Watch a live, real world example of how a designer organizes information, uses content as a user interface element, uses content templates as planning devices and more to make a site user friendly. I spent several years working on branding project for clients as diverse as the Wynn Gallery and Digital Scrapbooking magazine, and can’t wait to share the secrets I learned working for them with you!

Classes for May + June

2011
3 Comments

We’ve got some all-new classes posted for May and June now! After our first few Genesis-only classes, this Spring we’re expanding into other areas.

Information Architecture for WordPress

MAY 26 | 12PM – 2:00PM PDT | $80

  • The web design process explained (Information Gathering, Planning, Design/Develop, Test)
  • How WordPress classifies content and how that affects the planning process
  • Wireframing explained
  • Using content as interface element

More Info

Tips and Tricks for Making Cool Blog Headers

MAY 31 | 10AM-11AM PDT | $40

  • Illustration and photography resources
  • Making stock illustration your own
  • Treasure troves of typography
  • My favorite “quick and dirty” Photoshop tricks
  • Creating your own library of tools

More Info

Branding 101

JUNE 9 | 11AM-1PM PDT | $80

  • The discovery process
  • Crafting a creative brief
  • What to do if you are your own client
  • Mood Boards
  • Research
  • Creating a brand guideline document

More Info

there’s room in the schedule for one more…

We’ve got room in the schedule for one more class, but we’re not sure which one to offer – so we figured we’d ask you guys and see what you think!

Oops! We could not locate your form.

Life 2.0 – Fried

2011
3 Comments

When you own your own business, you work seven days a week. And sometimes the concept of balance goes out the window. I don’t know about most creatives, but for me it’s a totally bipolar process. I go through mad dashes of feeling super-creative and productive to the sudden creative crash where I need to just sit, stare at Netflix and let my brain rest for a few days. Big high, big crash. I have essentially spent the last 15 years being what Sonia Simone calls a sprinter.

This week, the sprinting has worn me out. Frankly, the days of all-night Diet Coke and Twinkie fueled coding marathons where you don’t even want to pee because you have to get up just aren’t as fun as they used to be. It’s like a night at the club after you’re 30 – I can still pull it off, but I *really* pay for it the next day. I actually pulled an all nighter last night and am currently sitting here with the stiff neck, sore wrist and headache that comes with it – so I’m going to go practice a little balance. No Bejeweled Blitz or Facebook or Twitter or e-mail. It’s time to drink a beer, maybe read a couple chapters of a trashy book, go to bed, and wake up again tomorrow, ready to take on another day. Time to think a little bit more like a marathoner, so I can stay in it for the long haul.

(BTW, I am not pouring a Newcastle on my Cheerios – it’s actually 9:30pm on Thursday. I like to write these things the night before and schedule them for morning.)

Customizing Family Tree

2011
Leave a Comment

Click image for a larger view of the entire home page

Check out how far we got in Wednesday’s class!

We went over all of the new features in the upcoming Family Tree 1.2 and Genesis 1.6 releases, talked about basic customization skills, had a brief overview of Genesis Theme and Widget settings, and then jumped right into making Family Tree (even) cuter! I walked the students through my though process behind creating my own custom header, footer and background images, then we went over installing Typekit for beautiful typography (look for an upcoming tutorial on how to integrate @font-face from scratch if you don’t want to use a hosted service, and then thank the student who asked that question, lol!).

I’m super excited about next week’s session, when we get into customizing the main content area using a variety of widgets (including the all-new EasySlider), using the Ad Block as a cool promotional tool, and getting some footer widgets set up.

The Wednesday class is closed to new students, but if you’re more of a weekend warrior, it’s not too late to sign up for Sunday’s session!