Menu
You are here: Home / Archives for Tutorial

Genesis Structural Wraps & Creating a Full Width Genesis Child Theme

July 20, 2011 by 37 Comments

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...]

Filed Under: Theming, Tutorial
Short link:

How to Filter the Genesis Post Navigation Text

May 14, 2011 by 6 Comments

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.

Filed Under: Theming, Tutorial
Short link: http://goo.gl/65jb4

Understanding Genesis Layout Options

January 27, 2011 by 14 Comments

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...]

Filed Under: Theming, Tutorial
Short link: http://goo.gl/hK9eK

How to create a Custom Template In Genesis

August 17, 2010 by 26 Comments

This has to be one my favorite things when building a child theme with the Genesis Framework. The process is simple.

We first want to make sure we create a blank file to use as our template. Open up your favorite text editor and lets just start with a blank page. I always name my file at this step just so I don’t lose track what I am doing (if you are creating a template to overwrite one the default files make sure you name it so; for example: index.php, single.php page.php, ect.).

Next, in our blank canvas, include the template header. This is no different from creating a custom template for any other WordPress theme.
Drop the following code at the top of your file. This name will show what is in the drop down for templates.

<?php /* 
Template Name: Template Name Here
*/ ?>

This is where things change. Normally you will begin to include the header get_header(); but, instead the template file in genesis acts much like functions.php: Using hooks and custom function we can change the output of the template file. For example, if this template was to only query a custom post type you have set, you can use the genesis_loop hook to add your own custom loop.

<?php
remove_action('genesis_loop', 'genesis_do_loop');
/**
 * Example function that replaces the default loop
 * with a custom loop querying 'PostType' CPT.
*/
add_action('genesis_loop', 'gt_custom_loop');
function gt_custom_loop() {
global $paged;

    $args = array('post_type' => 'PostType');
    // Accepts WP_Query args 
    // (http://codex.wordpress.org/Class_Reference/WP_Query)
    genesis_custom_loop( $args );

}
?>

Since this function is only present in this template it will only be called on a page using the custom template.

Finally, we end the file with a function from genesis that calls in the rest of the template. 

<?php genesis(); ?>

*note – This function is only available for child themes running off genesis v1.3 for earlier versions. use require_once(PARENT_DIR. '/index.php'); . However, it is highly recommended you upgrade to the latest version.

Save the file and push it up to your theme directory. Create or find the page you were wishing to use it on and select your template from the drop down of available templates. Once you publish your page you should see your custom template in action. Simple as that.

Recommended way: custom-template.php

The positive of creating custom templates this way is the amount of code. No need pulling in any the structural divs or default functions you would want to use. It is all included within genesis();. The other advantage of this method is you future proof your template file.

I know understanding hooks can be a little complicated so, I have included a template file that is the actual structure containing the main genesis hooks in their place. You may use this template to build templates, though it is not recommended. Think of it more as a learning tool.
Non-recommended way: custom-template-alt.php

Filed Under: Tutorial
Short link: http://goo.gl/HE1zp

How to Define Genesis default options

August 10, 2010 by 1 Comment

So was browsing twitter today and saw this http://twitter.com/bpmore/status/20822795914

Is it possible to define presets for #GenesisWP so that when I add new sites, I don’t have to check/uncheck various settings?

It sure is!

drop this function in your child theme’s function.php

add_filter('genesis_options', 'define_genesis_setting_custom', 10, 2);
function define_genesis_setting_custom($options, $setting) {
	if($setting == GENESIS_SETTINGS_FIELD) {
		$options['nav_type'] = 'categories';
	}
	return $options;
}

The code above will set the main navigation to use categories instead of pages ( as set by default in genesis options. )
['nav_type'] is the option want to set and 'categories' is the value.

Genesis is a great framework and has some even greater settings and options. However, it may not always be the best idea for the options to be available for a client. Sometimes to many options may be overwhelming or curiosity may strike and experimentation begin.

With this code you can set all the default values for the Genesis options and hide the menu to access them. This is great for those curious clients that love checking and unchecking boxes or not having to worry about supporting multiple layouts. Hiding the extra options and setting the default values allows your site to be kept the way you set it up to be and helps decrease the chance of an email saying that something has broken on the site (by the client messing with options; can’t promise keeping your code from breaking).

*tip – Besides defining the options to just keep clients from changing things around, this filter is also very helpful for batch genesis site making. Quickly set options for themes by just dropping your predefined options into each your child theme’s function.php.

