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.

Genesis Custom Category Pages

Recently I was doing a project for a client who instead of wanting the default WordPress settings for their Category pages (10 of the recent Posts and displayed based on the most recent Posts).  Instead they wanted all Posts on the same Category page, with the order to be A-Z.  This particular client also used Genesis, so they wanted to learn about Genesis custom Category pages.

Unfortunately there is not a lot of documentation for this type of sorting with WordPress or Genesis framework, and if you are not a programmer this might be hard to do.  Luckily there are resources out there who can assist.  I will try to explain and walk you through the code for the above situation, as well as give you other suggestions for similar types of situations.

 

The first part (i.e., making more than 10 Posts display) is very easy and even the most experienced WordPress users some times forget about.  Once you are in your Dashboard go to
Settings >> Reading and you can change the Blog pages display at most value to whatever you want.  In this case, we are going to change it to 99 just to grab lots and lots (i.e., 99) of Posts at once.

 

Now for the fun part – the programming.  You are going to want to find your functions.php file and add the following piece of code:

/** Order Posts A-Z on Category Pages **/
function be_category_query( $query ) {
if( $query->is_main_query() && $query->is_category() && !is_admin() ) {
$query->set( 'orderby', 'title' );
$query->set( 'order', 'ASC' );
}
}
add_action( 'pre_get_posts', 'be_category_query' );
/** end of a-z **/

Oh no Kevin, you had me lost at “code.”  No worries, I am going to explain each line of code for you so don’t freak out just yet.

 

/** Order Posts A-Z on Category Pages **/

> This is just a comment area to remind yourself what this cool function

function be_category_query( $query ) {

> we are naming and defining the function here. You can name the function whatever, but I’ve named this function “be_category_query” because I wanted to give a shout out to Bill Erickson, who you will find more information about later in this tutorial.

if( $query->is_main_query() && $query->is_category() && !is_admin() ) {

> queries (finds) all category items, except  don’t look during the time you are in the WP Dashboard.  Speeds up performance

$query->set( 'orderby', 'title' );

> now we finally tell the query to sort by the title of each Post

$query->set( 'order', 'ASC' );

> and then after getting all of the titles in order, we want to sort Ascendingly

}
}

>these just close off of the function

add_action( 'pre_get_posts', 'be_category_query' );

> we now create and execute the function “be_category_query”

/** end of a-z **/

> This is just a comment to let you remember you are closing this cool function

 

 

There are additional ways to do other customizations and sorts, and one of the best resources I have found would be Bill Erickson’s website.  Here is a great tutorial on how to Customizing the WordPress Query.

Remove everything except Post Title on Category Pages – Genesis

You may notice in Genesis when you load a category page (domain.com/category/awesome) you will see a listing of all of your Posts with featured images, content, and probably some other meta tag stuff.  What if you want to remove/hide everything except one or two particular things?

Here is one way to do it

Open your functions.php file and add this (I recommend the bottom of the file)
add_action('genesis_before','remove_unwanted_actions');
function remove_unwanted_actions() {
if ( is_category()) { // <--- you could change, more about that below
remove_action( 'genesis_before_post_content', 'genesis_post_info' );
remove_action( 'genesis_after_post_content', 'genesis_post_meta' );
remove_action( 'genesis_post_content', 'genesis_do_post_content' );
}
}

This basically says:

Hey Genesis, I want to do something different than your normal awesome hooks; instead on Category pages, I don’t want you to display Post Information, Meta Data, or Post Content.  I just want the Post Title to show up.

Genesis will obey you because you are the master of your own domain.

Small adjustments to the above code:

is_category() = for Category Post Pages
is_single() = for individual Posts
is_page() = for Pages

 

I’ve also created a tutorial on how to display featured images on Category Post Pages also, so take a look over here.

Using Simple Hooks for Genesis to make life easier

If you’ve ever worked with Genesis framework for WordPress, this will be helpful and quick.

What can I display, and where can it be displayed?

