From the Blogabout me

Genesis Customized Headers (advanced use)

First and foremost – do not ever do this unless you

  1. absolutely know exactly what you are doing
  2. absolutely have to because of some unique reason
  3. absolutely know what you are doing
  4. have read and followed bullet points #1 & #3 perfectly

I absolutely love how the Genesis Framework has been developed and continue to find out things about it.  Every time I think to myself, “Gosh I wish there was a way to…” I realize Genesis developers have already done it some where.  You just have to keep digging.

In very, very rare occasions you will need to put some kind of Shell around your WordPress site.  Maybe you have an organizational brand that needs to be standard across the world, but you want to add a website using WordPress and Genesis.  If that’s the case, you may run into some issues with the required assets if you are not careful.

The piece of code we are changing is demonstrated in the screen capture here.genesis-header

In the most recent Genesis framework (1.9.1 as of today), a function such as genesis_header_markup_open will need to be adjusted.

Find the code by going to
genesis/lib/structure/header.php
and look for the function you are wanting to change.  I will change the Genesis header slightly below.

Original:

function genesis_header_markup_open() {

    genesis_markup( '<header>', '<div id="header">' );
    genesis_structural_wrap( 'header' );

}

Modified:

function genesis_header_markup_open() {

    genesis_markup( '<header>', '<div id="custom-header">' );
    genesis_structural_wrap( 'header' );

}

I’ve had to do this on rare occasions only because my clients had CSS or a structual issue where they were already using the

ID=header

so I had no way other than to make this change via the Genesis framework. I deinifitely do not recommend this as a normal practice, as you will have to change this code every time there is any update to the framework.

I wish you lots of luck.

Genesis 2.0, WordPress 3.6, and Superfish

If you have upgraded your WordPress site to WordPress 3.6 or higher recently and/or upgraded your Genesis theme-work to Genesis 2.0 or higher, you may have noticed something very unusual with your drop-down menus.

They no longer work!

Oh no – why is that?

Superfish/Suckerfish has been good to use developers and designers for some time, but let’s face it.  It’s getting old and doesn’t serve the needs for today’s websites as much as before.

Superfish, in case you didn’t know, is not a ginormous ancestor to the swordfish family but instead a jQuery ancestor to Suckerfish, to make drop-down menus work smoothly and without much code.  It has served thousands of developers and millions of websites in just over the last few years.

Due to more mobile devices taking hold of the web landscape, UI designers and developers have been trying to figure out how to make hover menus and drop down menus work well in a mobile environment.  More and more designers have found going minimalist for their users have received possible feedback about this simplistic approach to their designs.  With that, brings less and less layers of your websites.

Genesis 2.0 has realized this movement, and that clutter on a mobile device (or anywhere else), so they are starting to pull away from Superfish.  Now many of you probably still have plugins or themes that use Superfish, and may not even realize it.  But when you update your site, you will figure it out pretty quickly.

Screen Shot 2013-10-02 at 5.30.26 PM

When your menus do not display when you hover over or click on them, and you only updated WordPress or Genesis, then you have a plugin / theme using Superfish.  But there is a way to still sneak around this issue until you have found better ways to display your content.

When you are in your WordPress Dashboard, go to your Genesis Theme Settings and under the Navigation section, you should be able to enable/disable the checkbox to Load Superfish Script

Save and now your menus should act as they did before your update(s).

 

I would highly recommend thinking about organizing your content in a new, more mobile friendly way, and finding better use of your navigation.  At the time of writing this entry I realize some of my content is found under drop down menus, even though I don’t use anything with Superfish/Suckerfish.  

 

I will be taking my advice and reorganizing my site soon.

Featured Images in Genesis – Hiding, Displaying and Removing them.

I’m a huge fan of Genesis and StudioPress as a whole.  Also, Brian Gardner is amazing at ideas and the work he has developed along the way.  Even so, there are occasions when I need to tweak things just a little to fit my  (my clients) needs.

One particular example is making sure the Featured Images of Posts are displaying in the correct places of Genesis. In this short tutorial I am going to display and explain the code for getting the Featured Images to fit your needs. Although I am going to be referring to Genesis code, most of this code can easily be converted to other themes, minus the Genesis calls. Also for simplicity reasons, I will refer to the Agency theme, but again use your Child Theme names where you see “agency” if it helps you.  Feel free to contact me if you have particular questions about the code.

Here are the scenarios:

I want Featured Images on Single Posts (individual Posts all by themselves and nothing else on the screen, or some themes will use single.php as the theme)

Open your Child Theme functions.php (remember we said we are using Agency)
/** Add Post image above post title, single posts only */
add_action( 'genesis_before_post', 'agency_post_image' );
function agency_post_image() {

if ( is_category() ) return;
if ( $image = genesis_get_image( 'format=url&size=post-image' ) ) {
printf( '<a href="%s" rel="bookmark"><img class="post-photo" src="%s" alt="%s" /></a>', get_permalink(), $image, the_title_attribute( 'echo=0' ) );
}
}

What’s going on here, you ask? So let’s go through this – line by line

add_action( 'genesis_before_post', 'agency_post_image' );
= We need to add an action for Genesis to know what to do, so using Genesis hook reference genesis_before_post is what executes before each post in all loop blocks (outside the post_class() div)

function agency_post_image() {
= This is just to start the new function that your aforementioned action will call. You can name it whatever you want to, just use it correctly in the above action as well.

if ( is_category() ) return;
= This code tells Genesis if you are on XYZ page (Category Pages, in this case) to just return nothing and not display anything special. This is the BIGGEST thing to remember, and you will see why shortly.

The last if statement is saying “When we display an image, here is the URL, the size of the image you uploaded, and I am going to print the URL of the original Post/Page the image was a Featured Image of.

Now this is where it gets real fun. Read on…

If you were to change is_category to something slightly different you would get an entirely different outcome, so:

if ( is_category() ) return;
= as originally explained, this makes sure Featured Images do not display on Category pages; but does show everywhere else.

if ( is_page() ) return;
= this makes sure Featured Images do not display on Pages; but does show everywhere else.

if ( is_single() ) return;
= this makes sure Featured Images do not display on Single Posts pages; but does show everywhere else.

Happy Coding