Define Default Options

The code below is to set all the options within Genesis Settings. Each option in the list below is using the default values.

// Define Genesis Options
add_filter('genesis_options', 'define_genesis_setting_custom', 10, 2);
function define_genesis_setting_custom($options, $setting) {
	if($setting == GENESIS_SETTINGS_FIELD) {
		$options['update'] = 1;
		$options['blog_title'] = 'text';
		$options['header_right'] = 0;
		$options['site_layout'] = 'content-sidebar';
		$options['nav'] = 1;
		$options['nav_superfish'] = 1;
		$options['nav_home'] = 1;
		$options['nav_type'] = 'pages';
		$options['nav_pages_sort'] = 'menu_order';
		$options['nav_categories_sort'] = 'name';
		$options['nav_depth'] = 0;
		$options['nav_extras_enable'] = 0;
		$options['nav_extras'] = 'date';
		$options['nav_extras_twitter_id'] = '';
		$options['nav_extras_twitter_text'] = 'Follow me on Twitter';
		$options['subnav'] = 0;
		$options['subnav_superfish'] = 1;
		$options['subnav_home'] = 0;
		$options['subnav_type'] = 'categories';
		$options['subnav_pages_sort'] = 'menu_order';
		$options['subnav_categories_sort'] = 'name';
		$options['subnav_depth'] = 0;
		$options['feed_uri'] = '';
		$options['comments_feed_uri'] = '';
		$options['redirect_feeds'] = 0;
		$options['comments_pages'] = 0;
		$options['comments_posts'] = 1;
		$options['trackbacks_pages'] = 0;
		$options['trackbacks_posts'] = 1;
		$options['author_box_single'] = 1;
		$options['breadcrumb_home'] = 1;
		$options['breadcrumb_single'] = 1;
		$options['breadcrumb_page'] = 1;
		$options['breadcrumb_archive'] = 1;
		$options['breadcrumb_404'] = 1;
		$options['content_archive'] = 'full';
		$options['content_archive_thumbnail'] = 0;
		$options['posts_nav'] = 'older-newer';
		$options['blog_cat'] = '';
		$options['blog_cat_exclude'] = '';
		$options['blog_cat_num'] = 10;
		$options['header_scripts'] = '';
		$options['footer_scripts'] = '';
		$options['theme_version'] = PARENT_THEME_VERSION;
		}
	return $options;
}

View available values for each option click here (a box will appear below listing each).

Remove Access to Genesis Admin Menu

remove_theme_support('genesis-admin-menu');

Removing per Post/Page Layout Options

This one comes in handing especially for theme designs where only one layout may seem fit.

remove_theme_support('genesis-inpost-layouts');

The code above should be placed in the child theme’s functions.php file anywhere after the following line:

require_once(TEMPLATEPATH.'/lib/init.php');

And before the following closing code (if it exists):

?>
Filed Under: Tutorial
Short link: http://goo.gl/ZVkWv

How to Filter the Genesis Footer Creds

July 31, 2010 by 4 Comments

Giving some credit back to whoever helped with your genesis child theme is just good courtesy, may it be the coffee that keeps you going, plug-in used on your site, or even a company, freelancer or friend that helped in coding and/or designing. A link leading back to them in the footer is a great way to say your thanks.

Or maybe you are a freelancer, or a company that works with genesis and you want to put your name on your work. That is fine too.

So how can you? Sure, you can remove the entire footer in genesis, but if all you want to do is change the credit links, this is the way to go.

Simply just add the following code to your functions.php file in your child theme:

add_filter('genesis_footer_creds_text', 'custom_footer_creds_text');
function custom_footer_creds_text($creds) {
 $creds = '[footer_copyright]' . get_bloginfo('name') . ' &bull; Built on the [footer_genesis_link] powered by [footer_wordpress_link]';
 return  $creds;
}

The code above will output

© 2010 Your Site Name Here • Built on the Genesis Theme Framework powered by WordPress

To customize this more to your needs change the string in $creds to anything you want. Remember to give credit back to the guys over at Studiopress for their awesome Framework.

Filed Under: Tutorial Tagged With: ,
Short link: http://goo.gl/XdYgn

How to Filter the Genesis Breadcrumb Trail

June 21, 2010 by 7 Comments

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')
Filed Under: Theming, Tutorial Tagged With:
Short link: http://goo.gl/NnTgM