Some times you will find that you just need to display Tags below the Content, or maybe just all of the Custom Fields without much formatting.  If that’s the case, use Simple Hooks and go to the hook you are wanting this information to display.  So let’s say you want display all of the tags right after the Post Content. You would just do this:

Screen Shot 2013-06-20 at 2.25.04 PM

<span>Tagged with <?php the_tags('') ?></span>

For the most part, that’s pretty straight forward. There are many more php functions simple to what the_tags() does, such as the_category() but you should do some research to find exactly what you are looking for, as it will help you learn more.

But what if I wanted to use/display Custom Fields?

Great news, I made a tutorial for that very reason.  Check it out!

Displaying Custom Fields for Genesis

If you’ve ever worked with Genesis framework for WordPress, or even Gravity Forms, you will appreciate this quick tutorial.

Gravity Forms has a great feature that allows for you to create a form that users can create Posts, but if you have them add to a Custom Field, it doesn’t display automatically, so you have to figure that out on your own.

I’ll start from the Genesis point of view, because I want to.

I want to display all of my Custom Fields on my Posts, what do I do?

Step #1 = create your Gravity Form to add to your Custom Fields
Step #2 = users add new entries to the form, and it is added to your WordPress Posts area
Step #3 = Add the code to your functions.php file

More details here though:

Step #1 =

First you have to look at your Gravity Forms form.  For my example, I am going to use a Directory style form with fairly common fields.

Phone Number:
Email Address:
Position/Title:

So the form setup looks something like this (I know the image is too hard to read, so click on it to see full size):

custom-fields

 

As you can see I either added a Custom Field Post type to an existing Custom Field that was already created before I started the form (title, email_addy) but I wanted to create a new Custom Field on the fly (position) so I clicked on New and typed in the field name I wanted to use.  Notice, you can also select what type of Field Type you want the Custom Field to be through Gravity Forms, which is pretty darn awesome.

Step #2 =

So when a visitor goes to submit information they see something like this with the form:

custom-form

And when they submit the info, it will look something like this on their Post via the Dashboard of WordPress

post-customfields

With me so far?  If not, please go through the steps again before Step #3…

Step #3 =

Adding the code to your functions.php file can look scary, but I promise it isn’t too bad.

Okay, now open your theme’s functions.php file, and using this generic code, make changes to it as you see fit:

/* Custom Fields
*/ by: kevin shoffner
*/
add_action('genesis_post_content', 'field-name');
function field-name() {
if ( is_single() && genesis_get_custom_field('field-name') )
echo '<hr /><div id="field-name">Title: '. genesis_get_custom_field('field-name') .'</div>';
}


But what if I want some special formatting or ordering of my custom fields?

In my case, I had some extra formatting and customizations, but you can see what I did using the same Custom Fields from above:

add_action('genesis_post_content', 'title');
function title() {
if ( is_single() && genesis_get_custom_field('title') )
echo '<hr /><div id="postition_title">Title: '. genesis_get_custom_field('title') .'</div>';
}

add_action('genesis_post_content', 'phone');
function phone() {
if ( is_single() && genesis_get_custom_field('phone') )
echo '<div id="phone">Phone Number: '. '<a href="tel:' .genesis_get_custom_field('phone') . '">' . genesis_get_custom_field('phone') .'</a></div>';
}

add_action('genesis_post_content', 'email_addy');
function email_addy() {
if ( is_single() && genesis_get_custom_field('email_addy') )
echo '<div id="email_addy">Email Address: '. '<a href="mailto:' . genesis_get_custom_field('email_addy') . '">' . genesis_get_custom_field('email_addy') .'</a></div>';
}

add_action('genesis_post_content', 'website_url');
function website_url() {
if ( is_single() && genesis_get_custom_field('website_url') )
echo '<div id="website_url">Website: ' . '<a href="' . genesis_get_custom_field('website_url') .'">' . genesis_get_custom_field('website_url') . '</a></div>';
}

This now displays something like

displayed-customfields

 

I highly recommend Gravity Forms by Rocket Genius if you currently are not using it with your WordPress site.

