TUTORIALS

Genesis Basics
An Introduction to Child Themes
With the launch of Genesis in the rear view mirror, I thought it would be helpful to start
introducing some of the elements of a framework. They are a relatively new thing in the
WordPress world and a lot of people either don’t know what one is or how they work.

What is a Framework?

In short, a framework is a robust WordPress theme that can be utilized out of the box as is, but
also easily extended with child themes and hooks. Not only do they provide a number of
enhancements above a typical WordPress theme, but they also serve as a platform to build
upon for additional functionality. This post will focus exclusively on the Genesis Framework and
how it is structured.

What is a Child Theme?

A child theme is an extension of a framework which is comprised of typical theme elements –

with Genesis, it includes a screenshot, theme files, a stylesheet, a functions file and an images
folder. These elements are grouped together in what’s known as a child theme folder and can
be activated like any other WordPress theme. To help explain the relationship of a child theme
and the parent Genesis Framework, I’ll go into detail with each one.

A Screenshot

All WordPress themes have a screenshoot image included – typically this is called
“screenshot.png”, is 600 x 450 in dimension and is a visual display of the theme, which can be
seen on the Appearance > Themes page inside your WordPress dashboard. Since child themes
have their own folders and are activated like any other theme, they require a screenshot like a
standard theme.

Theme Files

The Genesis Framework, which in essence is the parent theme, is where all of the theme files
are kept. This would include the typical theme files such as 404.php, comments.php, footer.php,
header.php, index.php, page.php, single.php and so on. Child themes can also include these
files – and the hierarchy works in a way that if any of those files exist in the child theme folder,
they will override the parent theme. In other words, if you customize a footer.php file and place it
into your child theme folder, that will be used in lieu of the one in the Genesis parent theme.
Currently the only theme files that may be found in some of the Genesis child themes are a
custom home.php file, which will control the way a site’s homepage will appear. If one is not a
part of a child theme, then the theme will use the index.php file, in the Genesis-parent theme,
for the homepage.

A Stylesheet

Many frameworks are built in a way that imports the parent theme stylesheet, then allows for
customizations to be made by way of the child theme stylesheet. While there is nothing wrong
with the way that works, we’ve chosen to simplify things and just give the child theme it’s own
stylesheet. In other words, if a child theme is being used, the style.css file in the child theme
folder has complete control over the way the child theme looks. You don’t have to compare
multiple stylesheets to look for and change style elements.

A Functions File

Most WordPress themes have a functions.php file – which is typically a file where you can
control certain behaviors of how WordPress is run or how the theme outputs various things. For
instance, a functions file can register sidebar widgets and how they are styled, as well as a
number of other “function” related things. With Genesis, the functions.php is simple – it calls the
entire framework to run and that is the only code found there. The great thing about the way
Genesis is built, is that the child theme’s functions file is where a number of things occur –
additional sidebar widgets can be registered, and from a development side, custom functions
are defined as well as filtered and hooked. (more on that in upcoming posts.)

An Images Folder

This one is pretty self-explanatory – as with any WordPress theme, there is an images folder
which is used to hold images that a theme requires. Use this to hold background images, icons,
navbar gradients, and what not.

In Conclusion

The easiest way for me to explain the relationship between a parent theme and child theme, at
least in Genesis’ case is to relate it to a cell phone. The Genesis parent theme is the cell phone,
and the child theme is the case you hold it in. You’ll always use the same phone, but if you want
to change the way it looks on the outside, you put a cover on it to make it look different. The
same holds true with a child theme – as that is what “decorates” the way your theme looks.

An Introduction to Hooks
Now that we have launched the Genesis Framework and have some child themes available, I
thought it would be helpful to spend some more time explaining the basics of Genesis.

What is a Hook?

A hook is a piece of code written into a theme, that allows you to attach content to the theme
itself. In other words, it provides the ability to extend functionality by way of inserting (or
hooking) code.

What Does a Hook Look Like in a Theme File?

If you open up any of the Genesis Framework files, you’ll be able to spot many of them. For
instance, if you open up the footer.php file, you’ll see this code:

<?php genesis_before_footer(); ?>

<div id="footer">

<div class="wrap">

<?php genesis_footer(); ?>

The very first line of this code is considered a hook – this allows you the ability to add content or
“hook” the content to a specific location. In this case, you’ll see that it occurs before the footer.

What is an Example of Using a Hook?

Many folks like the idea of a widgeted footer area, but not all of our themes have one. A perfect
example of what you can do with a hook is to add a widgeted footer area above the footer.
Below is an explanation how you would do that.

Step #1
Create a new file and place it into your child theme folder. Name it something that makes sense
for what content it contains… bottom-widgets.php.
Step #2
Use this file just like you would use a sidebar.php file. Insert your markup and additional CSS,
do the conditional widget calls, etc.

Step #3
Now, you want to create a function that will allow the contents of your bottom-widgets.php file to
be hookable – which you can do by adding this code to your child theme’s functions.php file:

