Genesis Structural Wraps & Creating a Full Width Genesis Child Theme

A full width theme normally consist of the header, nav, content and footer areas that have backgrounds that span the across the entire window while the inner area with the actual content of each section stays centered on the page. This help creates a visual separation between each section and to some just ascetically pleasing.

To create this effect you usually have your main container to each section as well as a wrap inside to keep its contents centered. The main container is set to 100% width and the inner wrap to the width you’d like your site to be fixed at then centered with a #margin: 0 auto;.

The steps below will go over exactly how to create a full width genesis child theme using the sample child theme as a base. [Read more...]

Short link:

How to Filter the Genesis Post Navigation Text

Sometimes your site may focus on reviews of Academy award winning films, or great recipes from around the world and the word “post” is no longer relevant to your site. What you are writing and your viewers reading aren’t posts, but reviews or recipes, and the post navigation at the bottom of an index page may be a little misleading. To change this text is simple, in the latest release of Genesis (v1.6) the older/newer and next/previous text in the post navigation are now filterable.

Older / Newer Post Navigation Filter

This filter runs when in Genesis Theme Settings, under Content Archives, “Select Post Navigation Technique:” is set Older / Newer. The default output Is “« Older Posts” and “Newer Posts »” to filter this simply add the code below to your child theme’s functions.php. In this example we change it to read Older and Newer Reviews.

add_filter( 'genesis_older_link_text', 'gt_review_older_link_text' );
function gt_review_older_link_text() {
        $olderlink = '« Older Reviews';
        return $olderlink;
}
add_filter( 'genesis_newer_link_text', 'gt_review_newer_link_text' );
function gt_review_newer_link_text() {
        $newerlink = 'Newer Reviews »';
        return $newerlink;
}

Previous / Next Post Navigation Filter

This filter runs when in Genesis Theme Settings, under Content Archives, “Select Post Navigation Technique:” is set Previous / Next. The default output is “« Previous Posts” and “Next Posts »” to filter this simply add the code below to your child theme’s functions.php. In this example we change it to read Previous and Next Reviews.

add_filter( 'genesis_prev_link_text', 'gt_review_prev_link_text' );
function gt_review_prev_link_text() {
        $prevlink = '« Previous Reviews';
        return $prevlink;
}
add_filter( 'genesis_next_link_text', 'gt_review_next_link_text' );
function gt_review_next_link_text() {
        $nextlink = 'Next Reviews »';
        return $nextlink;
}

Attention to detail is very important when building a site for a client or yourself. Taking the extra time to polish up a product is really what makes a great site or theme. This is minor customization, but when you take the time to add little touches like this to a site is really what starts separating yours from the others.

Short link: http://goo.gl/65jb4

Understanding Genesis Layout Options

One of the ways genesis adds to its flexibility is having the option to choose a layout. This is great for anyone who doesn’t want a content/sidebar layout and would prefer possibly a 3 column layout like sidebar/content/sidebar or vice versa. Also for designers it’s possible to add classes to the body or post at post/page level to add even more flexibility in the design of the site. One use for the body class could be having several backgrounds pre-added to the stylesheet of your site and depending on the body class you can call a different images or color for each post. For example:

body.black {
     background-color:#000;
}
body.blue {
     background-color:#0000ff;
}
body.gray {
     background-color:#aaa;
}

Say you have created the above styles in your child themes style.css file and want a specific post to have a gray background. In the post edit page scroll down to “Genesis Layout Options” box and in the text box under “Custom Body Class” add “gray”.

Once the page/post is saved the class gray will be added to the body and the style applied.

How to unregister the default genesis layouts and register new layouts.

By default genesis comes with 6 layout options to choose for the entire site or per post/page basis. The six layouts genesis support are:

  • Content/Sidebar
  • Content/Sidebar/Sidebar
  • Sidebar/Sidebar/Content
  • Sidebar/Content/Sidebar
  • Sidebar/Content
  • Full Width Content

Unregistering Genesis Layout Options

Having six layout options is great in terms of allowing flexibility but for some genesis developers it may be extra work to support each of the six. In the latest version of genesis v1.4 it is now possible to unregister specific layouts.

To unregister a specific layout out just use genesis_unregister_layout( '$layout') in your child theme’s function.php. See the list below for specific layouts.

genesis_unregister_layout( 'full-width-content' );
genesis_unregister_layout( 'content-sidebar' );
genesis_unregister_layout( 'sidebar-content' );
genesis_unregister_layout( 'content-sidebar-sidebar' );
genesis_unregister_layout( 'sidebar-sidebar-content' );
genesis_unregister_layout( 'sidebar-content-sidebar' );

In addition to being able to remove support for specific layouts you can also remove the in-post and archive layout options.

remove_theme_support( 'genesis-inpost-layouts' );
remove_theme_support( 'genesis-archive-layouts' );

Registering custom layouts for genesis child themes

Though removing support for layouts is nice, the 1.4 update also allows adding your own ( which I believe a useful feature that not many speak about or know about). Since layouts can be unregistered there must be a function to register them as well – and there is.
[Read more...]

Short link: http://goo.gl/hK9eK

How to Filter the Genesis Breadcrumb Trail

Breadcrumbs are a great way to add another form of navigation for users to easily find their way around sites as they dig deeper through articles and pages. In terms of usability, breadcrumbs can reduce the number of actions for users to return back to a higher level page that they were on a few moments before; and they are especially great to visually show someone’s location on sites if they just happened to land on a certain page through search, or a link.

Breadcrumbs can be enabled in the Genesis theme settings in the dashboard, where you will find four check boxes to have them either enabled or disabled on certain sections of sites. Once the breadcrumbs are activated, you should notice them above the content area. For example, if you are on your home page above the content area you should see: “You are here: Home” and if you want to change the text “You are here” or even the link to home, it is possible with a filter.

Below is an example on how to use the Genesis breadcrumb filter. The following snippet will change the default “you are here” text with an “x,” as well as use “>” for separators in place of the “/” and an image for the home link.

add_filter('genesis_breadcrumb_args', 'custom_breadcrumb_args');
function custom_breadcrumb_args($args) {
  	$args['labels']['prefix'] = 'x'; //marks the spot
  	$args['sep'] = '>';
  	$args['home'] = '<img src="'. get_bloginfo( 'stylesheet_directory' ) . '/images/homegraphic.png" alt="home">';
  	return $args;
}

To use the code above simply add it to your child theme’s function.php file and make any modifications you’d like.

List of all filterable items and their default values in the genesis breadcrumb trail are below.

 ['home'] = __('Home', 'genesis'),
 ['sep'] = '/',
 ['prefix']  = '<div class="breadcrumb">',
 ['suffix'] = '</div>',
 ['display'] = true
 ['labels']['prefix'] = __('You are here: ', 'genesis'),
 ['labels']['author'] = __('Archives for ','genesis'),
 ['labels']['tag'] = __('Archives for ','genesis'),
 ['labels']['date'] = __('Archives for ','genesis'),
 ['labels']['search'] = __('Search for ','genesis'),
 ['labels']['tax'] = __('Archives for ','genesis')
Short link: http://goo.gl/NnTgM