Customizing Genesis Framework Footer

The Genesis framework is a great WordPress tool, but too many times I have seen clients who attempted to make adjustments, only to find they have just made things all mucky.  So I thought it was high time to suggest a different approach, that will not mess with any of Genesis’s core files so you won’t have anything to worry about later.

Go into your Child’s theme and look for the file

function.php

Now, at the bottom of the file, just add the following code:

//* Customize the credits
add_filter( 'genesis_footer_creds_text', 'custom_footer_creds_text' );
function custom_footer_creds_text() {
echo '

';
echo 'Copyright © ';
echo date('Y');
echo ' My Custom Link · Built on the Genesis Framework';
echo '

';
}

 

That’s it – you just change what you want the footer to actually say, Save, Upload to your site, and you are done.

You’re awesomeness is quite high at this point

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

Genesis 404 Custom Page

But what is a 404 Error Page?

It’s the page where one of your visitors will eventually end up because they typed something wrong, or a link has gone bad on your site.  But don’t make them feel bad, blame yourself and get on with it.  Here is one to look at: kevinshoffner.com/awesome-sauce

Cool, but can I create one to fit my site’s “look and feel?”

With Genesis, you only need to do two short tricks and you are ready to go! But you are forced to read this entire article first.

Trick #1

If you don’t want to do anything “real custom” for your site then just move the default 404.php file that is in the Genesis template folder to your child theme, and upload. Wow, that was pretty painless!

 

Trick #2

But if you want to get “real custom” you can do all types of fun things.  Here are just a few ideas

Adding an image to your 404.php file  – just add the following to your Child Theme functions.php file, near the bottom of the file
add_action('genesis_before_post', 'child_404_image');
/**
* Add an image to the top of the 404 page
*
* @author K. Shoffner
* @link http://kevinshoffner.com
*/
function child_404_image() {
if( is_404() )
echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/404.png" alt="OOPS, Nothing Found" />';
}

Save and Upload your functions.php and your customized 404.php file.
Then upload your image you created called 404.png, and you are done!

Make your friends jealous today.

Genesis & Multisite, WordPress

Recently while working on a large network, I realized something very valuable about WordPress Multisite and the Genesis framework, by StuidoPress.  Because if it’s popularity, and the increasing value of Multisite I found it a great message to share with others.

If you are reading this article you already know that Genesis is wonderful, and that using WordPress Multisite in certain cases does great as well, so I won’t spend your time talking about those pieces individually.  Instead, I will jump straight into the core of the issue.

 

So let’s say you have 5 sites for your brand, Big Mouth Local Farm:

Site 1 = Apples

Site 2 = Oranges

Site 3 = Grapes

Site 4 = Wine

Site 5 = Peaches

 

So in this case, the majority of your sites are selling fruit and you would think probably want the same brand across all sites, so you might think to go inside of the Genesis Framework and change the header.php file to include a Header Wrapper that has the same logo at the top because that seems like the most simple thing to do.  At surface level I would agree with you, but you have to weight the Pros & Cons:

 

Pros Cons
  • Quick to fix
  • Easy to find
  • Every update to Genesis, you have to do it again
  • What if your entire WPMU Network doesn’t have the same brand?
  • Do you want your sites to have different styles?

Okay, my biggest issue was the part about the “same brand.”  So using the same scenario above, your Farm now decides to branch out and offer tickets and CD’s of their music events they hold.  But they instead want a completely different look & feel and want to be called Loud Mouth Records.  Completely different logo and CSS, so that Genesis header.php bandage will not longer work.

What do you do?

 

It’s simpler than you may think.  Because you are using Genesis and WPMU, you do not want to change that header.php but actually just go into each instance on your Network and go to the Genesis >> Theme Settings >> Header and Footer Scripts to put your code.

 

Other things you can use this for:

  • Google Analytics being different on every site
  • Customized CSS files for just 1 or 2 sites of your entire Network, instead of changing the Child Themes

Check back as this will be updated often with additional information about Genesis and other Child Themes.