function include_bottom_widgets() {

require(CHILD_DIR.'/bottom-widgets.php');

Step #4
Now we want to instruct the child theme to execute the function from Step #3 directly above the
footer. No problem… we’ll use a hook – so you would place this code to do it:

add_action('genesis_before_footer', 'include_bottom_widgets');

That line of code tells the Genesis engine… take the include_bottom_widgets function, and
attach it to the genesis_before_footer hook, and execute. If you open up genesis/footer.php you
can see the exact location of the genesis_before_footer() hook so you’ll know where your
function will execute.

The Result
This process is like inserting code directly in the parent theme files, only slightly different.
Instead of inserting the code directly, you attach it to hooks that have been placed in various
locations throughout the genesis source code.

Your final product looks like this in your child theme’s functions.php file:

add_action('genesis_before_footer', 'include_bottom_widgets');

function include_bottom_widgets() {

require(CHILD_DIR.'/bottom-widgets.php');

Additional Benefits

By using hooks, you can simplify your design process and theme management because you
only need to create the additional functionality code once and have it stored in the file you
created (in this example, bottom-widgets.php), but you can hook it into multiple locations on
your theme.

No more repetition of code blocks hard-coded into several templates as you will have it in one
file. When you update it, that change will affect all areas of your theme where you have it
hooked to.
Building Child Themes
Many folks who are using Genesis would like to know how to build a child theme from scratch.
This section of the Genesis Development site will help you take the sample child theme and
customize it. Bookmark this page as we’ll be frequently adding tutorials and best practices.

Child Theme Development – Best Practices

Best Practices When Building WIth Genesis

Below is a list of the most common best practices you should follow when building sites off of
the Genesis Framework.

General Best Practices

1. Use Genesis Coding Conventions

These are basically WordPress coding standards when writing code (no PHP shortcode,
properly indented, spaces within brackets and around args, etc). Comment code where
necessary.

2. WordPress/PHP Compatibility
Making sure that your theme is compatible is a must when using the current Genesis version.
PHP compatibility must be as per current WordPress requirements. If you really, really must use
some PHP latest funky function, make sure it fails gracefully on “lesser” servers.

3. Custom/Genesis Functions
When writing custom functions to replace existing Genesis functions, respect the structure and
content of the underlying function. Eg, if an existing function provides a filter on the output, the
replacement function should do the same. Re-use Genesis functions rather than writing your
own.

4. Naming/Checking Functions
Function naming: include the childthemename in the function name. For example, if replacing
genesis_do_post_title with your own function, name it childthemename_do_post_title. Same
applies to custom filter functions. Use function_exists for conditional loading of a third party (ie:
external plugin) function. Not required for Genesis or child theme-defined functions.
5. Loading jQuery Scripts
Don’t load jQuery framework (or any other framework shipped with WordPress) from external
sources without using wp_deregister_script to deregister the built-in version and
wp_register_script to register the new one, etc.

Stylesheet Header

Below is the recommended way to build your Genesis child theme style sheet header:

/*

Theme Name: Sample

Theme URI: http://www.yourdomain.com/

Description: This is a sample child theme created for the Genesis Framework.

Author: Your Business Name

Author URI: http://www.yourbusiness.com/

Version: 1.0

Tags: custom-background, custom-header, featured-images, threaded-comments, two-columns

Template: genesis

Template Version: 1.7.1

License: GNU General Public License v2.0

License URI: http://www.opensource.org/licenses/gpl-license.php

*/

Theme Name
This is the name of the child theme – you can change this to read as you like.

Theme URI
This is the link where the child theme can be downloaded or purchased.
Description
This is where you can describe the child theme and list the features that come with it.

Author
This is where you can identify the individual or company that developed the child theme.

Author URI
This is the link for the individual or company that developed the child theme.

Version
This is where you specify the version of your child theme.

Tags
This is where you can specify certain features of the child theme.

Template
This tells the child theme to run off the Genesis Framework and is required for the child theme
to function properly.

Template Version
This is the minimum version of the Genesis Framework that is required for the child theme to
function properly.

License
This is where you specify the type of license that you are releasing the child theme under.

License URI
This is the link for the license that you are releasing the child theme under.

Code Organization
Code

Code that is specific to a child-theme page template should be placed in that page template file.
(The permitted exception is home.php, for no other reason than that’s what we’ve got used to).

Admin UI

Additional settings screens or option boxes should go in a childthemename-theme-settings.php

file.
Editor UI

Additional Editor metaboxes (post/page editor etc) should go in a childthemename-inpost-

metaboxes.php file

Javascript

Javascript used in front-end should go in a /lib/js folder and javascript used in admin should go
in a /lib/js/admin folder.

Script and Additional CSS

Script and additional CSS should be loaded via functions.php

File Organization
Should mimic Genesis file/folder structure, as noted below:

functions.php
home.php
style.css
screenshot.jpg
README.txt
page-special.php
page-another-special.php
images /
lib / admin / childthemename-settings.php
lib / admin / childthemename-seo-settings.php
lib / admin / childthemename-inpost-metaboxes.php
lib / js / childthemename-funky-script.js
lib / widgets / childthemename-amazing-widget.php
lib / widgets / childthemename-evenmoreamazing-widget.php

Note: Use hyphens to separate words in file names, not underscores.

Using the Functions File

Rule #1

Structure should be logical and go from general to specific:

 Start engine
 Include anciliary files (using require_once and built-in Genesis DIR constants, eg
CHILD_DIR)
 Register additional featured image sizes
 Register additional widget areas/sidebars
 Load scripts / custom stylesheets
 Functions hooked to standard WP filters (eg excerpt, content)
 Layout, eg forcing layout on home.php or elsewhere
 Post classes, eg adding new class to particular posts etc
 Site-wide remove Genesis actions
 Site-wide add to Genesis actions
 Custom functions

Rule #2

Add additional image sizes using add_image_size(). Include the theme name in the image size
name, eg ‘Lifestyle Thumbnail’

Rule #3

Register theme-specific widget areas using genesis_register_sidebar(). Always assign an ID to

each sidebar.

Rule #4

Use wp_enqueue_script to load js. (See note General[8] about js frameworks)

Creating New Settings

Rule #1

Genesis Theme Settings and SEO Settings admin pages are reserved for Genesis framework.
Add child theme options in a new Child Theme Settings sub-page.

Rule #2

The Child Theme settings page must be added as a sub-menu of the main Genesis menu. Don’t
add it as a top-level menu item.
Rule #3

To keep a consistent look and feel, use the Genesis theme options code as the basis of your
code.

Rule #4

New settings options should be named using the child theme name, eg
[childthemename_special_option]

Creating New Page Templates

Rule #1

Code which only applies to a page template should go in that page template.

Rule #2

Use meaningful file naming, eg page-gallery.php is more meaningful than page-custom.php

Rule #3

Include genesis(); at end of file.

Rule #4

Use remove_action to modify the loop

Rule #5

Avoid writing your own loop code – use genesis_custom_loop and modify output with
remove/add actions. If you need a loop counter, one is already built-in to genesis_custom_loop
Child Theme Development – Building Child Themes

How to Add Footer Widgets

If you would like to add footer widgets to the sample child theme, follow the instructions below.

1. Add Support For Footer Widgets

Open up the Genesis sample child theme’s functions.php file and add the following code. The
code should be entered at the end of the file, just before the closing ?> if there is one.

/** Add support for 3-column footer widgets */

add_theme_support( 'genesis-footer-widgets', 3 );

If you would like to create a 4-column widgeted footer, the code would look like this:

/** Add support for 4-column footer widgets */

add_theme_support( 'genesis-footer-widgets', 4 );

2. Add CSS to the Stylesheet

Lastly, open up the child theme’s style.css file and add the code below. Please note that this
CSS is designed for a 3-column widgeted footer section. If you are using any more/less
columns, you’ll need to modify or add to your CSS accordingly.

/* Footer Widgets

------------------------------------------------------------ */

#footer-widgets {

-khtml-border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

background-color: #f5f5f5;

border: 1px solid #ddd;

 border-radius: 3px;

clear: both;

margin: 0 auto 10px;

overflow: hidden;

width: 958px;

#footer-widgets .wrap {

font-size: 13px;

line-height: 20px;

overflow: hidden;

padding: 15px 19px 0;

#footer-widgets .widget {

background: none;

border: none;

margin: 0 0 15px;

padding: 0;

#footer-widgets .textwidget {

padding: 0;

#footer-widgets h4 {
 background: none;

border: none;

margin: 0 0 5px;

padding: 0;

#footer-widgets .widget_tag_cloud div div {

padding: 0;

#footer-widgets p {

font-size: 13px;

line-height: 20px;

padding: 0 0 10px;

#footer-widgets ul {

margin: 0;

#footer-widgets ul li {

margin: 0 0 0 20px;

#footer-widgets #wp-calendar thead,

#footer-widgets #wp-calendar td {
 background: none;

.footer-widgets-1 {

float: left;

margin: 0 20px 0 0;

width: 295px;

.footer-widgets-2 {

float: left;

width: 290px;

.footer-widgets-3 {

float: right;

width: 295px;

How to Setup the Custom Header Function

The easiest way to customize Genesis is to utilize functions such as custom header that are
native to WordPress and select child themes. With custom header, you have the capability of
uploading a header graphic for your site, as well as selecting the option to display dynamic text
for your site title and tagline.

The heavy lifting of custom header is built into Genesis and needs to be activated on the child
theme level. Inside your child theme’s functions.php file, enter code below. Obviously you can
modify the width and height of your custom header to suite the needs of your site.

/** Add support for custom header **/

add_theme_support( 'genesis-custom-header', array( 'width' => 960, 'height' => 100 ) );

The code above should be placed anywhere after this:

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

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

?>

Custom Header Parameters

‘width’
integer, default is 960

‘height’
integer, default is 80

‘textcolor’
hexadecimal value with no leading #, default is 333333

‘no_header_text’
boolean, default is false

‘header_image’
path/to/image.png, defaults to child theme’s images/header.png

‘header_callback’
function name, default is genesis_custom_header_style

‘admin_header_callback’
function name, default is genesis_custom_header_admin_style.

How to Use the Genesis Grid Loop

Sites like ChrisBrogan.com required custom code to accomplish that left-right grid loop on the
homepage, so we thought it’d be a good idea to build the function that does the heavy lifting into
core, add some useful parameters, and make it official. (You can also view a more advanced
tutorial regarding the Genesis Grid Loop.)

This feature is really simple to use and can be implemented by following these steps:
1. Include Required CSS

/* Featured Post Grid

------------------------------------------------------------ */

.genesis-grid-even {

float: right;

padding: 0 0 15px;

width: 48%;

.genesis-grid-odd {

clear: both;

float: left;

padding: 0 0 15px ;

width: 48%;

.genesis-grid-even,

.genesis-grid-odd {

margin: 0 0 20px;

2. Add Featured Image Size

If you would like to display featured images (or grid thumbnails), you’ll need to register the new
featured image size(s). Simply open up your child theme’s functions.php file and place the code
below into it. You will need to re-upload any post images for the new size to display, or you can
use the Regenerate Thumbnails plugin.
/** Add new image sizes **/

add_image_size('grid-thumbnail', 100, 100, TRUE);

3. Create a home.php File

<?php

remove_action( 'genesis_loop', 'genesis_do_loop' );

add_action( 'genesis_loop', 'child_grid_loop_helper' );

/** Add support for Genesis Grid Loop **/

function child_grid_loop_helper() {

if ( function_exists( 'genesis_grid_loop' ) ) {

genesis_grid_loop( array(

'features' => 2,

'feature_image_size' => 0,

'feature_image_class' => 'alignleft post-image',

'feature_content_limit' => 0,

'grid_image_size' => 'grid-thumbnail',

'grid_image_class' => 'alignleft post-image',

'grid_content_limit' => 0,

'more' => __( '[Continue reading...]', 'genesis' ),

'posts_per_page' => 6,

) );

} else {

genesis_standard_loop();

}
/** Remove the post meta function for front page only **/

remove_action( 'genesis_after_post_content', 'genesis_post_meta' );

genesis();

4. Understanding the Parameters

‘features’
This is the number of posts that will show at the top of the page.

‘feature_image_size’
This is the size of the featured image in the features section to be shown (set to 0, which will
return no image).

‘feature_image_class’
This is where classes are assigned to the featured image in the features section which can be
used for styling.

‘feature_content_limit’
This is where you can specify the number of characters of the post to show in the features
section (set to 0, which will return the full content).

‘grid_image_size’
This is the size of the image in the grid section to be shown (set to 0, which will return nothing).

‘grid_image_class’
This is where classes are assigned to the featured image in the grid section which can be used
for styling.

‘grid_content_limit’
This is where you can specify the number of characters of the post to show in the grid section
(set to 0, which will return the post excerpt).

‘more’
This is where you can specify the text that is displayed when using the content limit option.

‘posts_per_page’
This is were you can determine how many posts are shown on each page.

Filter Reference
Below is a list of filters that have been built into the Genesis Framework:
Comments Section Filters

genesis_title_comments
Default value: __(‘<h3>Comments</h3>’, ‘genesis’)
Applied to the comments title text as well as heading tags in the genesis_do_comments
function.

genesis_no_comments_text
Default value: (empty)
Applied to the no comments text if commenting is enabled but there are no comments so far in
the genesis_do_comments function.

genesis_comments_closed_text
Default value: (empty)
Applied to the closed comment text if commenting is disabled in the genesis_do_comments
function.

genesis_title_pings
Default value: __(‘<h3>Trackbacks</h3>’, ‘genesis’)
Applied to the trackbacks title text as well as heading tags in the genesis_do_pings function.

genesis_no_pings_text
Default value: (empty)
Applied to the no pings text if ping is enabled but there are no trackbacks so far in the
genesis_do_pings function.

genesis_comment_list_args
Default value: $args
Applied to the arguments used in wp_list_comments in the genesis_default_list_comments
function.

genesis_ping_list_args
Default value: $args
Applied to the arguments used in wp_list_comments in the genesis_default_list_pings function.

comment_author_says_text
Default value: __(‘says’, ‘genesis’)
Applied to the comment author “says” text in the genesis_comment_callback function.

genesis_comment_form_args
Default value: $args, $user_identity, $id, $commenter, $req, $aria_req
Applied to the arguments used in comment_form in the genesis_do_comment_form function.
Footer Section Filters

genesis_footer_backtotop_text
Default value: [footer_backtotop]
Applied to the back to top text in the genesis_do_footer function.

genesis_footer_creds_text
Default value: __(‘Copyright’, ‘genesis’) . ‘ [footer_copyright] [footer_childtheme_link] &middot;
[footer_genesis_link] [footer_studiopress_link] &middot; [footer_wordpress_link] &middot;
[footer_loginout]’
Applied to the credits text in the genesis_do_footer function.

genesis_footer_output
Default value: $output, $backtotop_text, $creds_text
Applied to final output of genesis_do_footer including the back to top and credits text as well as
div structure.

genesis_footer_scripts
Default value: genesis_option(‘footer_scripts’)
Applied to the output of the footer scripts.

Header Section Filters

genesis_seo_title
Default value: $title, $inside, $wrap
Applied to the output of the genesis_seo_site_title function which depending on the SEO option
set by the user will either wrap the title in <h1> or <p> tags.

genesis_seo_description
Default value: $description, $inside, $wrap
Applied to the output of the genesis_seo_site_description function which depending on the SEO
option set by the user will either wrap the description in <h1> or <p> tags.

genesis_pre_load_favicon
Default value: false

genesis_header_scripts
Default value: genesis_get_option(‘header_scripts’)
Applied to the output of the header scripts.
Loop Filters

genesis_custom_loop_args
Default value: wp_parse_args($args, $defaults), $args, $defaults
Applied to the arguments for use in WP_Query in the genesis_custom_loop function.

genesis_post_title_text
Default value: get_the_title()
Applied to the title in the genesis_do_post_title function.

genesis_post_title_output
Default value: $title
Applied to the output of the title and wrapping heading tags in the genesis_do_post_title
function.

genesis_noposts_text
Default value: __(‘Sorry, no posts matched your criteria.’, ‘genesis’)
Applied to the no post text which is returned when a query is made with no results in the
genesis_do_noposts function.

genesis_post_info
Default value: $post_info
Applied to the post info outputted by the genesis_post_info function.

genesis_post_meta
Default value: $post_meta
Applied to the post meta outputted by the genesis_post_meta function.

genesis_author_box_gravatar_size
Default value: 70
Applied to the author box gravatar image size in the genesis_author_box function.

genesis_author_box_title
Default value: sprintf( ‘<strong>%s %s</strong>’, __(‘About’, ‘genesis’), get_the_author() )
Applied to the author box title in the genesis_author_box function.

Search Form Filters

the_search_query
Default value: get_search_query()
Applied to the search query in the genesis_search_form function.

genesis_search_text
Default value: esc_attr__(‘Search this website…’, ‘genesis’)
Applied to the search field text in the genesis_search_form function.
genesis_search_button_text
Default value: esc_attr__( ‘Search’, ‘genesis’ )
Applied to the search form button text in the genesis_search_form function.

genesis_search_form
Default value: $form, $search_text, $button_text
Applied to the final output search form in the genesis_search_form function.

Misc. Filters

genesis_breadcrumb_args
Default value: $args
Applied to the breadcrumb arguments in the genesis_breadcrumb function.

genesis_breadcrumb_homelink
Default value: $homelink
Applied to the breadcrumb home link in the genesis_breadcrumb function.

genesis_breadcrumb_bloglink
Default value: $bloglink
Applied to the breadcrumb blog link in the genesis_breadcrumb function.

genesis_gravatar_sizes
Default value: $sizes
Applied to the sizes Small, Medium, Large, Extra Large in the Genesis User Profile Widget.

Image Filters

genesis_get_image_default_args
Default value: $defaults
applied to the default arguments added to genesis_get_image function.

genesis_pre_get_image
Default value: false, $args, $post
Allows child theme to short-circuit the genesis_get_image function

genesis_get_image
Default value: $output, $args, $id, $html, $url, $src
Menu Filters

genesis_nav_default_args
Default value: $defaults
applied to the default arguments added to genesis_nav function.

genesis_pre_nav
Default value: false, $args
Allows child theme to short-circuit the genesis_nav function

genesis_nav_home_text
Default value: __(‘Home’, ‘genesis’), $args
Applied to the Home text in the genesis_nav function.

genesis_nav_items
Default value: $menu, $args
Applied to the nav items in the genesis_nav function

genesis_nav
Default value: $menu, $args
Applied to the final nav output in the genesis_nav function

Option Filters

genesis_pre_get_option_
Default value: $key, false, $setting
Allows child theme to short-circuit the genesis_get_option function

genesis_options
Default value: $settings_cache[$setting], $setting

genesis_get_option function
Default value: get_option($setting), $setting

Footer Shortcode Filters

genesis_footer_backtotop_shortcode
Default value: $output, $atts
applied to the default atts and output for the back to top shortcode.

genesis_footer_copyright_shortcode
Default value: $output, $atts
applied to the default atts and output for the copyright shortcode.
genesis_footer_childtheme_link_shortcode
Default value: $output, $atts
applied to the default atts and output for the child theme link shortcode.

genesis_footer_genesis_link_shortcode
Default value: $output, $atts
applied to the default atts and output for the Genesis Link shortcode.

genesis_footer_studiopress_link_shortcode
Default value: $output, $atts
applied to the default atts and output for the StudioPress link shortcode.

genesis_footer_wordpress_link_shortcode
Default value: $output, $atts
applied to the default atts and output for the WordPress link shortcode.

genesis_footer_loginout_shortcode
Default value: $output, $atts
applied to the default atts and output for the log in/out shortcode.

Post Shortcode Filters

genesis_post_date_shortcode
Default value: $output, $atts
applied to the default atts and output for the date shortcode.

genesis_post_time_shortcode
Default value: $output, $atts
applied to the default atts and output for the time shortcode.

genesis_post_author_link_shortcode
Default value: $output, $atts
applied to the default atts and output for the author link shortcode.

genesis_post_author_shortcode
Default value: $output, $atts
applied to the default atts and output for the author shortcode.

genesis_post_comments_shortcode
Default value: $output, $atts
applied to the default atts and output for the post comments shortcode.

genesis_post_tags_shortcode
Default value: $output, $atts
applied to the default atts and output for the post tags shortcode.
genesis_post_categories_shortcode
Default value: $output, $atts
applied to the default atts and output for the post categories shortcode.

genesis_post_edit_shortcode
Default value: $output, $atts
applied to the default atts and output for the post edit shortcode.

Init Filters

genesis_settings_field
Default value: genesis-settings
Applied to the defined Settings Field Constants (for DB storage for genesis settings).

genesis_seo_settings_field
Default value: genesis-seo-settings
Applied to the defined Settings Field Constants (for DB storage for genesis SEO settings).

genesis_formatting_allowedtags
Default value:

array(

// <p>, <span>, <div>

'p' => array( 'align' => array(), 'class' => array(), 'style' => array() ),

'span' => array( 'align' => array(), 'class' => array(), 'style' => array() ),

'div' => array( 'align' => array(), 'class' => array(), 'style' => array() ),

// <a href="" title="">Text</a>

'a' => array( 'href' => array(), 'title' => array() ),

// <b>, </i>, <em>, <strong>

'b' => array(), 'strong' => array(),

'i' => array(), 'em' => array(),

// <blockquote>, <br />

 'blockquote' => array(),

'br' => array()

) );

Applied to allowed formatting tags, used by wp_kses().

SEO Settings Filter

genesis_seo_settings_defaults
Default value: $defaults
applied to the default values for Genesis SEO Settings called in the
genesis_seo_settings_defaults function.

Theme Settings Filter

genesis_theme_settings_defaults
Default value: $defaults
applied to the default values for Genesis theme settings called in the
genesis_theme_settings_defaults function.

Hook Reference
Below is a list of hooks that have been built into the Genesis Framework:

Internal Action Hooks

genesis_pre
This is the first hook to execute within Genesis. Think of any function hooked to it as being
executed before any Genesis functions have loaded.

genesis_pre_framework
This hook executes immediately before any of the Genesis Framework components have been
loaded, but after all the constants have been defined.

genesis_init
This hook fires at the end of the /lib/init.php file. Think of any function hooked to it as being
executed after all Genesis functions have loaded, but before any custom code in the child
functions.php file is run.
Document Head Action Hooks

genesis_title
This hook executes between tags and outputs the doctitle. You can find all doctitle related code
in /lib/structure/header.php.

genesis_meta
This hook executes in the section of the document source. By default, things like META
descriptions and keywords are output using this hook, along with the default stylesheet and the
reference to the favicon.

Structural Action Hooks

genesis_before
This hook executes immediately after the opening tag in the document source.

genesis_after
This hook executes immediately before the closing tag in the document source.

genesis_before_header
This hook executes immediately before the header (outside the #header div).

genesis_header
By default, this hook outputs the header code, including the title, description, and widget area (if
necessary).

genesis_after_header
This hook executes immediately after the header (outside the #header div).

genesis_site_title
By default, this hook outputs the site title, within the header area. It uses the user-specified SEO
settings to build the site title markup appropriately.

genesis_site_description
By default, this hook outputs the site description, within the header area. It uses the user-
specified SEO settings to build the site description markup appropriately.

genesis_before_content_sidebar_wrap
This hook executes immediately before the div block that wraps the content and the primary
sidebar (outside the #content-sidebar-wrap div).

genesis_after_content_sidebar_wrap
This hook executes immediately after the div block that wraps the content and the primary
sidebar (outside the #content-sidebar-wrap div).

genesis_before_content
This hook executes immediately before the content column (outside the #content div).
genesis_after_content
This hook executes immediately after the content column (outside the #content div).

genesis_sidebar
This hook outputs the content of the primary sidebar, including the widget area output.

genesis_before_sidebar_widget_area
This hook executes immediately before the primary sidebar widget area (inside the #sidebar
div).

genesis_after_sidebar_widget_area
This hook executes immediately after the primary sidebar widget area (inside the #sidebar div).

genesis_sidebar_alt
This hook outputs the content of the secondary sidebar, including the widget area output.

genesis_before_sidebar_alt_widget_area
This hook executes immediately before the alternate sidebar widget area (inside the #sidebar-
alt div).

genesis_after_sidebar_alt_widget_area
This hook executes immediately after the alternate sidebar widget area (inside the #sidebar-alt
div).

genesis_before_footer
This hook executes immediately before the footer, outside the #footer div.

genesis_footer
This hook, by default, outputs the content of the footer, including the #footer div wrapper.

genesis_after_footer
This hook executes immediately after the footer, outside the #footer div.

Loop Action Hooks

genesis_before_loop
This hook executes immediately before all loop blocks. Therefore, this hook falls outside the
loop, and cannot execute functions that require loop template tags or variables.

genesis_loop
This hook outputs the actual loop. See lib/structure/loop.php and lib/structure/post.php for more
details.

genesis_after_loop
This hook executes immediately after all loop blocks. Therefore, this hook falls outside the loop,
and cannot execute functions that require loop template tags or variables.
genesis_after_endwhile
This hook executes after the endwhile; statement in all loop blocks.

genesis_loop_else
This hook executes after the else : statement in all loop blocks.

genesis_before_post
This hook executes before each post in all loop blocks (outside the post_class() div).

genesis_after_post
This hook executes after each post in all loop blocks (outside the post_class() div).

genesis_before_post_title
This hook executes immediately before each post title for each post within the loop.

genesis_post_title
This hook outputs the actual post title, contextually, based on what type of page you are
viewing.

genesis_after_post_title
This hook executes immediately after each post title for each post within the loop.

genesis_before_post_content
This hook executes immediately before the post/page content is output, outside the .entry-
content div.

genesis_post_content
This hook outputs the actual post content and if chosen, the post image (inside the #content
div).

genesis_after_post_content
This hook executes immediately after the post/page content is output, outside the .entry-content
div.

Comment Action Hooks

genesis_before_comments
This hook executes immediately before the comments block (outside the #comments div).

genesis_comments
This hook outputs the entire comments block, including the section title. It also executes the
genesis_list_comments hook, which outputs the comment list.

genesis_after_comments
This hook executes immediately after the comments block (outside the #comments div).
genesis_list_comments
This hook executes inside the comments block, inside the .comment-list OL. By default, it
outputs a list of comments associated with a post via the genesis_default_list_comments()
function.

genesis_before_pings
This hook executes immediately before the pings block (outside the #pings div).

genesis_pings
This hook outputs the entire pings block, including the section title. It also executes the
genesis_list_pings hook, which outputs the ping list.

genesis_after_pings
This hook executes immediately after the pings block (outside the #pings div).

genesis_list_pings
This hook executes inside the pings block, inside the .ping-list OL. By default, it outputs a list of
pings associated with a post via the genesis_default_list_pings() function.

genesis_before_comment
This hook executes before the output of each individual comment (author, meta, comment text).

genesis_after_comment
This hook executes after the output of each individual comment (author, meta, comment text).

genesis_before_comment_form
This hook executes immediately before the comment form, outside the #respond div.

genesis_comment_form
This hook outputs the actual comment form, including the #respond div wrapper.

genesis_after_comment_form
This hook executes immediately after the comment form, outside the #respond div.

Shortcode Reference
Shortcodes are a feature, supported by WordPress, and used in many plugins for easily
displaying more complex site elements. Genesis comes with a number of
handy shortcodes which can be used in a variety of ways on your site. These shortcodes are
often used to customize specific areas of your site such as the Post Info (byline), Post Meta,
and the Credits line in the footer of your site.
Genesis Specific Shortcodes

Post Shortcodes
Below is a list of shortcodes that can be used for in the post-info and post-meta sections.

[post_date]

This function produces the date of post publication. Here is a list of attributes for this short code:

 format – The format for the date. Defaults to the date format configured in your WordPress
options.
 before – Text/markup to place before the post date.
 after – Text/markup to place after the post date.
 label – Text to place before the post date.

Example:

[post_date format="F j, Y" label="Dated: "]

Output: Dated: November 15, 2011

[post_time]

This function produces the time of post publication. Here is a list of attributes for this short code:

 format – The format for the time. Defaults to the time format configured in your WordPress
options.
 before – Text/markup to place before the post time.
 after – Text/markup to place after the post time.
 label – Text to place before the post time.

Example:

[post_time format="g:i a"]

Output: 9:48 am

Note: More information on formatting date and time can be found here.
[post_author]

This function produces the author of the post (display name). Here is a list of attributes for this
short code:

 before – Text/markup to place before the post author name.

 after – Text/markup to place after the post author name.

Example:

[post_author before="<em>" after="</em>"]

Output: Brian Gardner

[post_author_link]

This function produces the author of the post (link to author URL). Here is a list of attributes for
this short code:

 nofollow – assign nofollow to the rel attribute in the link to the author. By default is set
to FALSE
 before – Text/markup to place before the post author link.
 after – Text/markup to place after the post author link.

Example:

[post_author_link before="<b>" after="</b>"]

Output: Brian Gardner

[post_author_posts_link]

This function produces the author of the post (link to author archive). Here is a list of attributes
for this short code:

 before – Text/markup to place before the post author link.

 after – Text/markup to place after the post author link.

Example:
[post_author_posts_link before="<b>" after="</b>"]

Output: Brian Gardner

[post_comments]

This function produces the comment link. Here is a list of attributes for this short code:

 zero – Text to display if zero comments on the post

 one – Text to display if one comment on the post
 more – Text to display if more than one comment on the post
 hide_if_off – Disable comment link even if comments is enabled.
 before – Text/markup to place before the post comment link.
 after – Text/markup to place after the post comment link.

Example:

[post_comments zero="No Comments" one="1 Comment" more="% Comments"]

Output:
No Comments: Leave a Comment
1 Comment: 1 Comment
Multiple Comments: 7 Comments

[post_tags]

This function produces the tag link list. Here is a list of attributes for this short code:

 sep – Separator between post tags

 before – Text/markup to place before the tag list. Default “Tagged With: “
 after – Text/markup to place after the tag list.

Example:

[post_tags sep=", " before="Tags: "]

Output: Tags: Tag Name

[post_categories]

This function produces the category link list. Here is a list of attributes for this short code:

 sep – Separator between post categories

 before – Text/markup to place before the post category list. Default “Filed Under: “
 after – Text/markup to place after the post category list.

Example:

[post_categories sep=", " before="Posted Under: "]

Output: Posted Under: Category #1

[post_edit]

This function produces the edit post link for logged in users. Here is a list of attributes for this
short code:

 link – Text for edit link. Default “(Edit)”

 before – Text/markup to place before the edit post link. Default “Filed Under: “
 after – Text/markup to place after the edit post link.

Example:

[post_edit before="<b>" after="</b>"]

Output: A link to the edit post/page screen for that post will be displayed only for logged in
users with a role that permits editing.

[post_terms]

This function produces a list of terms associated with the post from the specified taxonomy.
Here is a list of attributes for this short code:

 sep – Separator between the terms.

 before – Text/markup to place before the post terms list. Default “Filed Under: “
 after – Text/markup to place after the terms list.
 taxonomy – Which taxonomy to use. Default “category”
Footer Shortcodes
Below is a list of shortcodes that can be used in the site footer.

[footer_backtotop]

This function produces the “Return to Top” link list of attributes for this short code:

 text – Default: “Return to top of page”

 href – assign to which div this link is anchored. Default: #wrap
 nofollow – assign nofollow to the rel attribute in the link to backtop. Default set to true.
 before – Text/markup to place before the “Return to Top” link.
 after – Text/markup to place after the “Return to Top” link.

Example:

[footer_backtotop text="Top" href="#content"]

Output: Top of post

[footer_copyright]

This function produces the copyright. Here is a list of attributes for this short code:

 copyright – Default: ©
 first- Text/markup to place between teh copyright symbol and the copyright date.
 before – Text/markup to place before the copyright.
 after – Text/markup to place after the copyright.

Example:

[footer_copyright first="2005"]

Output: © 2005–2011

[footer_childtheme_link]

This function produces the child theme link. Here is a list of attributes for this short code:

 before – Text/markup to place before the childtheme link. Default: &middot

 after – Text/markup to place after the childtheme link.

Example:

[footer_childtheme_link before ="&middot;"]

Output: · Prose Theme

Note: Must be supported by Child Theme

[footer_genesis_link]

This function produces the genesis theme link. Here is a list of attributes for this short code:

 before – Text/markup to place before the genesis theme link.

 after – Text/markup to place after the genesis theme link.

Example:

[footer_genesis_link]

Output: Genesis Framework

[footer_studiopress_link]

This function produces the StudioPress link. Here is a list of attributes for this short code:

 before – Text/markup to place before the StudioPress link. Default: “by”

 after – Text/markup to place after the StudioPress link.

Example:

[footer_studiopress_link]

Output: by StudioPress
[footer_wordpress_link]

This function produces the WordPress link. Here is a list of attributes for this short code:

 before – Text/markup to place before the WordPress link.

 after – Text/markup to place after the WordPress link.

Example:

[footer_wordpress_link]

Output: WordPress

[footer_loginout]

This function produces the log in/out link. Here is a list of attributes for this short code:

 redirect – set redirect to a URL on login.

 before – Text/markup to place before the log in/out link.
 after – Text/markup to place after the log in/out link.

Example:

[footer_loginout redirect="http://www.studiopress.com/features/genesis"]

Output: Log out

Visual Markup Guide
Getting Started
How to Upgrade the Genesis Framework
The Genesis Framework was the first theme package to include an auto-update feature. We
make updating to the current version of Genesis a very simple process. Everything is integrated,
so you don’t have to call your developer. All updates are thoroughly tested, so you’re not playing
guinea pig.

NOTE: If you have made any changes directly to files in the /genesis/ folder,
upgrading willoverwrite these changes. Therefore, we recommend that you NEVER make
changes this way. Alternatively, use the CSS in the child theme folder to make stylistic
modifications, and use the proper PHP files in the child theme folder, along with the Genesis
Hook system, to make functional/output modifications.

Using the Automatic Upgrade feature

1. Before you upgrade anything, make sure you have backup copies of your child theme.
2. Click the “update now” link in the upgrade notification at the top your your dashboard page.

3. Confirm the upgrade.

4. After the new version is installed, click the link to complete the upgrade.
5. All done!

NOTE: If the “update now” nag is not displaying, enable it by going to the Genesis Options
section of your dashboard: Genesis > Theme Settings > Information … and click on the “Enable
Automatic Updates” checkbox.

Upgrading Manually

1. Before you upgrade anything, make sure you have backup copies of your child theme.
2. Delete the old genesis folder from your wp-content/themes directory
3. Unzip and upload the new genesis folder to your wp-content/themes directory
4. Log into the dashboard to complete the upgrade process.
Theme Customization Basic Skills
So, you have a nice new theme with tons of features, but you want to make changes so it will be
uniquely yours. You are at a crossroad. Do you hire a developer or do you become a
developer? There are risks and benefits for both. A skilled developer will know how to
accomplish things you never thought possible, they will transform your site into what you want it
to be, and it will happen much faster than your could do it yourself. A skilled developer is also an
expensive option. Developer rates generally start at $50/hour and run up to $200/hour for this
type of development, though some can charge more or less.

This sends many into the “I can do this myself” camp. The most obvious benefit to developing
the theme yourself is a potential savings of hundreds of dollars. This is certainly convincing, but
be sure to consider the hidden costs. What is your time worth? If you plan on having a great
looking and functioning site you will need to learn CSS, HTML, and enough PHP to understand
how to alter the code you find. It is something you can learn, but jumping straight into the deep
end isn’t advisable.

HTML
You will need to learn the basics of html or you won’t be able to follow the CSS tutorials or
create links, insert images, or much else. I strongly recommendW3Schools.com as an incredible
and free resource for learning HTML.

The most important concepts you will want to learn are:

 Divs
 Spans
 Anchors (links)
 Images
 Headings
 Paragraphs
 Breaks
 Lists

There are many other HTML elements, but if you can learn the ins and outs of these you will
have a good foundation for moving forward.

CSS
Once you have a firm foundation in HTML you will want to understand how to make it look
pretty. HTML without CSS is bland at best. CSS controls, size, color, background, layout, and
pretty much every visual component of your site. Again, I recommend W3Schools.com. Not only
do they have a basic explanation of every aspect of CSS, including some non standard uses
that you have to dig for, they include a “try it yourself” feature that lets you change the CSS
properties/values to see how it works.

There is a LOT to learn about CSS before you are a black belt, but if you can get the basics
down you can go back to W3Schools for additional details as you go. Be sure to learn:

 The Box Model

 Backgrounds
 Color
 Fonts
 Padding
 Border
 Margin
 Floats

Again, there is a LOT more to CSS than that, but if you are proficient in these concepts, you can
search for the rest of the answers pretty easily.

PHP
This is the single most difficult thing you will need to learn. PHP is about logic construction. It is
unlikely you will need to learn enough PHP to actually create anything, but you will need to learn
enough to alter the code you find in tutorials, and this means understanding what is happening.
You can learn many of these skills at W3Schools.com (seriously this is a great site).

You will want to have a pretty good grasp of these concepts:

 Strings
 Arrays
 Comments
 Variables
 If…Else
 Loops
 Functions

If you can learn this then you should be able follow most of what the code is doing and how to
adapt it to your unique needs.

Recommended Tools
Developers all have their preferred tools. Many use very expensive software to make their jobs
easier. If you are trying to save money, you probably want software in the inexpensive to free
range. Fortunately there are a lot of great tools available for little to nothing. in fact, every tool I
will recommend here is free.
FTP
You really need to learn how to access your site via FTP. Even if you do most of your editing in
the WordPress editor, you will need FTP in case you break the theme and can no longer access
your site. A few good FTP programs include:

 FileZilla: Available on all major OS including Linux

 Cyberduck: Mac specific
 WinSCP: Windows Specific
 FireFTP: FireFox FTP extension

Code Editor
File editors fall into a couple of categories. At the most basic you have plain text editors. Pretty
much all operating systems come with some kind of plain text editor such as “Notepad” for
Windows. You can open any web document in one of these editors, and this may be all you
need, however, there are extended text editors available that will markup your text, set tabs, and
even check for errors. Some will even connect via FTP to automatically update your files. A few
include:

 Notepad++
 NetBeans

Image Editor
Most folks are familiar with Adobe Photoshop. This is very expensive software, but you can get
most of the features with Photoshop Elements. Still I said I would be recommending free
programs, so if you are on a shoestring budget check out Gimp. This is a free image editor that
can be extended via free scripts and plugins into a very powerful image editor to rival
Photoshop. It can also open Photoshop (PSD) files. If you need to work with vector art you can
use Inkscape which works with Illustrator files.

Additional Tools
There are two other very important tools you need.

FireBug for FireFox is a Developers best friend. It can help you identify which CSS definition is
affecting a given element and lets you test changes to a live site, though you still need to add
the changes to your stylesheet to make it a permanent change. It has a lot of built-in functions
you are unlikely to need, but it’s great to have them if you ever need them. Safari and Chrome
also have a built-in developer tool set you can use. It functions much like FireBug. IE doesn’t
have anything at this time, but you can use FireBug Lite to access some of the features.
Validator This is an online web resource that will validate your website for proper HTML. Many
errors between browsers are not actually CSS related, but improper validation. Run your site
through this validator and then resolve the errors.

Recommended Developers
After reading this, you may decide that spending countless hours learning HTML, CSS and
programming, could be better spent creating your site’s content and that you would like to
expedite your website’s launch. If so, it is worth the investment to hire a skilled developer from
StudioPress’ Approved Designer list of great developers, many of which are also part of our
Moderator team. You can find the two lists here and also here.

How to Import the Demo Site’s Content

We’ve been asked many times if it’s possible install the demo theme’s content onto a fresh
installation of WordPress so that they can work backwards to understand how the themes are
configured. The XML file is included with your child theme in a folder labeled xml.

What you need to do is follow the instructions that are taken from the Importing Content page
from the WordPress website. To import from a WordPress export file into your blog follow these
steps.

How to Use the XML File to Import the Demo Site’s Content

1. Log into that blog as an administrator.

2. Go to Tools: Import in the blog’s admin panels.
3. Choose “WordPress” from the list.
4. Upload this file using the form provided on that page.
5. You will be asked to map the authors in this export file to users on the blog. For each
author, you may choose to map to an existing user on the blog or to create a new user.
6. You will then have the choice to import attachments, so click on the “Download and import
file attachments” box.
7. WordPress will import each of the posts, comments, and categories into your blog.

How to Install Genesis or a Child Theme

There are two ways to Installing the Genesis parent theme or a Genesis child theme – manually
with an FTP client, or automatically through the upload feature in the WordPress dashboard.
Below you will see both options. Please note that In order to use a child theme, you will also be
required to have the Genesis parent theme in the wp-content/themes directory on your server.

Installing Genesis or a Child Theme Through the WordPress Dashboard

1. Log in to your WordPress dashboard and go to Appearance > Add New Themes.
2. Just below the headline, you will see a link that says “Upload” – click that.
3. Click the browse button and find the genesis.zip file from your local machine (or if using a
child theme find the child theme’s zip file) and then click the “Install Now” button.

Installing Genesis or a Child Theme With an FTP Client

1. Download the theme zip file to your local machine and unzip it. You will see a theme folder
labeled "genesis" or possibly something else if you’re unzipping a child theme.
2. Log onto your server through an FTP client, and find your site’s wp-content/themes
directory. You will want to transfer the entire theme folder to that directory. If you are using a
child theme, you will need to transfer both the "genesis" theme folder as well as the child
theme folder to that directory.
3. Log in to your WordPress dashboard, and go to Appearance > Themes. There you will see
screenshots of the themes that are available for you to use. Click on the theme title (or
theme screenshot) for the theme you wish to activate. A preview of the theme will be shown,
and then you can click the Activate link in the top right of the preview window. If you wish to
use a child theme, make sure you activate the child theme, and not the Genesis parent
theme.

Notes

1. If you are looking for a good FTP client, you can check out Cute
FTP, Filezilla, Transmit orCyberduck – make sure you find one that is compatible with either
a PC or a Mac, depending on which you have.

Admin Management
Below is the code that you can use to remove the Genesis In-Post SEO Settings:

/** Remove Genesis in-post SEO Settings */

remove_action( 'admin_menu', 'genesis_add_inpost_seo_box' );

Below is the code that you can use to remove the Genesis Layout Settings:

/** Remove Genesis Layout Settings */

remove_theme_support( 'genesis-inpost-layouts' );

Below is the code that you can use to remove the Genesis menu link:

/** Remove Genesis menu link */

remove_theme_support( 'genesis-admin-menu' );

Below is the code that you can use to remove the Genesis SEO Settings menu link:

/** Remove Genesis SEO Settings menu link */

remove_theme_support( 'genesis-seo-settings-menu' );

Below is the code that you can use to remove Genesis Widgets from loading:

/** Remove Genesis widgets */

add_action( 'widgets_init', 'remove_genesis_widgets', 20 );

function remove_genesis_widgets() {

unregister_widget( 'Genesis_eNews_Updates' );

unregister_widget( 'Genesis_Featured_Page' );

unregister_widget( 'Genesis_User_Profile_Widget' );

unregister_widget( 'Genesis_Menu_Pages_Widget' );

unregister_widget( 'Genesis_Widget_Menu_Categories' );

unregister_widget( 'Genesis_Featured_Post' );

unregister_widget( 'Genesis_Latest_Tweets_Widget' );

Below is the code that you can use to unregister the Genesis Layout Settings on your site:
/** Unregister layout settings */

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' );

genesis_unregister_layout( 'full-width-content' );

Author Box
How to Customize the Author Box
Below is the code that you can use to modify the Author Box title:

/** Modify the author box title */

add_filter( 'genesis_author_box_title', 'child_author_box_title' );

function child_author_box_title() {

return '<strong>About the Author</strong>';

Below is the code that you can use to modify the size of the Gravatar:

/** Modify the size of the Gravatar in the author box */

add_filter('genesis_author_box_gravatar_size', 'child_author_box_gravatar_size');

function child_author_box_gravatar_size($size) {

return '90';

}
Breadcrumbs
How to Customize the Breadcrumbs
Below is the code that you can use to modify the Breadcrumbs home link:

add_filter ( 'genesis_home_crumb', 'child_amend_home_breadcrumb_link' ); // Genesis

>= 1.5

add_filter ( 'genesis_breadcrumb_homelink', 'child_amend_home_breadcrumb_link' );

// Genesis =< 1.4.1

/**

* Amend Home breadcrumb link.

* @author Gary Jones

* @param string $crumb HTML markup for Home breadcrumb

* @return string HTML markup

*/

function child_amend_home_breadcrumb_link( $crumb ) {

return preg_replace('/href="[^"]*"/', 'href="http://example.com/home"', $crumb);

Below is the code that you can use to reposition the Breadcrumbs:

/** Reposition the breadcrumbs */

remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

add_action( 'genesis_after_header', 'genesis_do_breadcrumbs' );

Below is the code that you can use to modify the Breadcrumbs display:

add_filter( 'genesis_breadcrumb_args', 'child_breadcrumb_args' );

/**

* Amend breadcrumb arguments.

* @author Gary Jones

* @param array $args Default breadcrumb arguments

* @return array Amended breadcrumb arguments

*/

function child_breadcrumb_args( $args ) {

$args['home'] = 'Home';

$args['sep'] = ' / ';

$args['list_sep'] = ', '; // Genesis 1.5 and later

$args['prefix'] = '<div class="breadcrumb">';

$args['suffix'] = '</div>';

$args['heirarchial_attachments'] = true; // Genesis 1.5 and later

$args['heirarchial_categories'] = true; // Genesis 1.5 and later

$args['display'] = true;

$args['labels']['prefix'] = 'You are here: ';

$args['labels']['author'] = 'Archives for ';

$args['labels']['category'] = 'Archives for '; // Genesis 1.6 and later

$args['labels']['tag'] = 'Archives for ';

$args['labels']['date'] = 'Archives for ';

$args['labels']['search'] = 'Search for ';

$args['labels']['tax'] = 'Archives for ';

$args['labels']['post_type'] = 'Archives for ';

$args['labels']['404'] = 'Not found: '; // Genesis 1.5 and later

 return $args;

Column Classes
How to Use Content Column Classes
In Genesis we have added the ability to create columns (column classes) within the content
area. Below you find instructions on how to use content column classes.

2-Columns

To add two columns of text, enter the text below into your post/page editor:

<div class="one-half first">This is an example of a WordPress post, you could edit this
to put information about yourself or your site so readers know where you are coming from.
You can create as many posts as you like in order to share with your readers what exactly
is on your mind.</div>

<div class="one-half">This is an example of a WordPress post, you could edit this to put
information about yourself or your site so readers know where you are coming from. You
can create as many posts as you like in order to share with your readers what exactly is
on your mind.</div>

3-Columns

To add three columns of text, enter the text below into your post/page editor:

<div class="one-third first">This is an example of a WordPress post, you could edit

this to put information about yourself or your site so readers know where you are coming
from. You can create as many posts as you like in order to share with your readers what
exactly is on your mind.</div>

<div class="one-third">This is an example of a WordPress post, you could edit this to

put information about yourself or your site so readers know where you are coming from.
You can create as many posts as you like in order to share with your readers what exactly
is on your mind.</div>

<div class="one-third">This is an example of a WordPress post, you could edit this to

put information about yourself or your site so readers know where you are coming from.
You can create as many posts as you like in order to share with your readers what exactly
is on your mind.</div>
4-Columns

To add four columns of text, enter the text below into your post/page editor:

<div class="one-fourth first">This is an example of a WordPress post, you could edit

this to put information about yourself or your site so readers know where you are coming
from. You can create as many posts as you like in order to share with your readers what
exactly is on your mind.</div>

<div class="one-fourth">This is an example of a WordPress post, you could edit this to

put information about yourself or your site so readers know where you are coming from.
You can create as many posts as you like in order to share with your readers what exactly
is on your mind.</div>

<div class="one-fourth">This is an example of a WordPress post, you could edit this to

put information about yourself or your site so readers know where you are coming from.
You can create as many posts as you like in order to share with your readers what exactly
is on your mind.</div>

<div class="one-fourth">This is an example of a WordPress post, you could edit this to

put information about yourself or your site so readers know where you are coming from.
You can create as many posts as you like in order to share with your readers what exactly
is on your mind.</div>

5-Columns

To add five columns of text, enter the text below into your post/page editor:

<div class="one-fifth first">This is an example of a WordPress post, you could edit this
to put information about yourself or your site so readers know where you are coming from.
You can create as many posts as you like in order to share with your readers what exactly
is on your mind.</div>

<div class="one-fifth">This is an example of a WordPress post, you could edit this to

put information about yourself or your site so readers know where you are coming from.
You can create as many posts as you like in order to share with your readers what exactly
is on your mind.</div>

<div class="one-fifth">This is an example of a WordPress post, you could edit this to

put information about yourself or your site so readers know where you are coming from.
You can create as many posts as you like in order to share with your readers what exactly
is on your mind.</div>

<div class="one-fifth">This is an example of a WordPress post, you could edit this to

put information about yourself or your site so readers know where you are coming from.
You can create as many posts as you like in order to share with your readers what exactly
is on your mind.</div>

<div class="one-fifth">This is an example of a WordPress post, you could edit this to

put information about yourself or your site so readers know where you are coming from.
You can create as many posts as you like in order to share with your readers what exactly
is on your mind.</div>
6-Columns

To add six columns of text, enter the text below into your post/page editor:

<div class="one-sixth first">This is an example of a WordPress post, you could edit

this to put information about yourself or your site so readers know where you are coming
from. You can create as many posts as you like in order to share with your readers what
exactly is on your mind.</div>

<div class="one-sixth">This is an example of a WordPress post, you could edit this to

put information about yourself or your site so readers know where you are coming from.
You can create as many posts as you like in order to share with your readers what exactly
is on your mind.</div>

<div class="one-sixth">This is an example of a WordPress post, you could edit this to

put information about yourself or your site so readers know where you are coming from.
You can create as many posts as you like in order to share with your readers what exactly
is on your mind.</div>

<div class="one-sixth">This is an example of a WordPress post, you could edit this to

put information about yourself or your site so readers know where you are coming from.
You can create as many posts as you like in order to share with your readers what exactly
is on your mind.</div>

<div class="one-sixth">This is an example of a WordPress post, you could edit this to

put information about yourself or your site so readers know where you are coming from.
You can create as many posts as you like in order to share with your readers what exactly
is on your mind.</div>

<div class="one-sixth">This is an example of a WordPress post, you could edit this to

put information about yourself or your site so readers know where you are coming from.
You can create as many posts as you like in order to share with your readers what exactly
is on your mind.</div>

Required CSS Code

The CSS code that is required for the content column classes is included in Genesis, as well as
the most current version of child themes. If you are using an earlier version of either, you can
add the CSS below to your style.css file and it should work:

/* Column Classes

------------------------------------------------------------ */

.five-sixths,

.four-fifths,

.four-sixths,
.one-fifth,

.one-fourth,

.one-half,

.one-sixth,

.one-third,

.three-fifths,

.three-fourths,

.three-sixths,

.two-fifths,

.two-fourths,

.two-sixths,

.two-thirds {

float: left;

margin: 0 0 20px;

padding-left: 3%;

.one-half,

.three-sixths,

.two-fourths {

width: 48%;

.one-third,

.two-sixths {

width: 31%;
}

.four-sixths,

.two-thirds {

width: 65%;

.one-fourth {

width: 22.5%;

.three-fourths {

width: 73.5%;

.one-fifth {

width: 17.4%;

.two-fifths {

width: 37.8%;

.three-fifths {

width: 58.2%;

}
.four-fifths {

width: 78.6%;

.one-sixth {

width: 14%;

.five-sixths {

width: 82%;

.first {

clear: both;

padding-left: 0;

Comments
How to Customize the Comments Section
To customize the text that is used for the comment link in the post info or post meta, simply
place the code below into your child theme’s functions.php file:

/** Modify the comment link text */

add_filter( 'genesis_post_meta', 'post_meta_filter' );

function post_meta_filter( $post_meta ) {

 return '[post_comments zero="Leave a Comment" one="1 Comment" more="% Comments"]';

To customize the “Comments” headline text, simply place the code below to your child theme’s
functions.php file. Note that ‘Discussion’ is where you can select the text to modify.

/** Modify comments header text in comments */

add_filter( 'genesis_title_comments', 'custom_genesis_title_comments' );

function custom_genesis_title_comments() {

$title = '<h3>Discussion</h3>';

return $title;

To customize the “Trackbacks” headline text, simply place the code below to your child theme’s
functions.php file. Note that ‘Pings’ is where you can select the text to modify.

/** Modify trackbacks header text in comments */

add_filter( 'genesis_title_pings', 'custom_title_pings' );

function custom_title_pings() {

echo '<h3>Pings</h3>';

To customize the “Speak Your Mind” text, simply place the code below to your child theme’s
functions.php file. Note that ‘Leave a Comment’ is where you can select the text to modify.

/** Modify the speak your mind text */

add_filter( 'genesis_comment_form_args', 'custom_comment_form_args' );

function custom_comment_form_args($args) {

$args['title_reply'] = 'Leave a Comment';

return $args;
}

To customize the author “says” text in the comment meta, simply place the code below into your
child theme’s functions.php file. Note that ‘commented’ is where you can select the text to
modify.

/** Modify the comment says text */

add_filter( 'comment_author_says_text', 'custom_comment_author_says_text' );

function custom_comment_author_says_text() {

return 'commented';

To add a comment policy box or text to your comments, simply place the code below into your
child theme’s functions.php file.

/** Add a comment policy box */

add_action( 'genesis_after_comments', 'single_post_comment_policy' );

function single_post_comment_policy() {

if ( is_single() && !is_user_logged_in() && comments_open() ) {

?>

<div class="comment-policy-box">

<p class="comment-policy"><small><strong>Comment Policy:</strong>Your words are

your own, so be nice and helpful if you can. Please, only use your real name and limit the
amount of links submitted in your comment. We accept clean XHTML in comments, but don't
overdo it please.</small></p>

</div>

<?php

}
Comment Form
How To Remove the Aria-Required Attribute
Pre-Code Advisory Note
We know it’s good to have valid code, and some developers create their sites to meet an
(X)HTML specification to the letter. However, the aria-required attribute is one of those
things where it’s fine for it not to be in current specifications but still have it on your site. It’s
currently generally used by assistive technology user agents, such as text-to-speech browsers,
to help indicate “that user input is required on the element before a form may be submitted”. On
browsers and other user agents where it’s not supported, it has no negative effect.

It’s important to note that current versions of WordPress and Genesis both come with this
attribute included within the comment form for the comment area itself, and on the name and
email inputs if the WordPress option is selected. This is because accessibility should always
trump valid code. Valid code is pointless if your visitors can’t access the content and interact
with your site successfully and for that reason, you should leave the aria-required attribute
intact.

The PHP Code

If you still want to remove aria-required attribute to satisfy your validation needs, then add
the following to the end of your child theme’s functions.php file, just before any
closing ?> you may have.

add_filter( 'genesis_comment_form_args', 'custom_remove_aria_required' );

/**

* Remove WAI-Aria aria-required attributes from comment form.

* @author Gary Jones

* @link http://dev.studiopress.com/remove-aria-required-attribute.htm

* @param array $args Comment form arguments

* @return array Amended comment form arguments

 */

function custom_remove_aria_required( $args ) {

$args = str_replace( ' aria-required="true"', '', $args );

$args[fields] = str_replace( ' aria-required="true"', '', $args[fields] );

$args[fields] = str_replace( " aria-required='true'", '', $args[fields] ); // Only needed for Ge

return $args;

How to Create Additional Comment Form Fields

Often a developer needs to collect additional data in the comment form field. The reasons vary,
but the solution remains the same.

First we must let WordPress know that we intend to have an additional field in our comment
form so that the value entered by the Commenter will be saved to the database.

Add the following code to the functions.php

after require_once(TEMPLATEPATH.'/lib/init.php'); to create an additional comment form field
:

add_action ('comment_post', 'add_comment_fields', 1);

function add_meta_settings($comment_id) {

add_comment_meta($comment_id, 'favorite_color', $_POST['favorite_color'], true);

Next we will add code so that the additional field displays along with the default fields. This code
will also be added to the functions.php file in the child theme.

//adds extra fields to the comment form.

add_filter('genesis_comment_form_args', 'my_fields');

function my_fields($args) {

$args['fields']['color'] = '<p class="comment-form-color">' .

'<input id="favorite_color" type="text" name="

favorite_color" value="' . esc_attr( $commenter['favorite_color'] ) . '" tabindex="3"
/>' .

'<label for="favorite_color">' . __( 'Favorite Color'

, 'child' ) . '</label>' .

'</p>';

return $args;

This specific output collects a favorite color as entered in the comment form. You will need to
style this to make it look like the rest of the fields if so desired. In the Genesis Sample Child
theme this is done by finding the following code

#author, #email, #url {

background: #F7F7F7 !important;

width: 250px;

color: #333333;

font-family: Arial, Tahoma, Verdana;

font-size: 12px;

padding: 3px 0 3px 3px;

margin: 5px 5px 0 0;

border: 1px solid #E6E6E6;

and adding the input ID for your new form field like this

#author, #email, #url, #favorite_color {

background: #F7F7F7 !important;

width: 250px;

color: #333333;

font-family: Arial, Tahoma, Verdana;

font-size: 12px;
 padding: 3px 0 3px 3px;

margin: 5px 5px 0 0;

border: 1px solid #E6E6E6;

How to Change The Trackback Format

If you want to change the format of trackbacks (pings), say, to remove everything apart from the
originating title and link, then you’ll need to add a couple of functions. You may want to do this if
the date of the trackback isn’t important, or you don’t want snippets of content from other
people’s sites in your comments section, but do want a link to it.

The PHP Code

Open up the functions.php file in your child theme and add the following code. The code
should be entered at the end of the file, just before the closing ?> if there is one.

add_filter( 'genesis_ping_list_args', 'child_ping_list_args' );

/**

* Take the existing arguments, and one that specifies a custom callback.

* @author Gary Jones

* @link http://dev.studiopress.com/change-trackback-format.htm

* Tap into the list of arguments applied at genesis/lib/functions/comments.php:136

* @param array $args

* @return type

*/

function child_ping_list_args( $args ) {

$args['callback'] = 'child_list_pings';

return $args;
}

/**

* Build how the trackbacks / pings will look.

* @author Gary Jones

* @link http://dev.studiopress.com/change-trackback-format.htm

* @param mixed $comment

* @param array $args

* @param integer $depth

*/

function child_list_pings( $comment, $args, $depth ) {

$GLOBALS['comment'] = $comment;

?>

<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">

<div id="comment-<?php comment_ID(); ?>">

<div class="comment-author vcard">

<?php echo get_avatar( $comment, $size = '48', $default = '<path_to_url>' ); ?>

<?php printf( __( '<cite class="fn">%s</cite>' ), get_comment_author_link() ) ?>

</div>

</div>

</li>

<?php

}
Explanation of the PHP Code
There are three stages to our code above. The first is to add a filter into a Genesis function that
allows us to specify an extra argument to the native WordPress
function wp_list_comments().

The second is a small function that takes the array of existing arguments that are being passed
in to wp_list_comments() and adds one more to it. This extra value is a reference to
a callback function, and it’s the function WordPress uses to actually build the markup that
produces the trackback entries.

Finally, the callback function itself, and it’s here that you may want to add your own
customisations. The code above strips away most details about the trackback, and just leaves a
link to the source of the trackback, with the source title as the displayed text.

Content Classes
How to Use Content Column Classes
In Genesis we have added the ability to create columns (column classes) within the content
area. Below you find instructions on how to use content column classes.

2-Columns

To add two columns of text, enter the text below into your post/page editor:

<div class="one-half first">This is an example of a WordPress post, you could edit

this to put information about yourself or your site so readers know where you are
coming from. You can create as many posts as you like in order to share with your
readers what exactly is on your mind.</div>

<div class="one-half">This is an example of a WordPress post, you could edit this

to put information about yourself or your site so readers know where you are coming
from. You can create as many posts as you like in order to share with your readers
what exactly is on your mind.</div>

3-Columns

To add three columns of text, enter the text below into your post/page editor:

<div class="one-third first">This is an example of a WordPress post, you could edit

this to put information about yourself or your site so readers know where you are
coming from. You can create as many posts as you like in order to share with your
readers what exactly is on your mind.</div>

<div class="one-third">This is an example of a WordPress post, you could edit this

to put information about yourself or your site so readers know where you are coming
from. You can create as many posts as you like in order to share with your readers
what exactly is on your mind.</div>

<div class="one-third">This is an example of a WordPress post, you could edit this

to put information about yourself or your site so readers know where you are coming
from. You can create as many posts as you like in order to share with your readers
what exactly is on your mind.</div>

4-Columns

To add four columns of text, enter the text below into your post/page editor:

<div class="one-fourth first">This is an example of a WordPress post, you could

edit this to put information about yourself or your site so readers know where you
are coming from. You can create as many posts as you like in order to share with your
readers what exactly is on your mind.</div>

<div class="one-fourth">This is an example of a WordPress post, you could edit this

to put information about yourself or your site so readers know where you are coming
from. You can create as many posts as you like in order to share with your readers
what exactly is on your mind.</div>

<div class="one-fourth">This is an example of a WordPress post, you could edit

this to put information about yourself or your site so readers know where you are
coming from. You can create as many posts as you like in order to share with your
readers what exactly is on your mind.</div>

<div class="one-fourth">This is an example of a WordPress post, you could edit

this to put information about yourself or your site so readers know where you
are coming from. You can create as many posts as you like in order to share with
your readers what exactly is on your mind.</div>

5-Columns

To add five columns of text, enter the text below into your post/page editor:

<div class="one-fifth first">This is an example of a WordPress post, you could

edit this to put information about yourself or your site so readers know where
you are coming from. You can create as many posts as you like in order to share
with your readers what exactly is on your mind.</div>

<div class="one-fifth">This is an example of a WordPress post, you could edit

this to put information about yourself or your site so readers know where you are
coming from. You can create as many posts as you like in order to share with your
readers what exactly is on your mind.</div>

<div class="one-fifth">This is an example of a WordPress post, you could edit

this to put information about yourself or your site so readers know where you are
coming from. You can create as many posts as you like in order to share with your
readers what exactly is on your mind.</div>

<div class="one-fifth">This is an example of a WordPress post, you could edit this

to put information about yourself or your site so readers know where you are coming
from. You can create as many posts as you like in order to share with your readers
what exactly is on your mind.</div>

<div class="one-fifth">This is an example of a WordPress post, you could edit this

to put information about yourself or your site so readers know where you are coming
from. You can create as many posts as you like in order to share with your readers
what exactly is on your mind.</div>

6-Columns

To add six columns of text, enter the text below into your post/page editor:

<div class="one-sixth first">This is an example of a WordPress post, you could

edit this to put information about yourself or your site so readers know where you
are coming from. You can create as many posts as you like in order to share with
your readers what exactly is on your mind.</div>

<div class="one-sixth">This is an example of a WordPress post, you could edit

this to put information about yourself or your site so readers know where you are
coming from. You can create as many posts as you like in order to share with your
readers what exactly is on your mind.</div>

<div class="one-sixth">This is an example of a WordPress post, you could edit this

to put information about yourself or your site so readers know where you are coming
from. You can create as many posts as you like in order to share with your readers
what exactly is on your mind.</div>

<div class="one-sixth">This is an example of a WordPress post, you could edit this

to put information about yourself or your site so readers know where you are coming
from. You can create as many posts as you like in order to share with your readers
what exactly is on your mind.</div>

<div class="one-sixth">This is an example of a WordPress post, you could edit this

to put information about yourself or your site so readers know where you are coming
from. You can create as many posts as you like in order to share with your readers
what exactly is on your mind.</div>

<div class="one-sixth">This is an example of a WordPress post, you could edit this

to put information about yourself or your site so readers know where you are coming
from. You can create as many posts as you like in order to share with your readers
what exactly is on your mind.</div>

Required CSS Code

The CSS code that is required for the content column classes is included in Genesis, as well as
the most current version of child themes. If you are using an earlier version of either, you can
add the CSS below to your style.css file and it should work:
/* Column Classes

------------------------------------------------------------ */

.five-sixths,

.four-fifths,

.four-sixths,

.one-fifth,

.one-fourth,

.one-half,

.one-sixth,

.one-third,

.three-fifths,

.three-fourths,

.three-sixths,

.two-fifths,

.two-fourths,

.two-sixths,

.two-thirds {

float: left;

margin: 0 0 20px;

padding-left: 3%;

.one-half,

.three-sixths,

.two-fourths {
 width: 48%;

.one-third,

.two-sixths {

width: 31%;

.four-sixths,

.two-thirds {

width: 65%;

.one-fourth {

width: 22.5%;

.three-fourths {

width: 73.5%;

.one-fifth {

width: 17.4%;

.two-fifths {
 width: 37.8%;

.three-fifths {

width: 58.2%;

.four-fifths {

width: 78.6%;

.one-sixth {

width: 14%;

.five-sixths {

width: 82%;

.first {

clear: both;

padding-left: 0;

}
Custom Loops
Genesis Grid Loop Advanced
While the simple example of how to use the Genesis grid loop might be enough to get you up
and running, there are far more advanced ways you can use the grid loop to really get the best
out of it.

This tutorial will go through the steps to adding a variable column balanced grid for any archive
page on your site. If you just want the code, skip to the final section. All of the code snippets go
at the end of your child theme functions.php file, just before any closing ?> there might be,
except for the CSS which will go at the end of your child
theme style.css (or css/custom.css for Prose) file.

This tutorial requires Genesis 1.5 or later to work. Adding it to a child theme while running
an earlier version of Genesis will kill your site, so go ahead and update Genesis first!

Using A Grid Loop

The first thing we need to decide, is on which pages we want the grid loop to run. The simple
example tells you to put the loop helper function straight into home.php, which means it won’t
run on category, tag, monthly, or other archive pages.

add_action( 'genesis_before_loop', 'child_maybe_do_grid_loop' );

/**

* Before we get to the loop, see if we're anywhere but a single page. If so,

* swap out the standard loop for our grid loop.

* @author Gary Jones

* @link http://dev.studiopress.com/genesis-grid-loop-advanced.htm

*/

function child_maybe_do_grid_loop() {

// Amend this conditional to pick where this grid looping occurs

if ( ! is_single() && ! is_page() ) {

 // Remove the standard loop

remove_action( 'genesis_loop', 'genesis_do_loop' );

// Use the prepared grid loop

add_action( 'genesis_loop', 'child_do_grid_loop' );

// Add some extra post classes to the grid loop so we can style the columns

add_filter( 'genesis_grid_loop_post_class', 'child_grid_loop_post_class' );

This function uses the conditional tag of is_single(), preceded by the negation operator (!)
to ensure the grid loop is not used on single posts, custom post types or attachments,
and is_page()preceded by the negation operator to ensure it is not used on Pages either.
That leaves it free to be used everywhere else.

The next three lines of code are quite logical – we remove our normal loop and add in our grid
loop, which we’ll define in a moment. We also make reference to a filter that will add a
few CSS classes which we use to style the columns.

Preparing The Grid Loop

Now we need to set up our grid loop. The genesis_grid_loop() functions takes an array of
values, which we can configure.

/**

* Prepare the grid loop.

* Takes care of existing query arguments for the page e.g. if it's a category

* archive page, then the "cat" argument is carried into the grid loop, unless
 * it's overwritten in the $grid_args.

* @author Gary Jones

* @link http://dev.studiopress.com/genesis-grid-loop-advanced.htm

* @uses genesis_grid_loop() Requires Genesis 1.5

*/

function child_do_grid_loop() {

global $query_string, $paged;

// Ensure the arguments for the normal query for the page are carried forwards

// If you're using a Page to query the posts (e.g. with the Blog template), comment out the next

wp_parse_str( $query_string, $query_args );

// Create an array of arguments for the loop - can be grid-specific, or

// normal query_posts() arguments to alter the loop

$grid_args = array(

'features' => 1,

'feature_image_size' => 0,

'feature_image_class' => 'alignleft post-image',

'feature_content_limit' => 0,

'grid_image_size' => 'grid-thumbnail',

'grid_image_class' => 'alignleft post-image',

'grid_content_limit' => 0,

'more' => __( 'Continue reading &#x2192;', 'genesis' ),

'posts_per_page' => 6,
 );

// Make sure the first page has a balanced grid

if ( 0 == $paged )

// If first page, add number of features to grid posts, so balance is maintained

$grid_args['posts_per_page'] += $grid_args['features'];

else

// Keep the offset maintained from our page 1 adjustment

$grid_args['offset'] = ( $paged - 1 ) * $grid_args['posts_per_page'] + $grid_args['features']

// Merge the standard query for this page, and our preferred loop arguments

genesis_grid_loop( array_merge( (array) $query_args, $grid_args ) );

There’s a lot there, so lets go through it. Firstly, we pull in a couple of global values that
WordPress has created and populated for us. We need these later in the function, so we need
to be able to access the values of them.

Next we take the normal query arguments for that page (like the category ID, tag ID, custom
post type name or something else that defines what set of posts we want) and put them into an
array. The simple example didn’t need to include this, as the home page was just showing all
posts, in the default date order. Now we’ve enabled the grid loop on other archive pages, this is
needed.

The amendment to that is when you’re using the Blog page template magic from within Genesis
to show posts on a Page. In this case, the query according to WordPress is for the Page, so
passing these through to the grid loop functions means the blog page template magic gets
bypassed and no posts would should show. To solve this, we can just comment out
the wp_parse_str() line as indicated.
Then comes the main configurable section for how we want the grid loop to run. See
theUnderstanding the Parameters section on the simple example to know what they all mean.
The only changes made here, are the number of features, number of posts_per_page, and
the more link text.

The bit after that about balancing needs a little bit of explaining. In the simple example, the
number of features was equal to the number of columns, meaning that on page 2 and later of
the archives, the grid was always complete (except maybe for the final page). However, we
want something more flexible that allows, say, 3 columns, and 1 feature post. If we set
our posts_per_page to be an exact multiple of the number of columns, then on page 2 and
later, the grid is balanced, but page 1, where one of the posts is a feature, means we’ll have an
unsightly gap at the end of the grid. If we increased the posts_per_page so the page 1 looked
right, then there would be one extra grid post on it’s own on all later pages!

What we do, therefore, is adjust the total number of posts to also include the number of feature
posts we want, just for page 1 (props to Jen for identifying this issue and coming up with a
simple fix). Unfortunately, this causes an overlap where the last post(s) (equal to the number of
feature posts) on page 1 are repeated at the start of page 2, so we add an offset in, and
WordPress starts pulling posts from the database at the right spot. Phew!

Finally, we take the first array of query values (cast to an array, in case
the wp_parse_str() line is commented out; $query_args would be a scalar value if so, which
means our grid array would be unable to merge with it and would be dropped), merge it with our
provided grid loop values, and send it all off to Genesis to create the grid loop itself. One
alternative you might want here is to only show the features and grids on the first page of the
archive, and go back to normal posts on page 2 and later. If so, switch the final line:

// Merge the standard query for this page, and our preferred loop arguments

genesis_grid_loop( array_merge( $query_args, $grid_args ) );

for:

// Only use the grid on the first page

if ( 0 == $paged) {

// Merge the standard query for this page, and our preferred loop arguments

genesis_grid_loop( array_merge( $query_args, $grid_args ) );

} else {
 query_posts( array_merge( $query_args, $grid_args ) );

genesis_standard_loop();

Styling The Grid Loop

In terms of styling, the simple example focused on the case when you have two columns – float
one left, float one right, give them both a width of just under half, with some padding in between.
However, if we want more than two columns in our grid, we can’t make use of the even and odd
class names, so we’ll add our own, using the function we defined earlier on.

/**

* Add some extra body classes to grid posts.

* Change the $columns value to alter how many columns wide the grid uses.

* @author Gary Jones

* @link http://dev.studiopress.com/genesis-grid-loop-advanced.htm

* @global array $_genesis_loop_args

* @global integer $loop_counter

* @param array $classes

*/

function child_grid_loop_post_class( $grid_classes ) {

global $_genesis_loop_args, $loop_counter;

// Alter this number to change the number of columns - used to add class names

$columns = 3;
 // Only want extra classes on grid posts, not feature posts

if ( $loop_counter >= $_genesis_loop_args['features'] ) {

// Add genesis-grid-column-? class to know how many columns across we are

$grid_classes[] = sprintf( 'genesis-grid-column-%s', ( ( $loop_counter - $_genesis_loop_args[

// Add size1of? class to make it correct width

$grid_classes[] = sprintf( 'size1of%s', $columns );

return $grid_classes;

By the time this function is run, we’re inside the grid loop, about to start showing individual
posts. Specifically, this is run when it comes to adding classes to each post.

We start by pulling in another couple of global variables – one created by Genesis when it was
creating the loop, and another from WordPress that identifies how far through the loop we’ve
got; for each post that is displayed, $loop_counter gets increased by one.

The next line is so simple, yet is probably my favourite – once the CSS is set up (we’ll get to that
shortly), it’s just this value you need to change to alter between two, three, four or more columns
on the grid. Beautiful

We then come to adding our extra classes. As we only want them on our grid posts, we skip
over this section if we’re outputting a feature post. For grid posts, there are two classes being
added. The first adds a numbered class, indicating which column we’re in; this allows you to
style all of the third column posts, say, via .genesis-grid-column-3 { color: red; }.
The second class adds asize1of3 class (when $columns = 3), and this is used to specify the
width of the column.

Suggested CSS

Taking our lead from some of the Genesis 1.5 style sheet styles, we come up with the following:

#content .genesis-grid {
 float: left;

margin: 0;

padding: 15px 0 10px 3%;

#content .genesis-grid-column-1 {

clear:left;

padding-left: 0;

.size1of2 {

width: 48%;

.size1of3 {

width: 31%;

.size1of4 {

width: 22.5%;

.size1of5 {

width: 17.4%;

.size1of6 {

width: 14%;

/* Above widths assume 0 left padding on the first column, 3% left padding on all

subsequent columns, and a total sum of 99% to avoid browser rounding errors */
All of the grid elements are floated left and have some padding added. The grid posts in the first
column are set to stop floating, and move on to a fresh new row, with the left padding removed.
Finally, all the column widths are added (for up to 6 columns) based on work that Brian has
done on the new Genesis style sheet.

If you want different amounts of padding, then you’ll need to adjust the width percentages, else
you’ll either have noticeable gaps, or the last post in a row wrapping around to below the others
in the same row.

Putting it Altogether
Here’s the final PHP code to drop in to your functions.php file (and don’t forget to put the
CSS above into your style.css) – remember to change values on the highlighted lines:

add_action( 'genesis_before_loop', 'child_maybe_do_grid_loop' );

/**

* Before we get to the loop, see if we're anywhere but a single page. If so,

* swap out the standard loop for our grid loop.

* @author Gary Jones

* @link http://dev.studiopress.com/genesis-grid-loop-advanced.htm

*/

function child_maybe_do_grid_loop() {

// Amend this conditional to pick where this grid looping occurs

if ( ! is_single() && ! is_page() ) {

// Remove the standard loop

remove_action( 'genesis_loop', 'genesis_do_loop' );

// Use the prepared grid loop

 add_action( 'genesis_loop', 'child_do_grid_loop' );

// Add some extra post classes to the grid loop so we can style the columns

add_filter( 'genesis_grid_loop_post_class', 'child_grid_loop_post_class' );

/**

* Prepare the grid loop.

* Takes care of existing query arguments for the page e.g. if it's a category

* archive page, then the "cat" argument is carried into the grid loop, unless

* it's overwritten in the $grid_args.

* @author Gary Jones

* @link http://dev.studiopress.com/genesis-grid-loop-advanced.htm

* @uses genesis_grid_loop() Requires Genesis 1.5

*/

function child_do_grid_loop() {

global $query_string, $paged;

// Ensure the arguments for the normal query for the page are carried forwards

// If you're using a Page to query the posts (e.g. with the Blog template), comment out the next

wp_parse_str( $query_string, $query_args );

 // Create an array of arguments for the loop - can be grid-specific, or

// normal query_posts() arguments to alter the loop

$grid_args = array(

'features' => 1,

'feature_image_size' => 0,

'feature_image_class' => 'alignleft post-image',

'feature_content_limit' => 0,

'grid_image_size' => 'grid-thumbnail',

'grid_image_class' => 'alignleft post-image',

'grid_content_limit' => 0,

'more' => __( 'Continue reading &#x2192;', 'genesis' ),

'posts_per_page' => 6,

);

// Make sure the first page has a balanced grid

if ( 0 == $paged )

// If first page, add number of features to grid posts, so balance is maintained

$grid_args['posts_per_page'] += $grid_args['features'];

else

// Keep the offset maintained from our page 1 adjustment

$grid_args['offset'] = ( $paged - 1 ) * $grid_args['posts_per_page'] + $grid_args['features']

// Merge the standard query for this page, and our preferred loop arguments

genesis_grid_loop( array_merge( (array) $query_args, $grid_args ) );

}
/**

* Add some extra body classes to grid posts.

* Change the $columns value to alter how many columns wide the grid uses.

* @author Gary Jones

* @link http://dev.studiopress.com/genesis-grid-loop-advanced.htm

* @global array $_genesis_loop_args

* @global integer $loop_counter

* @param array $classes

*/

function child_grid_loop_post_class( $grid_classes ) {

global $_genesis_loop_args, $loop_counter;

// Alter this number to change the number of columns - used to add class names

$columns = 3;

// Only want extra classes on grid posts, not feature posts

if ( $loop_counter >= $_genesis_loop_args['features'] ) {

// Add genesis-grid-column-? class to know how many columns across we are

$grid_classes[] = sprintf( 'genesis-grid-column-%s', ( ( $loop_counter - $_genesis_loop_args[

// Add size1of? class to make it correct width

 $grid_classes[] = sprintf( 'size1of%s', $columns );

return $grid_classes;

Footer
How to Add Footer Widgets
If you would like to add footer widgets to the sample child theme, follow the instructions below.

1. Add Support For Footer Widgets

Open up the Genesis sample child theme’s functions.php file and add the following code. The
code should be entered at the end of the file, just before the closing ?> if there is one.

/** Add support for 3-column footer widgets */

add_theme_support( 'genesis-footer-widgets', 3 );

If you would like to create a 4-column widgeted footer, the code would look like this:

/** Add support for 4-column footer widgets */

add_theme_support( 'genesis-footer-widgets', 4 );

2. Add CSS to the Stylesheet

Lastly, open up the child theme’s style.css file and add the code below. Please note that this
CSS is designed for a 3-column widgeted footer section. If you are using any more/less
columns, you’ll need to modify or add to your CSS accordingly.

/* Footer Widgets

------------------------------------------------------------ */
#footer-widgets {

-khtml-border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

background-color: #f5f5f5;

border: 1px solid #ddd;

border-radius: 3px;

clear: both;

margin: 0 auto 10px;

overflow: hidden;

width: 958px;

#footer-widgets .wrap {

font-size: 13px;

line-height: 20px;

overflow: hidden;

padding: 15px 19px 0;

#footer-widgets .widget {

background: none;

border: none;

margin: 0 0 15px;

padding: 0;

}
#footer-widgets .textwidget {

padding: 0;

#footer-widgets h4 {

background: none;

border: none;

margin: 0 0 5px;

padding: 0;

#footer-widgets .widget_tag_cloud div div {

padding: 0;

#footer-widgets p {

font-size: 13px;

line-height: 20px;

padding: 0 0 10px;

#footer-widgets ul {

margin: 0;

}
#footer-widgets ul li {

margin: 0 0 0 20px;

#footer-widgets #wp-calendar thead,

#footer-widgets #wp-calendar td {

background: none;

.footer-widgets-1 {

float: left;

margin: 0 20px 0 0;

width: 295px;

.footer-widgets-2 {

float: left;

width: 290px;

.footer-widgets-3 {

float: right;

width: 295px;

}
How to Customize the Footer
You may notice that the Genesis Framework outputs a Return to Top of Page link on the left
side as well as the Credits section on the right side. There are two ways you can customize the
footer.

Option #1 – Genesis Simple Hooks Plugin

We have developed a plugin that will enable you to customize the footer from your WordPress
dashboard. The Simple Hooks plugin was developed to extend the capabilities of Genesis and
allow you to hook HTML, PHP and shortcodes to any of the existing hooks within the
framework.

Option #2 – Using Custom Filter in Your Child Theme’s Functions File

To customize the Return to Top of Page text, add this to your child theme’s functions.php file:

/** Customize the return to top of page text */

add_filter('genesis_footer_backtotop_text', 'custom_footer_backtotop_text');

function custom_footer_backtotop_text($backtotop) {

$backtotop = '[footer_backtotop text="Return to Top"]';

return $backtotop;

To customize the Credits, add this to your child theme’s functions.php file:

/** Customize the credits */

add_filter('genesis_footer_creds_text', 'custom_footer_creds_text');

function custom_footer_creds_text($creds) {

$creds = 'Copyright &copy; &middot; <a href="http://mydomain.com">My Custom Link</a>

&middot; Built on the <a href="http://www.studiopress.com/themes/genesis" title="Genesis
Framework">Genesis Framework</a>';

return $creds;
}

To replace the Return to Top of Page text and Credits and display your own custom footer, add
this to your child theme’s functions.php file:

/** Customize the entire footer */

remove_action( 'genesis_footer', 'genesis_do_footer' );

add_action( 'genesis_footer', 'child_do_footer' );

function child_do_footer() {

?>

<p>&copy; Copyright 2011 <a href="http://mydomain.com/">My Domain</a> &middot;

All Rights Reserved &middot; Powered by <a href="http://wordpress.org/">WordPress</a>
&middot; <a href="http://mydomain.com/wp-admin">Admin</a></p>

<?php

Using this method will remove some markup that’s within the footer – this is the Return to Top
Section and the Credit section. You’ll want to add the CSS below in order to center your footer
text:

#footer {

text-align: center;

Header Section
How to Change the Header Home Link
While I generally wouldn’t recommend linking to an external site from your header, on occasion,
you may need to change the URL of the header home link. For example, if you have set up your
WordPress install in a subdirectory as a secondary area of an already existing site, you may
want the header URL to direct users back to your site’s main homepage. Changing it is simple.

Open up the functions.php file in your child theme and add the following code. The code
should be entered at the end of the file, just before the closing ?> if there is one.
add_filter( 'genesis_seo_title', 'child_header_title', 10, 3 );

/**

* Change default Header URL.

* @author Jen Baumann

* @link http://dev.studiopress.com/change-header-link.htm

* @param string $title complete title including $wrap and $inside

* @param string $inside contents of the $title with link and site name

* @param string $wrap outer $title tags, may be h1 or h4

* @return string

*/

function child_header_title( $title, $inside, $wrap ) {

$inside = sprintf( '<a href="http://example.com/" title="%s">%s</a>', esc_attr(

get_bloginfo( 'name' ) ), get_bloginfo( 'name' ) );

return sprintf( '<%1$s id="title">%2$s</%1$s>', $wrap, $inside );

Remember to update the example.com value to your own.

How To Modify the Doctype in the Header

If you want to change the doctype for your site, add a namespaced attribute to
the html element, or do some other changes to the boilerplate text, then its quite easy.

The following adds a Facebook Open Social attribute to the html element.

Open up the functions.php file in your child theme and add the following code. The code
should be entered at the end of the file, just before the closing ?> if there is one.

remove_action( 'genesis_doctype', 'genesis_do_doctype' );

add_action( 'genesis_doctype', 'child_do_doctype' );

/**

* Add Facebook Open Social attribute to html element.

* @author Gary Jones

* @link http://dev.studiopress.com/modify-doctype.htm

*/

function child_do_doctype() {

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"

xmlns:og="http://opengraphprotocol.org/schema/" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php bloginfo( 'html_type' ); ?>;

charset=<?php bloginfo( 'charset' ); ?>" />

<?php

Alternatively, you may want to switch to the XHTML 1.0 Strict Doctype (be aware that there may
be occurrences elsewhere in Genesis which uses code valid for Transitional doctype, but invalid
for Strict):

remove_action( 'genesis_doctype', 'genesis_do_doctype' );

add_action( 'genesis_doctype', 'child_do_doctype' );

/**

* Switch to using XHTML 1.0 Strict doctype.

* @author Gary Jones

* @link http://dev.studiopress.com/modify-doctype.htm

*/
function child_do_doctype() {

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/

DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"

<?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php

bloginfo( 'charset' ); ?>" />

<?php

Miscellaneous
How to Add the Genesis Box to Single Posts
Many of you know that sites such as Chris Brogan, Problogger and Copyblogger have an
advertising box at the end of their posts that says something like “ChrisBrogan.com runs on the
Genesis Framework.”

Here’s an example of what Chris Brogran’s Genesis Box looks like:

Chris Brogan explains why he includes the Genesis Box on his site:

As a proud affiliate of StudioPress, I display the Genesis Box because it has a high conversion
rate and I want to promote the great framework my site is running on.

Here’s an example of what Problogger’s Genesis Box looks like:

Darren Rowse, of Problogger.net, explains:

As an affiliate for StudioPress I was always looking for a more integrated way to promote the
Genesis Framework. I’d previously had a clumsy solution showing ads below each post for it
but they looked a little out of place and like an after thought. The new Genesis Box under posts
not only is a much more elegant and integrated solution – it seems to work better because not
only do you display an affiliate banner promotion – you’re able to use text to talk about WHY
you’re recommending it.

With that said, I’ve been asked a number of times by people who run blogs that want to include
their own Genesis Box. Below you will find detailed instructions how you can add it to your blog
or website. If you are currently not an affiliate, sign up now and start receiving 35%
commissions on all sales.

1. Create the Genesis Box Content

The first step is create a file called genesis-box.php, place the code below into it, and then
upload it into your child theme’s folder. Feel free to modify the text if you would like.

<div id="genesis-box">

<h3>YourDomain.com runs on the Genesis Framework</h3>

<a href="AFFILIATE LINK GOES HERE"><img class="alignright" src="IMAGE URL GOES

HERE" alt="Genesis Framework" title="Check out the Genesis Framework" /></a>

<p>Genesis empowers you to quickly and easily build incredible websites with
WordPress. Whether you're a novice or advanced developer, Genesis provides the secure
and search-engine-optimized foundation that takes WordPress to places you never
thought it could go. It's that simple - start using <a href="AFFILIATE LINK GOES
HERE">Genesis</a> now!</p>

<p>Take advantage of the 6 default layout options, comprehensive SEO settings,

rock-solid security, flexible theme options, cool custom widgets, custom design hooks,
and a huge selection of child themes ("skins") that make your site look the way you
want it to. With automatic theme updates and world-class support included, Genesis is
the smart choice for your WordPress website or blog.</p>

</div>

2. Include the Genesis Box on Single Posts

The next thing you want to do is hook the content of the genesis-box.php file below your posts.
Open up your child theme’s functions.php file and place the following code into it:
/** Add Genesis Box on Single Posts **/

add_action('genesis_after_post_content', 'include_genesis_box', 9);

function include_genesis_box() {

if ( is_single() )

require(CHILD_DIR.'/genesis-box.php');

3. Style the Genesis Box to Match Your Site

Lastly, you may want to style the Genesis Box to match the look of your site. Below is sample
CSS that can be used to style the Genesis Box – be sure to add it to your child theme’s
style.css file:

/* Genesis Box

------------------------------------------------------------ */

#genesis-box {

background: #f7f7f7;

border: 1px solid #e6e6e6;

margin: 10px 0 0;

overflow: hidden;

padding: 10px 10px 0;

#genesis-box h3 {

font-size: 18px;

font-weight: normal;

margin: 0 0 10px;

padding: 0;

text-transform: none;
}

#genesis-box .alignright {

background: #f7f7f7;

border: 1px solid #e6e6e6;

float: right;

margin: 0 0 5px 10px;

padding: 7px;

An Alternative Method for Adding a Tweet Button

The end result from a previous article on How to Add a Tweet Button on Single Posts can also
be implemented in an advanced way, which avoids the need to use invalid markup as
suggested by Twitter.

Open up the functions.php file in your child theme and add the following code. The code
should be entered at the end of the file, just before the closing ?> if there is one.

add_action( 'wp_print_scripts', 'child_add_tweet_button' );

/**

* Add tweet link and script.

* @author Gary Jones

* @link http://dev.studiopress.com/alternative-tweet-button.htm

*/

function child_add_tweet_button() {

// Only add this to anything not a page

if ( ! is_page() ) {
 // Add a script to the bottom of the source

wp_enqueue_script( 'tweet-button', 'http://platform.twitter.com/widgets.js', array(), '', tr

// Filter in the required Twitter link for limited and unlimited content

add_filter( 'the_content', 'child_add_tweet_button_link' );

add_filter( 'the_content_limit', 'child_add_tweet_button_link' );

// Remove stripped link from excerpts.

add_filter( 'wp_trim_excerpt', 'child_remove_stripped_tweet_button' );

// Optionally add it in to excerpts properly (uncomment to use).

//add_filter( 'the_excerpt', 'child_add_tweet_button_link' );

/**

* Add tweet link.

* @author Gary Jones

* @link http://dev.studiopress.com/alternative-tweet-button.htm

* @param string $content HTML markup for post content

* @return string HTML markup for post content

*/

function child_add_tweet_button_link( $content ) {

global $post;

$query_string_parameters = array(

// URL of the page to share

'url' => get_permalink(),

// Screen name of the user to attribute the Tweet to

'via' => 'StudioPress',

// Default Tweet text - here, the post title

'text' => get_the_title( $post->ID ),

// Related accounts that will be suggested to follow once tweet has been shared

'related' => '',

// Count box position - 'horizontal', 'vertical' or 'none'

'count' => 'vertical',

// The language for the Tweet Button - default is English (en)

'lang' => 'en',

// The URL to which your shared URL resolves to

'counturl' => get_permalink()

);
 // Optionally use this if you have custom shortlinks set up. Uncomment to use.

//$query_string_parameters['url'] = wp_get_shortlink();

// Construct our URL to pass to Twitter - gets urlencoded here

$twitter_url = add_query_arg( $query_string_parameters, '//twitter.com/share' );

return '<a href="' . htmlspecialchars( $twitter_url ) . '" class="twitter-share-button">Tweet</a>'

/**

* Excerpt strip HTML, so the Tweet link just ends up as "Tweet" prefixed to the first word of the e

* Does mean that you can't start any article with the word Tweet, but this is an edge scenario.

* @author Gary Jones

* @link http://dev.studiopress.com/alternative-tweet-button.htm

* @param string $content Plain text

* @return string

*/

function child_remove_stripped_tweet_button( $content ) {

return preg_replace('/^Tweet/', '', $content, 1);

While being substantially more code, this has several advantages:

 If JavaScript isn’t enabled, the markup is still valid for the default Genesis doctype; data-
*attributes are only valid in HTML5, and while most users will have this switched out of
 the DOMin favour of the added iframe, the markup added by the first method is invalid for
XHTML 1.0 Strict.
 The JavaScript from Twitter is only added once, at the bottom of the page, and not every
time the button appears, such as on archive pages.
 The “text” argument is explicitely given as the title of the post in which the button appears
(and not the title of the page where the post appears), meaning you can add buttons to
posts on archive pages, or featured posts widget posts, and have the correct text be used.
 You can easily and optionally enable the button for excerpts as well as limited and
unlimited post content.
 You can easily and optionally have your post shortlink as the URL to share, instead of the
full permalink. Good if you’re tracking traffic through the shortlink.
 There are no redundant “Tweet” strings added at the beginning of excerpts, where the
markup has been stripped.
 There is support for the “related” and “lang” arguments, allowing easier customization.

How to Conditionally Add Style Sheets for IE

Over time, Internet Explorer (IE) is getting better at rendering web pages how we want them, but
while IE7 and earlier versions still have a (fast-fading) grip, we sometimes still need to provide
exclusive styles to make them render our sites in an acceptable way. That is where conditional
style sheets are used.

Open up the functions.php file in your child theme and add the following code. The code
should be entered at the end of the file, just before the closing ?> if there is one.

add_action( 'wp_print_styles', 'child_add_ie7_style_sheet', 200 );

/**

* Add a style sheet for IE7 and earlier.

* @author Gary Jones

* @link http://dev.studiopress.com/ie-conditional-style-sheets.htm

*/

function child_add_ie7_style_sheet() {

wp_enqueue_style( 'ie7', CHILD_URL . '/style-ie7.css', array(), '1.0' );

}
add_filter( 'style_loader_tag', 'child_make_ie7_style_sheet_conditional', 10, 2 );

/**

* Add conditional comments around IE style sheet.

* @author Gary Jones & Michael Fields (@_mfields)

* @link http://dev.studiopress.com/ie-conditional-style-sheets.htm

* @param string $tag Existing style sheet tag

* @param string $handle Name of the enqueued style sheet

* @return string Amended markup

*/

function child_make_ie7_style_sheet_conditional( $tag, $handle ) {

if ( 'ie7' == $handle )

$tag = '<!--[if lte IE 7]>' . "\n" . $tag . '<![endif]-->' . "\n";

return $tag;

The first function enqueues a reference to a style sheet file called style-ie7.css in our child
theme folder. Using the wp_enqueue_style() is the correct way of adding style sheet
references, as amongst other reasons, it provides a handle that we end up using in the second
function. We hook the function in with a priority of 200. This make sure it appears after any
other style sheets that you or a plugin have added in.

The second function surrounds what will be the <link> markup with a conditional comment to
target only browsers that are less than or equal to (the lte bit) IE7. Other conditional comments
are available, but this is by far the most common approach, with IE6- and IE7-specific styles
thrown into the same file, to avoid an extra HTTP request. Browsers which aren’t IE just see the
output as one big comment and promptly ignore it. Credit to Michael Fields for highlighting
thescript_loader_tag filter methodology to me.
How to Add Category Icons to the Featured Posts Widget
Genesis makes it easy to add category icons next to your featured posts.

Thanks to the “Genesis – Featured Posts” widget this is easy to do:

1. Step 1: Create a post category. For this example we will use “Test1″.
2. Step 2: Create a post and assign it to that category.
3. Step 3: Add the “Genesis – Featured Posts” widget to your sidebar.
Select and toggle the settings as needed, just choose the category you want (example
“Test1″).

Load up your page and see the featured post listed and linked as expected.

Now, using Firebug, you can see that the div has been assigned a class. Make a note of that
class.

Open up your style sheet file (typically style.css) and add the style:

.featuredpost .category-test1 {

background: url(images/yourdirectory/yourimage.png) no-repeat top left;

display: block;

padding-left: 60px;

padding-bottom: 12px;

Simple as that you will have category-specific icons without the use of a separate plugin. Just
adjust the padding and other CSS according to your needs.
How to Add a Tweet Button on Single Posts
One of the best ways to increase exposure and get traffic to your blog or website is to include
aTweet Button on your posts. Below is a screenshot of the Tweet Button that we use on
StudioPress:

1. Include the Custom Function

The first step is to open up your child theme’s functions.php file, and place the code below:

/** Add Tweet Button on single posts **/

add_filter('the_content', 'tweet_button');

function tweet_button( $content ) {

if ( is_page() )

return $content;

return '<a href="http://twitter.com/share" class="twitter-share-button" data-url="'. get_permalin

src="http://platform.twitter.com/widgets.js"></script>' . $content;

Be sure to replace the data-via="studiopress" with your Twitter username.

2. Include CSS in Your Style Sheet

The next step is to open up your child theme’s style.css file, and place the code below:

.twitter-share-button {

float: left;

margin: 0 10px 10px 0;

This .twitter-share-button class is automatically applied to the Tweet Button. Feel free to
float the Tweet Button left or right, and modify the margin according to your needs.

How to Add a Post Terms Shortcode

Advanced users may want more control of where the categories, tags or other taxonomies
(especially for custom posts types) are listed within a post or other bit of code where shortcodes
are parsed. Shortcodes are great for easily dropping in those repetitive bits of static or dynamic
content, while still being configurable.

Open up the functions.php file in your child theme and add the following code. The code
should be entered at the end of the file, just before the closing ?> if there is one.

add_shortcode( 'post_terms', 'child_post_terms_shortcode' );

/**

* Add linked post taxonomy terms via shortcode.

* Not needed since Genesis 1.5 as it exists in Genesis.

* @author Ade Walker and Gary Jones

* @link http://dev.studiopress.com/post-taxonomy-terms-shortcode.htm

* @global mixed $post

 * @param array $atts Array of shortcode attributes

* @return string HTML markup of terms list

*/

function child_post_terms_shortcode( $atts ) {

global $post;

// Define some default values - separator, content before list,

// content after list, and which taxonomy we want.

$defaults = array(

'sep' => ', ',

'before' => __( 'Filed Under: ', 'genesis' ),

'after' => '',

'taxonomy' => 'category'

);

// Fill in values not provided in the shortcode, with the default values.

$atts = shortcode_atts( $defaults, $atts );

// Create variables out of each array key, equal to the array value.

extract( $atts );

// Get all the terms as links, from the taxonomy, for this post.

$terms = get_the_term_list( $post->ID, $taxonomy, $before, trim( $sep ) . ' ', $after );

// Continue only if we've not hit an error when getting the terms.

if ( is_wp_error( $terms ) )
 return false;

// Only show output if terms were found for that taxonomy.

if ( empty( $terms ) )

return false;

// Add a wrapper around our terms to make styling easier.

$output = '<span class="terms">' . $terms . '</span>';

// Allow the output to be filtered, before returning it.

return apply_filters( 'genesis_post_terms_shortcode', $output, $terms, $atts );

Within a post, I could now add add a linked list of categories for that post, by adding:

[post_terms]

To add tags, and amend the “Filed in: ” prefix:

[post_terms taxonomy="post_tag" before="Tagged with: "]

Perhaps you’ve defined a custom taxonomy for the services you provide:

[post_terms taxonomy="services" before="Services used on this project: "]

Note: This shortcode was included in Genesis 1.5. For those using previous versions, we make
it available here as a tutorial.

How to Remove Page Titles

If you would like to remove the automatically inserted page titles all you need to do is add one
snippet of code.

Open up the functions.php file in your child theme and add the following code. The code
should be entered at the end of the file, just before the closing ?> if there is one.
add_action( 'get_header', 'child_remove_page_titles' );

/**

* Remove page titles from all pages except blog page template.

* @author John Wright

* @link http://dev.studiopress.com/remove-page-titles.htm

*/

function child_remove_page_titles() {

if ( is_page() && ! is_page_template( 'page_blog.php' ) )

remove_action( 'genesis_post_title', 'genesis_do_post_title' );

An Introduction to the Content Archive Settings

In the Genesis Theme Settings you may change the site wide Content Archives options to
control what displays in the sites’ Archives.

Archives include any pages using the blog template, category pages, tag pages, date archive,
author archives, and the latest posts if there is no custom home page.
The first option allows you to display the post content or the post excerpt.

The Display post content setting will display the entire post including html up to the <!--more-
-> tag if used. It may also be coupled with the second field “Limit content to [___] characters” to
limit the content to a specific number of letters/spaces. This will strip any html, but allows more
precise lengths and easily changed lengths than the excerpt.

The Display post excerpt setting will display the first 55 words of the post after also stripping any
included html or the manual/custom excerpt added in the post edit screen.

The ‘Include post image?’ setting allows you to show a thumbnail of the first attached image or
currently set featured image. This option should not be used with the post content unless the
content is limited to avoid duplicate images.

The ‘Image Size’ list is populated by the available image sizes defined in the theme.
Post Navigation Technique allows you to select one of three navigation methods:

 Older/Newer:

 Previous/Next:

 Numeric:

How To Shorten Post Titles

Face it, some people believe that every word coming out of their mouths is important and needs
to be in large bold letters at all times. Other people couldn’t use a short title to save their lives
because they are brevity-challenged. They would prefer (and see no problem with) naming this
tutorial, ‘How to Diplomatically Cutoff Brevity-Challenged Authors’.

If you find yourself faced with the painful task of pairing down the long-winded-ness of your
clients, fear not. Genesis 1.4 is here to rescue you. Some really smart (and good looking) fellow,
whose name I won’t mention, wrote a new function that will enable content limitation better than
the old Genesis the_content_limit() function (this is not deprecated, yet). The new
function is named genesis_truncate_phrase().

Suppose your client wants a magazine style theme with enough room for about 20 characters
for a title and then a short description of the article and a link to go deeper into the site, to the
actual post. If your client finds it impossible to trim down his post titles, you can do it for him and
look really cool without much effort.

Post titles are handled in the genesis_do_post_title()function. If the title is not for a
single post (or page) it provides a filter named 'genesis_post_title_text' which can be
used to alter the text of the current post title before it is sent to the browser.
This will limit the title in $title to 20 characters:

$title = genesis_truncate_phrase($title, 20);

To isolate the home page of the web site you can use the WordPress is_home() Conditional
tag. It will only test true when the post being displayed is on the home page.

if ( is_home() )

$title = genesis_truncate_phrase($title, 20);

Since we my want to let the reader know that the title has been shortened, let’s add a space
character and an ellipsis ( …). We will shorten the characters to 16 for the 4 additional
characters we are adding to the end.

if ( is_home() )

$title = genesis_truncate_phrase($title, 16) . ' &#x2026';

This creates a problem though. Short titles are also affected. We need an additional check to
see if the title is too long. To add a new test that is also true we use the PHP and operator (&&).
Thestrlen() PHP function will return the length of the title. We test the title length for greater
than 20, because 20 characters will just fit.

if ( is_home() && strlen($title) > 20 )

$title = genesis_truncate_phrase($title, 16) . ' &#x2026';

Here’s the finished function:

// Replace the 16 and the 20 (16 + 4) with the number of max characters you want.

add_filter( 'genesis_post_title_text', 'child_shorten_post_title' );

function child_shorten_post_title($title) {

// Check that we are on the correct page.

if ( is_home() && strlen($title) > 20 )

 // &#x2026; = ellipsis (...)

$title = genesis_truncate_phrase($title, 16) . ' &#x2026;';

return $title;

The code above should be placed in your child theme functions.php file anywhere after:

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

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

?>

How to Switch Genesis Sidebars

One of the great features of Genesis is the ability to change between many different page
layouts on a per-page basis. You can have 1, 2, or 3 columns, and specify the order of the
sidebar areas and content area.

But one issue you might have is which sidebar shows up in each of the sidebar areas. For
example, if you select “Sidebar-Sidebar-Content,” it will be arranged as “Secondary Sidebar –
Primary Sidebar – Content Area”. If you happened to have your site navigation in the Primary
Sidebar, it’s now in the middle column of the page.

Before trying this, always check beforehand, if what you’re trying to do can be accomplished
with CSS first. More often than not, you can re-order the sidebars correctly by simply shifting the
way elements of the layout are floating. This should only be used if you need the Secondary
Sidebar between the Primary Sidebar and the Content Area.

Here’s how to specify which sidebar shows up in which sidebar area on a specific page
template.

add_action( 'genesis_after_header', 'child_change_sidebar_order' );

/**

* Swap Primary and Secondary Sidebars on Sidebar-Sidebar-Content

* @author Bill Erickson

* @link http://dev.studiopress.com/switch-genesis-sidebars.htm

*/

function child_change_sidebar_order() {

$site_layout = genesis_site_layout();

if ( 'sidebar-sidebar-content' == $site_layout ) {

// Remove the Primary Sidebar from the Primary Sidebar area.

remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );

// Remove the Secondary Sidebar from the Secondary Sidebar area.

remove_action( 'genesis_sidebar_alt', 'genesis_do_sidebar_alt' );

// Place the Secondary Sidebar into the Primary Sidebar area.

add_action( 'genesis_sidebar', 'genesis_do_sidebar_alt' );

// Place the Primary Sidebar into the Secondary Sidebar area.

add_action( 'genesis_sidebar_alt', 'genesis_do_sidebar' );

}
How to Force a Specific Layout for Category Archive
Pages
You may find that you want a category (or all categories) archive to have a different layout than
the site wide layout option. This is accomplished much like the forced layout for the home page.

Open up the functions.php file in your child theme and add the following code. The code
should be entered at the end of the file, just before the closing ?> if there is one.

// Force layout on homepage

add_filter('genesis_pre_get_option_site_layout', 'streamline_home_layout');

function streamline_home_layout($layout) {

if ( is_category() )

$layout = 'content-sidebar';

return $layout;

This will make all categories use the content-sidebar layout.

// Force layout on homepage

add_filter('genesis_pre_get_option_site_layout', 'streamline_home_layout');

function streamline_home_layout($layout) {

if ( is_category('x') )
 $layout = 'full-width-content';

return $layout;

This will make category “x” have the full-width-layout. “X” could be the category ID, slug, or
name. You can also use an array or other conditional tag to force the layout of other parts of
your site. See the WordPress codex article on Conditional Tags for more details on how to use
this tag.

The available layout options are

 Content/Sidebar = ‘content-sidebar’
 Sidebar/Content = ‘sidebar-content’
 Content/Sidebar/Sidebar = ‘content-sidebar-sidebar’
 Sidebar/Sidebar/Content = ‘sidebar-sidebar-content’
 Sidebar/Content/Sidebar = ‘sidebar-content-sidebar’
 Full Width Content = ‘full-width-content’

How to Create a Print Style Sheet

You may have read the tutorial here explaining how to add a print style to your theme and
wondered how to begin. Well let’s start at the beginning.

Step 1. Create a file called print.css.

There are a number of styles you can add, but the basic style of print.css is this:

/* Print Style Sheet */

@media print {

body { background:white; color:black; margin:0 }

Step 2. Upload this newly created file to your Genesis child theme directory via FTP.

Step 3. Add the call to this new stylesheet in your child theme functions.php by following the
instructions in the tutorial here.

Step 4. Next we can add a link and print popup to single posts by creating a new php file. This
file will be called print.php and should be added to your child theme directory. Place the
following content in the file;

<div class="print">

<a href="javascript:window.print()" rel="nofollow">Print This!</a>

</div>

Step 5. Now you will need to show this in your single post template so add this to your child
theme functions.php

// Add Print Button after single post

add_action( 'genesis_after_post_content', 'child_include_print', 9 );

function child_include_print() {

if( is_single() )

require( CHILD_DIR.'/print.php' );

Step 6. If you would like to change the font, font size, background or float of your print button
add this to your child theme’s style.css file and style as desired.

.print {

How to Change the Default Favicon

A favicon, short for favorites icon, is a small image associated with your website that is typically
displayed in the browser address bar, favorites menu, bookmarks menu, or on the browser tab
of your web browser.

The default “G” favicon that comes with Genesis is easy to change.

Step 1: Create a favicon.ico file

Generally, favicons are 16×16 pixels and must be saved as a favicon.ico file. It must be named
this exactly or the browser won’t recognize it. Because of the small dimensions, the design
should be simple, and “iconic,” for lack of a better term. For instance, the Genesis “G” icon is
simple, recognizable, and easy to see at a small size.

You can use the free image editor, like GIMP, to save the 16×16 image as a favicon.ico. In
addition, several online tools are available to create your favicon.ico file:

 Dynamic Drive FavIcon Generator: Allows you to upload an image to generate a favicon
 favicon.cc: Allows you to build a favicon online or import an image

Step 2: Upload favicon.ico to your theme directory

The favicon.ico file is located in your child theme images directory. For example, the location of
the favicon in the Agency Child Theme is /wp-content/themes/agency/images/favicon.ico.
Use FTP to navigate to the child theme images directory and upload your new favicon.ico.

Using Favicons with WordPress MultiSite

The process to use a favicon for each site on a Multisite setup, that is using the same theme, is
different.

To remove the default favicon from the theme(s), place the following code into your
functions.php file.

remove_action('genesis_meta', 'genesis_load_favicon');

The above code should be placed anywhere after this:

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

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

?>

Install the Personal Favicon Plugin, which will enable you to specify the url of your favicon.
Multisite users should Network Activate the plugin.

Note: Browsers generally cache favicon files so you’ll need to clear your browser’s
cache before the new favicon will be visible to you.
How To Remove the Page Title in a Custom Page
Template
This tutorial assumes you have created a page_my-template.php child theme file containing the
following code.

<?php

// Template Name: My Template

genesis();

WordPress pages are often treated as posts in WordPress code. Perhaps it is counter-intuitive,
but this code in the /lib/structure/post.php Genesis theme framework file (v. 1.3.1) adds the
page title to a custom page template.

/**

* Post Title

*/

add_action('genesis_post_title', 'genesis_do_post_title');

function genesis_do_post_title() {

if ( is_singular() ) {

$title = sprintf( '<h1 class="entry-title">%s</h1>', apply_filters( 'genesis_post_title_text'

else {

$title = sprintf( '<h2 class="entry-title"><a href="%s" title="%s" rel="bookmark">%s</a></h2>

get_the_title() ) );
 }

echo apply_filters('genesis_post_title_output', $title) . "\n";

To remove the page title from this template add a line to the Page Template (page_my-
template.php) file.

<?php

// Template Name: My Template

// Remove the page title

remove_action( 'genesis_post_title', 'genesis_do_post_title' );

genesis();

Or you can add this to the functions.php child theme file.

add_action( 'template_redirect', 'child_remove_my_template_page_title' );

/**

* Remove the page title.

*/

function child_remove_my_template_page_title() {

if ( is_page_template('page_my-template.php') )

remove_action( 'genesis_post_title', 'genesis_do_post_title' );

}
The code above should be placed in the functions.php child theme file anywhere after this:

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

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

?>

How to Show a Different Sidebar on Specific Pages

The Simple Sidebars plugin will allow you to include additional sidebar widget areas in the
primary or secondary sidebar locations. However, on occasion, you may want to use a
completely different sidebar on one or more of your pages.

For example, one of my clients wanted a different sidebar to appear on the blog page, archives,
and single post pages.

In order to do this, you will need to:

1. Register a new sidebar in your child theme functions.php

2. Create a new sidebar file for your child theme
3. Add a function to your child theme functions.php

Step 1 – Register a new sidebar in your child themefunctions.php

In this example, we want to replace the Primary Sidebar with a new Primary Sidebar on the blog
page, archives, and single post pages. Since these pages are “blog” related, we will name our
new sidebar widget area, “Blog Sidebar”.

Open up the functions.php file in your child theme and add the following code. The code
should be entered at the end of the file, just before the closing ?> if there is one.

// Register new sidebar

genesis_register_sidebar( array(

'id' => 'blog-sidebar',

'name' => 'Blog Sidebar',

 'description' => 'This is the bottom left column in the sidebar.',

) );

Name your sidebar something appropriate to where your new sidebar will be located.

Step 2 – Create a new sidebar file

Create a new file inside your child theme directory called sidebar-blog.php or another name
that makes sense for where you want it to appear. Paste the following code into that file, making
sure the name of the sidebar is the same as the one you registered in Step 1.

<div id="sidebar" class="widget-area">

<?php

genesis_before_sidebar_widget_area();

dynamic_sidebar('blog-sidebar');

genesis_after_sidebar_widget_area();

?>

</div>

Note: You can have any number of sidebar-xxx.php files, but make sure to include the
prefix “sidebar-” in the name. For example:

 sidebar-page.php
 sidebar-single.php
 sidebar-home.php

Step 3 – Add a function to your child theme functions.php

add_action( 'get_header', 'child_sidebar_logic' );

/**

* Swap in a different sidebar instead of the default sidebar.

*
 * @author Jennifer Baumann

* @link http://dev.studiopress.com/display-alternate-sidebar.htm

*/

function child_sidebar_logic() {

if ( is_page_template( 'page_blog.php' ) || is_archive() || is_single() ) {

remove_action( 'genesis_after_content', 'genesis_get_sidebar' );

add_action( 'genesis_after_content', 'child_get_blog_sidebar' );

/**

* Retrieve blog sidebar

*/

function child_get_blog_sidebar() {

get_sidebar( 'blog' );

Code Explanation
To break it down some, the following line from the code above will conditionally execute the
subsequent code on the blog page template, archive pages, and single post pages. (Read more
on using Conditional Statements)

if ( is_page_template( 'page_blog.php' ) || is_archive() || is_single() ) {

This line removes the standard sidebar (See additional notes at the end of this tutorial):

remove_action( 'genesis_after_content', 'genesis_get_sidebar' );

This line adds your custom sidebar:

add_action('genesis_after_content', 'child_get_blog_sidebar');

This code says which sidebar to retrieve:

function child_get_blog_sidebar() {

get_sidebar( 'blog' );

So, if you named your new sidebar file sidebar-page.php, your code would look like:

function child_get_blog_sidebar() {

get_sidebar( 'page' );

Bonus Tip
Some themes include bottom sidebars that you may want to remove from under your new
sidebar. The Lifestyle Child Theme, for example adds two sidebars under the primary sidebar.
To remove them from under your new sidebar, but leave them under your original sidebar, use
the following code:

add_action( 'get_header', 'child_sidebar_logic' );

/**

* Remove Lifestyle bottom sidebars, and swap in a different sidebar instead of

* the default sidebar.

* @author Jennifer Baumann

* @link http://dev.studiopress.com/display-alternate-sidebar.htm

*/

function child_sidebar_logic() {

if ( is_page_template( 'page_blog.php' ) || is_archive() || is_single() ) {

remove_action('genesis_after_sidebar_widget_area', 'lifestyle_include_bottom_sidebars');

remove_action( 'genesis_after_content', 'genesis_get_sidebar' );

add_action( 'genesis_after_content', 'child_get_blog_sidebar' );

}
}

/**

* Retrieve blog sidebar

*/

function child_get_blog_sidebar() {

get_sidebar( 'blog' );

You can also use the same process to create new bottom sidebars for under your new sidebar.

How To Add Additional Post Classes

If you want to style certain posts differently on a content archive page according to the post’s
position on the page, then you may need to add additional classes to each post in order to have
more flexibility in styling. This tutorial shows you how to do that.

Open up the functions.php file in your child theme and add the following code. The code
should be entered at the end of the file, just before the closing ?> if there is one.

add_filter( 'post_class', 'custom_post_classes' );

/**

* Add a class of "top" to the first post, and "odd" or "even" classes as appropriate.

* @global int $loop_counter

* @param array $classes Existing array of post classes

* @return array

*/

function custom_post_classes( $classes ) {

global $loop_counter;
 if ( 0 == $loop_counter ) // First post

$classes[] = 'top';

if ( $loop_counter % 2 ) // Loop counter is exactly divisible by 2

$classes[] = 'even';

else

$classes[] = 'odd';

return $classes;

The code above will add a class of “top” to the first post in the list, and alternating classes of
“odd” and “even” for every post. By adding further conditional logic, you can add classes for the
third post, every third post, or all but the third post for instance.

Once the classes have been added, then you can use CSS as per normal to target just one set
of posts. To create a simple zebra stripe effect, we can give all posts a white background, and
then specify the odd-number posts to have a different background color:

#content .post { /* This isn't a custom class */

background-color: #fff;

#content .odd {

background-color: #fdfdfd;

Be aware that classes to indicate the post ID, a category it’s assigned to, the content type, and
any tags assigned to it are already added by default, so you can target them with CSS
immediately.
Site Recovery Tips and Tricks
Something bad is happening on your WordPress site. You try to login and have a white screen,
or the entire site has been replaced with error messages. You’re heart is starting to race. Sweat
is beading in your face. How will you fix this?

First, calm down. The solution is probably pretty simple. You need to be calm and focused to
remember what changes may have led to this. Did you upgrade a plugin, did you install a new
plugin, or did you edit your theme functions file? These are the most common issues.

If you are getting a white screen, then please enable debug mode. The white screen is caused
by a php error and debug mode will tell you what that error is.

If you already have an error then look and see what it is telling you. Often the errors fit into one
of 4 categories. A file is not found, a function is not found, a function is duplicated, or header
cannot be modified. These are easy enough to fix.

Genesis Not Found

The Problem:

One issue that comes up regularly in the forums is accidentally activating the child theme
without Genesis being installed, or accidentally deleting Genesis (sometimes for a manual
upgrade) with the child theme already active. Either of these will result in an error like this

Warning: require_once(%path-to-wordpress%/wp-content/themes/genesis/lib/init.php)
[function.require-once]: failed to open stream: No such file or directory in %path-to-
wordpress%/wp-content/themes/%child-theme%/functions.php on line 3

The solution:

You will need to access your site via FTP. Once there navigate to your site theme directory.
This will vary by host and site setup, but it often looks something like this /public_html/wp-
content/themes/. The error code will actually tell you exactly where this is, but typically you will
not have access to the first part of the path, but will have access starting around the
public_html(or similar) directory.

If you already have Genesis backed up on your computer find that folder. Otherwise, you will
need to download the latest version of Genesis from the forums and unzip. Make a note of
where the file is and navigate to it in your FTP client.
Make sure the directory you are about to upload is “genesis” spelled exactly like that and that
directly inside the directory is “style.css” (along with several other files and directories). If you
are using FileZilla (recommended below) on a Windows system then right mouse click the
“genesis” folder and select to upload. On Mac you have to activate the context menu by holding
ctrl when clicking unless you have a mouse with a secondary button or other means of
accessing the context menu.

WordPress Needs Upgrade

The Problem:

When a function doesn’t exist, it is often caused by WordPress being out of date. Always
upgrade to the latest version of WordPress. Of course, the simple upgrade isn’t available if this
error happens. The error might look something like this:

Fatal error: Call to undefined function add_theme_support() in /%path-to-wordpress%/wp-

content/themes/genesis/lib/init.php on line 17

The Solution:

You will have to perform a manual upgrade to WordPress. You will need to access your site via
FTP.

First, download the latest version of WordPress at wordpress.org and unzip it. Be sure you
remember where it is.

Now find your WordPress installation on your site via FTP. It will have several files and at least
3 folders: wp-admin, wp-content, and wp-includes. First, backup wp-config.php. This is one of
your most important files and you don’t want to lose it. Now rename wp-admin and wp-includes
to wp-admin-old and wp-includes-old. Find the wordpress folder you unzipped and open it.
You should see the same folders are you have on your site. Select everything except the wp-
content directory. In FileZilla this can be done quickly with “ctrl+a” then holding “ctrl” and clicking
on wp-content to unselect. Now right click and select upload.

You will get a message asking if you wish to overwrite the files. Select yes. In FileZilla you can
select to do this for all of the files and to limit it to that queue only. I recommend those settings
when answering yes to save time.

After all files are uploaded go to your site dashboard to complete the upgrade. You should get a
screen asking if you want to upgrade the database. Do that and the site should be working
correctly.
Problems with Plugins

The Problem:

It is always a good idea to disable plugins when upgrading WordPress. Often a plugin will be
perfectly stable in one version of WordPress and break another version completely. If you have
an error message pointing to a specific plugin you can just disable that plugin otherwise you
may have to troubleshoot the site by disabling all plugins. There are a lot of errors that can be
caused by plugins, including plugins that define a function already defined in Genesis or the
Child theme, or bad coding in the plugin that results in an error. An error message might look
like:

Warning: Cannot modify header information – headers already sent by (output started at
/%path-to-wordpress%/wp-content/plugins/%plugin-folder%/%plugin-file%.php:119) in /%path-
to-wordpress%/wp-login.php on line 337

The Solution:

You will need to access your site via FTP.

If you have a specific fatal error for a specific plugin, then navigate to that plugin. It will be in
your plugins directory. This is specific to your host and WordPress installation, but it often looks
like/public_html/wp-content/plugins/. Now rename the plugin directory to “directory-name-
disabled.” For example, if you have a plugin called “foo” in the directory “foo” then you need to
change the directory name to foo-disabled.

If you do not know exactly which plugin is causing the problem, or are troubleshooting to see if
plugins are causing the problem, then rename the entire plugins folder to plugins-disabled. If
this resolved the problem, then you need to identify the problem plugin. Go to your site and
access the plugins page. Make sure everything is disabled then rename your folder back
to plugins. Now activate half of your plugins. If the error comes back you know the bad plugin is
in that half, if not it is in the other half. Keep activating and deactivating in halves to narrow the
error down to a specific plugin. Any time the site goes down you will know there is a bad plugin
activated, but you will also have to disable the plugins again via FTP to get your site back.

Error in Child Theme Edit

The Problem:
You were making a change to your theme and now everything is broken. These errors fall into
several classes, but the most common are bad php, mixing html with php, and “header already
sent.” This last error might look like this:

Warning: Cannot modify header information – headers already sent by (output started at
/%path-to-wordpress%/wp-content/themes/%child-theme%/functions.php:119) in /%path-to-
wordpress%/wp-login.php on line 337

The Solution:

You will need to access your site via FTP. (Getting repetitive isn’t it?)

For bad php or mixing php with html you need to restore that file from a backup. Ask on the
forums how to properly format your php.

For the header already sent error, this is almost always caused by something before the first or
after the last ?> in the file. technically you don't need that
last ?> and the child themes are removing that to minimize this type
of error. Find the file using the FTP client and right click to
"view/edit." If prompted for a program use notepad. If your file ends
with a ?> delete it. If anything is before the first , even empty
space such as a space or return delete and then upload the file.

How to Access Your Site Via FTP

To access your site via FTP you will need a few things.

First, a FTP client. I recommend FileZilla. It is free (that should be enough right there), works on
any operating system, and has a lot of helpful features.

Second, you must have login credentials for your site. This includes the host, which is often your
url, the username, and password. If you do not know any of these, the company you are hosting
your site with can provide the details.

Filezilla is easy to use. The default setup shows a split pane (right and left) for your computer
and your site. The files and folders on the left are your computer and the files and folders on the
right are your site. This can be navigated by typing in the location in the field next to "Local site:"
or "Remote site:" or via the folder tree directly under that field. You may also double click on
folders to open them in the bottom of the split pane. The ".." directory takes you up one level.
How to Add Next/Previous Post Navigation to Single Posts
If you want to show links to the previous and next posts on single posts, you can use these two
template tags to navigate chronologically through your single post pages:

next_post_link();

previous_post_link();

To add them just before the Comments section in your child theme, open the functions.php file
add the lines below anywhere after:

require_once(TEMPLATEPATH.'/lib/init.php');
add_action('genesis_before_comments', 'custom_post_nav');

function custom_post_nav(){

echo '<div class="post-nav">';

echo '<div class="next-post-nav">';

echo '<span class="next">';

echo 'Next Post';

echo '</span>';

echo next_post_link('%link', '%title');

echo '</div>';

echo '<div class="prev-post-nav">';

echo '<span class="prev">';

echo 'Previous Post';

echo '</span>';

echo previous_post_link('%link', '%title');

echo '</div>';

echo '</div>';

Alternatively you could write it as:

add_action('genesis_before_comments', 'custom_post_nav');

function custom_post_nav(){?>

<div class="post-nav">

<div class="next-post-nav">

<span class="next">Next Post</span> <?php next_post_link('%link', '%title'); ?>

</div>

<div class="prev-post-nav">

<span class="prev">Previous Post</span> <?php previous_post_link('%link', '%title'); ?>

</div>

</div>

<?php }

Some basic styling to add to your style.css file:

.post-nav {

overflow: auto;

margin: 10px 0;

padding: 5px 0;

.post-nav span.next {

border-bottom: 1px solid #E6E6E6;

display: block;

margin-bottom: 5px;

.post-nav span.prev {

border-bottom: 1px solid #E6E6E6;

display: block;
 margin-bottom: 5px;

.post-nav a {

text-decoration: none;

.post-nav a:hover {

text-decoration: underline;

.post-nav a:active {

.next-post-nav {

width: 50%;

float: left;

.prev-post-nav {

width: 50%;

float: right;

text-align: right;

}
How to Keep Translation Active When Updating Genesis
If you’re like me, then English isn’t your first language and chances are you would like to see
your Genesis powered website talking to you in your own language. It shouldn’t come to you as
a surprise that Genesis is built to be translated and all you have to do is translate
the genesis.pot file via a tool like PoEdit.

After uploading the translations to your /lib/languages/ folder in your Genesis folder you
can see your translation active on your website. However, when Genesis offers updates, that
update process will remove your language files, as it replaces the complete Genesis folder,
reverting your site back to English.

Now, Genesis wouldn’t be Genesis if there wasn’t a solution for that. Here’s what you have to
do in order to keep your Genesis powered website translated even after updates.

1. Go to your active child theme folder and create a folder called languages
2. Upload your translation files (your .mo and .po files) to the languages folder you just
created
3. Next up, we need to tell Genesis we want it to look for translation files in your Child
Theme folder instead of the Genesis folder.

We need the following code pasted in your Child Theme’s functions.php:

//Child Theme Language override

define('GENESIS_LANGUAGES_DIR', STYLESHEETPATH.'/languages');

define('GENESIS_LANGUAGES_URL', STYLESHEETPATH.'/languages');

This snippet needs to go before the following code:

// Start the engine

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

but after the opening

<?php

That’s it. Now your site will always remain translated. Do keep in mind that a bigger Genesis
update (e.g. from 1.3.x to 1.4) there will probably be new untranslated texts in the new
Genesis .pot file found in the /lib/languages/ folder.

How to Load a New Section on Specific Pages

Often it is desirable to put a new section into a site, but only in certain places or under certain
circumstances. This is a relatively simple process and may be done via a theme function,
following the tutorial on How to Add a Section to Your Site Using Hooks or from Genesis Simple
Hooks.

For both of these examples I will just display “hello world” before the loop so I need
thegenesis_before_loop hook. If I wanted to display this elsewhere I would use another hook. I
also need to know the conditional tags built into WordPress. The most common ones are

is_home() – returns true on home page

is_frontpage() – returns true on front page
is_singular() – returns true on single post or page
is_page() – returns true on single page
is_single() – returns true on single post
in_category() – returns true if post is in a category
has_tag() – returns true if a post has a tag
is_category() – returns true on category
is_archive() – returns true on any archive

You will see that there are a lot of other options in the WordPress codex article including
additional arguments for selecting specific categories, pages, posts ….

Now using them with hooks couldn’t be easier. If you want to put “

Hello World

” at the top of all of your pages then you could paste that into your function, or into the
genesis_before_loop field of Genesis Simple Hooks.

What if you only want this to show up on the home page? Then put in a conditional tag. This is
what you would paste into your function when adding a section with hooks.

if(is_home()) { ?>
 <h3>Hello World</h3>

<?php }

The only difference between Genesis Simple Hooks and the add to site via hooks method is you
need to enable php on the hook and in your code. So if I were using Genesis Simple Hooks, this
is what I would paste into the field to have my code only show up on pages.

<?php

if(is_page()) { ?>

<h3>Hello World</h3>

<?php }

?>

This would work the exact same for any post, page, category … so long as there is a conditional
tag for it, but what if I want this to show on posts in category “foo” or on a page? Use this code
(don’t forget the php tags if using GSH)

if(is_page() || in_category('foo')) { ?>

<h3>Hello World</h3>

<?php }

The “||” is like saying “or” so the code will run if either of those tags return true, but sometimes
you want something to run if both tags are true. Maybe you have posts that are in category “foo”
and are tagged with “bar.” You can do this:

if(in_category('foo') && has_tag('bar')) { ?>

<h3>Hello World</h3>

<?php }

This will only show Hello World on posts in the category that also have the tag. “&&” is like
saying “and.”

Finally, there are times you want to add something to your site everywhere but a specific part of
the site. For example, you want to say Hello World on pages, posts, categories … but not the
home page. Then make this small change to the first code:

if(!is_home()) { ?>

<h3>Hello World</h3>

<?php }

That little “!” tells the code to return the opposite of normal. Another way of thinking of it is “!” =
“not.” Our conditional tag is saying “If this is not the home page then echo Hello World.”

The conditional tag is very powerful and can be extended to long complex strings. Review
theCodex article for more details.

How to Create Dynamic Body Classes

One of the most often asked and most easily accomplished tasks is styling elements differently
on different pages. Before proceeding I would encourage you to review the general CSS
tutorials found at W3 Schools. A basic understanding of how CSS works is required.

The great thing about Body Class is that you don’t need to use any php to make significant site
changes from one page to the next. Let’s start by looking at how to style the home page. If you
useFireBug, an extension for FireFox, or another developer tool set available for most browsers
you can easily look at the elements in any given webpage. The home page of this site currently
has this showing in FireBug.

Notice the class on the body element. It has “home, blog, logged-in, header-image, and content-
sidebar” listed. “Header-image” and “content-sidebar” are classes assigned by Geneses based
on theme settings. This allows the style sheet to dynamically present the correct layouts. The
remaining items are part of the WordPress body class output. Any of these items may be used
to change the layout via CSS selectors.
You can quickly present a different layout for logged-in users with the .logged-in selector, or
a home page layout with the .home selector. This is how you might use the home class to setup
a different background and header.

body.home {

background: none #333333;

This would show a dark gray background without an image.

.home #header {

height: 120px;

.home #header #title-area {

background: url(images/home-logo.png) no-repeat transparent;

.home #title-area, .home #title-area #title, .home #title-area #title a {

height: 120px;

This would make the header 120px tall on the home page and show the home-logo.png instead
of logo.png. Notice that I don’t include .header-image along with .home. Both of these are
body classes so cannot be simultaneously used as selectors.

This same concept may be applied to pages, categories, and posts.

Looking at this image from a category you will see the body class options include “archive,
category, category-getting-started …” This allows styling for all archive pages, all category
pages, or the “getting-started” category. To style for a specific category you will need to use
“category-%slug%” since categories often have names that include spaces or other characters
that would not work for a class selector. The same principles apply. Put your body selector in
front of the selector you are overriding for page specific styling.

Pages can also receive styling based on the template being used and the page ID.

All pages are styled with .page while a specific page may be styled with .page-id-xx where
“xx” is the page ID. This page is using a page template, which is based on the file name. In this
case the selector is .page-template-sitemap-php. Posts work the same way with “page”
being replaced with “single …” and no options for a template.

One major short coming with working with posts is the lack of being able to style all posts from a
specific category the same way. To deal with this I have written a small php filter to add the first
category a post in filed under to the body class.
//adds new body class for post category

add_filter('body_class', 'add_category_class_single');

function add_category_class_single($classes){

global $post;

if(is_single()) {

$category = get_the_category($post->ID);

$slug = $category[0]->slug;

$classes[] = 'post-category-' . $slug;

return $classes;

This allows the new style selector .post-category-%slug% This means the post I showed
above would have the class post-category-getting-started

By looking at the body tag you can quickly find the correct selectors for tags, attachment pages,
custom post types, custom taxonomies, and more. You can also use the filter I provided as a
template for adding new body class items based on your own function.

How to Modify the No Post Text

If you would like to modify the “Sorry, no posts matched your criteria.” text when there are no
posts to display, add the code below to the child theme’s functions.php file. Note that ‘Sorry, but
nothing matched your search criteria. Please try again with some different keywords.’ is where
you can select the text to use.

// Modify no post text

add_filter('genesis_noposts_text', 'custom_noposts_text');
function custom_noposts_text() {

echo 'Sorry, but nothing matched your search criteria.';

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):

?>

How to Add a Print Stylesheet

Adding a print stylesheet to your Genesis child theme is quick and easy. After creating a
stylesheet file named print.css and placing it in your child theme directory, we need to add it
to the head of the document.

We will need to show in our function where our print.css so open up your child
theme’sfunctions.php file and add the following:

add_action('wp_head','print_styles');

/**

* Add print stylesheet

* @author Jason Weaver

* @link http://dev.studiopress.com/add-print-stylesheet.htm

*/

function print_styles() { ?>

<link href="<?php bloginfo('stylesheet_directory');?>/css/print.css" media="print" rel="stylesheet

<?php }
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):

?>

Navigation Menus
Use Custom Menu Navigation to Open Links in New
Window
WordPress 3.0 introduced the new Custom Menu system giving users the menu system we
have dreamed of. Genesis adopted the menu system almost immediately after the official
release. Here are instructions for Using the Custom Menu.

One of the great features that was added to the menu system is just a bit hidden. You can make
your links open in a new window. This is great when providing a custom link off site. First, click
on “Screen Options” in the upper right of your Custom Menu screen. That should open up this
menu:

Make sure “Link Target” (circled in red) is selected.

Open the menu item you wish to edit and you should see a new drop down menu for “Link
Target.” Select “New Window or Tab.”

Now save your menu and the link will open in a new tab/window.

How to Change the Home Page Navigation Text

To change the text used for the Home page in page or category navigation menus, use the
‘genesis_nav_home_text’ Genesis Filter.

add_action( 'genesis_nav_home_text', 'child_change_nav_home_text' );

function child_change_nav_home_text() {

return 'Our Home';

Replace ‘Our Home’ with any quoted text you want or with a function which returns a string.

If you are concerned about translations, replace ‘Our Home’ with the __() WordPress function.

add_action( 'genesis_nav_home_text', 'child_change_nav_home_text' );

function child_change_nav_home_text() {

return __('Our Home', 'my_text_domain');

}

Replace ‘Our Home’ with any quoted you name you want and ‘my_text_domain’ with the text
domain you use in your child theme.

The code above which you add should be placed anywhere after this:

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

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

?>

How to Remove Title Attribute From Navigation Menus

If you are using the custom navigation menu you have the ability to take absolute control over
the title attribute and many other aspects of the menu item. For this reason and many more I
strongly encourage you to look into this system.

That said, many prefer the built in page and category navigation so they won’t have to set it up
for new items or just because that is what they are comfortable with. Often it might be desired to
remove the title attribute assigned to menu items by WordPress. As with many things, this can
be done in more than one way. Occasionally a plugin or other site specific issue will allow one
method to work over another.

Method #1

This method filters the list output directly and prevents any title from showing. Add this to your
functions.php file to remove the title from categories.

Open up the functions.php file in your child theme and add the following code. The code
should be entered at the end of the file, just before the closing ?> if there is one.

function wp_list_categories_remove_title_attributes($output) {

$output = preg_replace('` title="(.+)"`', '', $output);

return $output;

add_filter('wp_list_categories', 'wp_list_categories_remove_title_attributes');
Method #2

If you have a verbose category description you can turn off the description as title, which is the
default, with this code.

Open up the functions.php file in your child theme and add the following code. The code
should be entered at the end of the file, just before the closing ?> if there is one.

// Stops the category description from being used at the title

add_filter('genesis_nav_default_args', 'remove_cat_title_description', 10, 1);

function remove_cat_title_description($defaults) {

if((genesis_get_option('nav_type') == 'category') || (genesis_get_option('subnav_type') == 'cate

$defaults[use_desc_for_title] = 0;

return $defaults;

The great thing with this method is you are able to change any of the defaults for pages or
categories with this as well.

How to Add Content to Your Navigation

Genesis comes with a feature called Primary Navigation Extras, which let’s you stick the
following at the end of the primary navigation: Date, RSS Feed, Search, or Twitter link. But for a
project I’m working on now, I wanted something more custom.

This tutorial will show you how to customize the navigation area. I’ll be sticking a “Follow”
section at the end of the navigation with links to an RSS feed and Twitter profile. You can use
this technique to do almost anything to the navigation – stick something before it, after it, or
modify the navigation’s output itself.

I’m going to walk you through the code, so skip to the end if you just want the functioning code.

Setting up the Filter

The best way to modify Genesis (and any other theme framework for that matter) is with
functions attached to actions and filters. If you’d like a review, take a look at the Plugin API in
the Codex.

I’m going to create a function called follow_icons() and attach it to two different
filters,genesis_nav_items and wp_nav_menu_items. Which filter is actually used depends
on what type of menu you select in the Genesis Options, so include them both for compatibility.

add_filter('genesis_nav_items','follow_icons',10,2);

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

return $menu;

This code isn’t really doing anything yet. It’s pulling in the content of the nav menu and sending
it right back out. The first condition of the add_filter specifies the filter you want to work with. The
second is the function you want attached to that filter. The third is the priority (10 is default), and
the fourth is the number of arguments used (I’m only using 1).

Add your Changes

Once you have the basic filter set up, you can jump in and add your modifications.

add_filter('genesis_nav_items','follow_icons',10,2);

add_filter('wp_nav_menu_items','follow_icons',10,2);

function follow_icons($menu, $args) {

$args = (array)$args;

if ( $args['theme_location'] != 'primary' )

return $menu;

$follow = '<li id="follow">Follow: RSS and Twitter</li>';

return $menu.$follow;

In the first line I’ve created a variable called $follow which will contain the code I’m adding,
and the second line sticks my new code to the end of the existing navigation content. This just
contains static text right now, which I’ll be replacing next with some more code.

add_filter('genesis_nav_items','follow_icons',10,2);

add_filter('wp_nav_menu_items','follow_icons',10,2);

function follow_icons($menu, $args) {

$args = (array)$args;
 if ( $args['theme_location'] != 'primary' )

return $menu;

$follow = '<li id="follow">Follow: <a rel="nofollow" class="rss" href="'.get_bloginfo('rss_url').

class="twitter" href="'.esc_url( 'http://twitter.com/' .genesis_get_option('nav_extras_twitter_id') )

return $menu.$follow;

I’ve turned the static RSS and Twitter text into links and images. Here’s what each one means:

 get_bloginfo('rss_url'); – This is the link to the RSS feed. The reason I didn’t
hardcode an RSS feed link in is if you change your RSS feed using the Genesis Options,
this will automatically be updated. This code also works on any site now, not just the one I
built this for (always try and make your code easily reusable for future projects).
 get_bloginfo('stylesheet_directory'); – This is the link to your child theme’s
directory. I have an image for the RSS feed and Twitter uploaded in the images directory
of the child theme.
 esc_url() – Any time you’re using data created by a person, you want to escape it.
Escaping it ensures that untrusted text can’t do damage to your site (more info here). I
have to thank Aaron Brazell for teaching me this.
 genesis_get_option('nav_extras_twitter_id') – In the Genesis Options
panel, inside Primary Navigation Extras is a box to type your twitter username. This
function pulls the content of that box.

From there, you can use CSS to style it how you want.

This technique can be used to do anything to the navigation. You could stick something to the
beginning or modify the $output to change the navigation itself.

How to Relocate Your Navigation

For whatever reason you might want to have the navigation appear somewhere else on your
site than the Genesis standard of right after the header. There are a few hooks available to help
you out.

The first thing you need to do is remove the navigation from it’s current location.

// Remove the Primary Navigation

remove_action( 'genesis_after_header', 'genesis_do_nav' );

Next, you need to decide where you would like to place it. The most logical hooks to use are the
following:

 genesis_before_header
This hook executes immediately before the header (outside the #header div).
 genesis_header
By default, this hook outputs the header code, including the title, description, and widget
area (if necessary).
 genesis_before_content_sidebar_wrap
This hook executes immediately before the div block that wraps the content and the
primary sidebar (outside the #content-sidebar-wrap div).
 genesis_before_content
This hook executes immediately before the content column (outside the #content div).

You can use the following code to hook the navbar to any of the above hooks. I’m using
thegenesis_before_header as an example here:

//Adding the navbar to a new hook

add_action('genesis_before_header', 'genesis_do_nav');

So in conclusion, the complete code to reposition the navbar would consist of nothing more than
the following lines of code:

// Reposition the Primary Navigation

remove_action('genesis_after_header', 'genesis_do_nav');

add_action('genesis_before_content', 'genesis_do_nav');

If you would like to move the the Subnavbar around, all you have to do
replace genesis_do_nav in these code examples with genesis_do_subnav

The code above which you add should be placed anywhere after this in your child
themefunctions.php file:

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

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

?>
How to Change the Superfish Arguments
The dropdown menu options in Genesis are supported by the Superfish jQuery plugin for older
browsers. It comes with a sensible default set of options (see
genesis/lib/js/menu/superfish.args.js) that includes a delay of 0.1 seconds on the mouse out,
drop shadows disabled, and animations enabled. You may want to change these, but how could
you without changing the core Genesis code?

We’ll simply remove the reference to the existing core arguments file, and reference our own
new file instead.

Creating an Arguments File

First, let’s create the JavaScript file. This will need to be valid jQuery, so the easiest thing is to
copy the existing superfish.args.js and then adapt it for our own needs.

Create a new subfolder into your child theme called js, then add a new file to that folder
calledsuperfish.args.js with the following code in it:

jQuery(

function( $ ) {

/**

* Set up the superfish arguments

*/

$( '#nav ul.superfish, #subnav ul.superfish, #header ul.nav, #header ul.menu' ).superfish( {

delay: 200, // 0.2 second delay on mouseout

animation: { opacity: 'show', height: 'show' }, // fade-in and slide-down animation

dropShadows: true, // enable drop shadows

speed: 'slow' // Dropdown our menu slowly

} );

);

You can choose what you want from the Superfish options. Watch out for not having a comma
at the end of the last option in your code; it’ll fail in Internet Explorer if you do.

Changing the Referenced File

Now we’ve got our arguments file, we need to tell WordPress to make the switch and use it.

Open up the functions.php file in your child theme and add the following code. The code
should be entered at the end of the file, just before the closing ?> if there is one.

add_action( 'get_header', 'child_superfish_arguments' );

/**

* Change the superfish arguments reference file to our own.

* @author Gary Jones

* @link http://dev.studiopress.com/change-superfish-arguments.htm

*/

function child_superfish_arguments() {

if ( genesis_get_option( 'nav_superfish' ) || genesis_get_option( 'subnav_superfish'

wp_deregister_script( 'superfish-args' );

wp_enqueue_script( 'superfish-args', CHILD_URL . '/js/superfish.args.js', array( 'superfish'

};

We use the same check that the core does, to ensure we’re not loading the scripts
unnecessarily, then we drop the existing superfish-args reference, and create a new one.
Ours is located in our child theme folder, specifically in our new js subfolder. It has the
main superfish plugin as a pre-requisite, this is version 1.0 of our file (change this if you want
to ensure users are not not using a cached copy of your file), and we want it to load in the footer
if possible.

How to Remove the Comments Link in the Navigation

To remove the Comments RSS Link from the right side of the Navigation bar when RSS Links
are selected add the following to your Child theme’s functions.php file

//Remove Comments RSS Link from Navigation Extras

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

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

add_filter('genesis_nav_items', 'child_nav_right', 10, 2);

add_filter('wp_nav_menu_items', 'child_nav_right', 10, 2);

/**

* Modifies Navigation Extras RSS Links option to remove Comment RSS Link.

* @author Daisy Olsen

* @link http://dev.studiopress.com/remove-comments-navigation.htm

*/

function child_nav_right($menu, $args) {

$args = (array)$args;

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

return $menu;

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

$rss = '<a rel="nofollow" href="'.get_bloginfo('rss_url').'">'.__('Posts', 'genesis').'

$menu .= '<li class="right rss">'.$rss.'</li>';

else {

$menu .= genesis_nav_right($menu, $args);

 }

return $menu;

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):

?>

How to Apply Custom CSS Classes to a Custom Menu

This tutorial will show you how to apply custom icons to your individual menu items, as well as
customize and add additional links to the Primary Navigation extras. It uses the Delicious child
theme for demonstration purposes.

Step One:

Set up a Custom Menu for your Primary Navigation.

Step Two:

Create custom css classes for each item.

For the Home link, I used the following:

#nav li.home a {

background: url(images/home.png) no-repeat left center;

padding: 0 0 0 25px;
 border: none;

For individual links, since I chose not to use unique icons, this code was used:

#nav li a {

background: url(images/star.png) no-repeat left center;

font-family: Tahoma,Arial,Verdana;

color: #FFFFFF;

display: block;

font-size: 12px;

height: 28px;

line-height: 26px;

margin: 5px 0 0 0;

padding: 0 0 0 25px;

text-decoration: none;

position: relative;

border: 1px solid transparent;

#nav li:hover a, #nav li:active a {

background: #404040 url(images/star.png) no-repeat left center;

color:#FFFFFF;

border: 1px solid #333333;

border-radius: 6px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;
 -webkit-background-clip: padding-box;

-webkit-background-origin: padding-box;

Step Three:

Enable Custom CSS Classes via the Screen Options button.

Step Four:

Add your custom menu item to the menu. Be sure to assign the CSS class.
Step Five:

The Twitter link is also a custom menu item, with a special CSS class. Note the left margin in
the code given below – this positions the link on the right side of the navigation. It can be edited
according to the number of menu items present.

#nav li.twitter a {

background: url(images/twitter-nav.png) no-repeat left center;

margin: 0 0 0 350px;

padding: 3px 0 1px 20px;

border: none;

How to Use Custom Nav Menus

Step One:

Go to Dashboard > Genesis > Theme Settings, and select Custom Nav Menu as shown in the
screenshot below:

Step Two:

Go to Dashboard > Appearance > Menus and create your Custom Menu.
Step Three:

Click Screen Options in the upper right corner of the Menus page to choose which options you
wish to show for your menu items.

Step Four:

Select the items you wish to add to your menu, and click “Add to Menu”. You can simply drag
and drop the items into the order you wish them to appear.
Step Five:

Once the menu has been saved, you can assign it to the Theme Location unless it is to be used
as a widget.

Step Six:

There are times you may need a custom link – the most frequently requested is “Home”. This
can be added by selecting “Add Home Link” in the Custom Links section. This can also be used
to create a top-level item that can not be clicked – the “Categories” link in the screenshot above.
Simply label the Custom Link, and use # as the URL.

Video

To see a better example of this new feature in action, check out this video screencast our
developer, Nathan Rice, recorded.

How to Modify the Home Link Text in Your Navigation

If you would like to modify the text of the Home link in your navigation, add the code below to
the child theme’s functions.php file. Note that 'Homepage' is where you can select the text
to use for the Home link.
add_filter('genesis_nav_home_text', 'child_nav_home_text', 10, 2);

/**

* Modify home text link in navigation

* @author Brian Gardner

* @link http://dev.studiopress.com/modify-home-link.htm

*/

function child_nav_home_text($text, $args) {

$text = 'Homepage';

return $text;

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):

?>

How to Place the Navigation Above the Header

If you would like to move the primary or secondary navigation menu above the header, open up
your child theme’s functions.php file and add this code:

For the primary navigation

// Place the primary navigation menu above the header

remove_action('genesis_after_header', 'genesis_do_nav');

add_action('genesis_before_header', 'genesis_do_nav');
For the secondary navigation

// Place the secondary navigation menu above the header

remove_action('genesis_after_header', 'genesis_do_subnav');

add_action('genesis_before_header', 'genesis_do_subnav');

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):

?>

Post Excerpts
Edit the Read More Link on Blog or Content Archive
Pages
The [Read more...] link on the Blog or Content Archive pages can easily be changed to anything
you like. What if you wanted it to display “Continue Reading…”?

Open up the functions.php file in your child theme and add the following code. The code
should be entered at the end of the file, just before the closing ?> if there is one.

add_filter( 'excerpt_more', 'child_read_more_link' );

add_filter( 'get_the_content_more_link', 'child_read_more_link' );

add_filter( 'the_content_more_link', 'child_read_more_link' );

/**

* Edit the read more link text.

*
 * @author Laura Poston

* @link http://dev.studiopress.com/customize-read-more.htm

* @return string HTML markup

*/

function child_read_more_link() {

return '<a class="more-link" href="' . get_permalink() . '" rel="nofollow">Continue Reading &#x202

Add Read More Link to Manual Excerpts

Many find that they wish to use the manual excerpt for a handcrafted post introduction on the
home and archive pages. This can be a great practice, but it does have one major drawback.
The manual excerpt does not include any “read more” link of any sort.

Fortunately a simple code snippet can remedy this short coming for all manual excerpts.

There are two options. Please use only one of these.

Add Read More to Manual and Automatic Excerpts

If you will be using manual and automatic excerpts, consider adding this code which will append
the read more link after the excerpt. This will be on a separate line and will be easily styled with
the “morelink” class. This code goes in the functions.php file after the framework has been
loaded.

add_action('genesis_after_post_content', 'manual_excerpt_more_link', 1);

function manual_excerpt_more_link() {

if(!is_singular()){

echo '<a href="'.get_permalink().'" rel="nofollow" class="morelink">Read More</a>';

}
}

Add Read More to Manual Excerpt Only

If you will be using only the manual excerpt or plan on using this tutorial (How to Add a Read
More on Post Excerpts) to modify the automatic excerpt read more and want the out put to be
similar, then use this code. It will output the “morelink” within the excerpt paragraph.

// Add Read More link to manual excerpts.

add_action('the_excerpt', 'child_add_manual_read_more', 20);

function child_add_manual_read_more($excerpt) {

if ( has_excerpt() ) {

// Trim the newline.

$excerpt = rtrim($excerpt);

// Check for the <p> tags

if ( '<p>' == substr($excerpt, 0, 3) && '</p>' == substr($excerpt, -4) )

$excerpt = sprintf( '<p>%s <a href="%s" rel="nofollow" class="morelink">Read More</a></p>

return $excerpt;

How to Add a Read More on Post Excerpts

We are asked by users if it’s possible to add a “read more” link at the end of their excerpt.
Currently, the default output for the WordPress excerpt is [ ... ], so if you want to add the “read
more” link, follow the instructions below.

Open up the functions.php file in your child theme and add the following code. The code
should be entered at the end of the file, just before the closing ?> if there is one.
add_filter( 'excerpt_more', 'add_excerpt_more' );

/**

* Add Read More to end of post excerpt.

* @author Brian Gardner

* @link http://dev.studiopress.com/add-read-more.htm

*/

function add_excerpt_more( $more ) {

return '<a href="' . get_permalink() . '" rel="nofollow">Read More</a>';

How to Modify the Length of Post Excerpts

To increase the number of words that the excerpt uses, paste this code in your child theme’s
functions.php file. Please note that this method only works for Genesis v1.1 and above.

add_filter('excerpt_length', 'custom_excerpt_length');

/**

* Modify length of post excerpts

* @author Brian Gardner

* @link http://dev.studiopress.com/modify-post-excerpts.htm

*/

function custom_excerpt_length($length) {

return 50; // pull first 50 words

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):

?>

Post Info
How to Customize the Post Info Function
You may notice that the Genesis Framework outputs a line just below the post’s title. This is
called the Post Info – sometimes also referred to as the “byline.” By default, it is comprised of
the date of the post, the post author, the comments link and an edit link for admins to use when
they are logged into the site. There are two ways you can customize this function.

Option #1 – Genesis Simple Hooks Plugin

We have developed a plugin that will enable you to customize the Post Info function from your
WordPress dashboard. The Simple Hooks plugin was developed to extend the capabilities of
Genesis and allow you to hook HTML, PHP and shortcodes to any of the existing hooks within
the framework.

Option #2 – Using Custom Filter in Your Child Theme’s Functions File

To remove the post info function, open your child theme’s functions.php file, enter this code:

/** Remove the post info function */

remove_action( 'genesis_before_post_content', 'genesis_post_info' );

To customize the post info function, open your child theme’s functions.php file, enter this code:

/** Customize the post info function */

add_filter( 'genesis_post_info', 'post_info_filter' );

function post_info_filter($post_info) {

if (!is_page()) {

$post_info = '[post_date] by [post_author_posts_link] at [post_time] [post_comments]

[post_edit]';
 return $post_info;

}}

The code above will replace the default output from the Genesis parent theme, allowing you to
customize it as you wish from the child theme’s functions.php file. The section of the filter above
that can be edited to suit your specific needs is as follows, highlighted in RED.

$post_meta = 'Place Custom Post Info Shortcodes and Content Here';

For a comprehensive list of shortcodes and attributes, check out the Shortcode Reference page.

Post Meta:
How to Customize the Post Meta Function
You may notice that the Genesis Framework outputs a line just below post’s content. This is
called the Post Meta. By default, it is comprised of the categories and tags that the post has
been assigned. There are two ways you can customize this function.

Option #1 – Genesis Simple Hooks Plugin

We have developed a plugin that will enable you to customize the Post Meta function from your
WordPress dashboard. The Simple Hooks plugin was developed to extend the capabilities of
Genesis and allow you to hook HTML, PHP and shortcodes to any of the existing hooks within
the framework.

Option #2 – Using Custom Filter in Your Child Theme’s Functions File

To remove the post meta function, open your child theme’s functions.php file, enter this code:

/** Remove the post meta function */

remove_action( 'genesis_after_post_content', 'genesis_post_meta' );

To customize the post meta function, open your child theme’s functions.php file, enter this code:
/** Customize the post meta function */

add_filter( 'genesis_post_meta', 'post_meta_filter' );

function post_meta_filter($post_meta) {

if (!is_page()) {

$post_meta = '[post_categories] [post_tags]';

return $post_meta;

}}

The code above will replace the default output from the Genesis parent theme, allowing you to
customize it as you wish from the child theme’s functions.php file. The section of the filter above
that can be edited to suit your specific needs is as follows, highlighted in RED.

$post_meta = 'Place Custom Post Meta Shortcodes and Content Here';

For a comprehensive list of shortcodes and attributes, check out the Shortcode Reference page.

Search Form:
How to Customize the Search Form
Below is the code that you can use to remove the Search Form button text and replace with
your own:

/** Customize search form input button text */

add_filter( 'genesis_search_button_text', 'custom_search_button_text' );

function custom_search_button_text($text) {

return esc_attr('Go');

Below is the code that you can use to remove the Search Form input box text and replace with
your own:

/** Customize search form input box text */

add_filter( 'genesis_search_text', 'custom_search_text' );

function custom_search_text($text) {

return esc_attr('Enter keywords, hit enter;');