Tutorial Genesis 1.x

8/16/2019 Tutorial Genesis 1.x

1/163

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 startintroducing some of the elements of a framework. They are a relatively new thing in theWordPress 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, butalso easily extended with child themes and hooks. Not only do they provide a number ofenhancements above a typical WordPress theme, but they also serve as a platform to buildupon for additional functionality. This post will focus exclusively on the Genesis Framework andhow 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 canbe activated like any other WordPress theme. To help explain the relationship of a child themeand 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 beseen 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 astandard theme.

Theme Files

The Genesis Framework, which in essence is the parent theme, is where all of the theme filesare kept. This would include the typical theme files such as 404.php, comments.php, footer.php,


2/163

header.php, index.php, page.php, single.php and so on. Child themes can also include thesefiles – 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 itinto 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 acustom 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 forcustomizations to be made by way of the child theme stylesheet. While there is nothing wrongwith the way that works, we’ve chosen to simplify things and just give the child theme it’s ownstylesheet. In other words, if a child theme is being used, the style.css file in the child themefolder has complete control over the way the child theme looks. You don’t have to comparemultiple 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 cancontrol certain behaviors of how WordPress is run or how the theme outputs various things. Forinstance, a functions file can register sidebar widgets and how they are styled, as well as anumber of other “function” related things. With Genesis, the functions.php is simple – it calls theentire 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 functionsare 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 folderwhich 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, atleast 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


3/163

to change the way it looks on the outside, you put a cover on it to make it look different. Thesame holds true with a child theme – as that is what “decorates” the way your theme looks.

An Introduction to HooksNow that we have launched the Genesis Framework and have some child themes available, Ithought 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 themeitself. In other words, it provides the ability to extend functionality by way of inserting (orhooking) 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. Forinstance, if you open up the footer.php file, you’ll see this code:

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 perfectexample 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 sensefor what content it contains… bottom-widgets.php.


4/163

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:

f uncti on i ncl ude_bot t om_wi dgets ( ) {

r equi r e( CHI LD_DI R. ' / bott om- wi dgets . php' ) ;

}

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

add_act i on( ' genesi s_before_f ooter' , ' i ncl ude_bott om_wi dgets' ) ;

That line of code tells the Genesis engine… take the include_bottom_widgets function, andattach it to the genesis_before_footer hook, and execute. If you open up genesis/footer.php youcan see the exact location of the genesis_before_footer() hook so you’ll know where yourfunction 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 variouslocations throughout the genesis source code.

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

add_act i on( ' genesi s_before_f ooter' , ' i ncl ude_bot t om_wi dget s' ) ;

f uncti on i ncl ude_bot t om_wi dgets ( ) {

r equi r e( CHI LD_DI R. ' / bott om- wi dgets . php' ) ;

}

Additional Benefits

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

No more repetition of code blocks hard-coded into several templates as you will have it in onefile. When you update it, that change will affect all areas of your theme where you have ithooked to.


5/163

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 andcustomize 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 ofthe 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 wherenecessary.

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 usesome 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 andcontent of the underlying function. Eg, if an existing function provides a f ilter on the output, thereplacement function should do the same. Re-use Genesis functions rather than writing yourown.

4. Naming/Checking Functions Function naming: include the childthemename in the function name. For example, if replacinggenesis_do_post_title with your own function, name it childthemename_do_post_title. Sameapplies 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.


6/163

5. Loading jQuery Scrip ts Don’t load jQuery framework (or any other framework shipped with WordPress) from externalsources without using wp_deregister_script to deregister the built-in version andwp_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: Sampl e

Theme URI : ht t p: / / www. your domai n. com/

Descr i pt i on: Thi s i s a sampl e chi l d theme creat ed f or t he Genesi s Fr amework.

Author : Your Busi ness Name

Author URI : ht t p: / / www. yourbusi ness. com/

Versi on: 1. 0

Tags: cust om- background, cust om- header, f eat ured- i mages, t hreaded- comments, t wo- col umns

Templ at e: genesi s

Templ at e Ver si on: 1. 7. 1

Li cense: GNU General Publ i c Li cense v2. 0

Li cense URI : ht t p: / / www. opensour ce. org/ l i censes/ gpl - l i cense. 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.


7/163

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 tofunction 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.phpfile.


8/163

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 goin 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.phphome.phpstyle.cssscreenshot.jpg

README.txtpage-special.phppage-another-special.phpimages /lib / admin / childthemename-settings.phplib / admin / childthemename-seo-settings.phplib / admin / childthemename-inpost-metaboxes.phplib / js / childthemename-funky-script.jslib / widgets / childthemename-amazing-widget.phplib / 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:


9/163

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 sizename, eg ‘Lifestyle Thumbnail’

Rule #3

Register theme-specific widget areas using genesis_register_sidebar(). Always assign an ID toeach 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’tadd it as a top-level menu item.


10/163

Rule #3

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

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 withremove/add actions. If you need a loop counter, one is already built-in to genesis_custom_loop


11/163

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. Thecode should be entered at the end of the file, just before the closing ?> if there is one.

/ ** Add support f or 3- col umn f oot er wi dget s */

add_t heme_suppor t ( ' genesi s- f oot er - wi dgets ' , 3 ) ;

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

/ ** Add support f or 4- col umn f oot er wi dget s */

add_t heme_suppor t ( ' genesi s- f oot er - wi dgets' , 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/lesscolumns, you’ll need to modify or add to your CSS accordingly.

/ * Footer Wi dget s

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

#f ooter - wi dget s {

- kht ml - bor der- r adi us: 3px;

- moz- bor der- r adi us: 3px;

- webki t - border - r adi us: 3px;

backgr ound-col or: #f 5f 5f 5;

border : 1px

s ol i d

#ddd;


12/163

border - r adi us: 3px;

cl ear: bot h;

margi n: 0

aut o

10px;

overf l ow: hi dden;

wi dt h: 958px;

}

#f oot er- wi dgets . wr ap {

f ont - si ze: 13px;

l i ne- hei ght : 20px;

overf l ow: hi dden;

paddi ng: 15px 19px 0;

}

#f ooter - wi dget s . wi dget {

background: none;

border : none;

margi n: 0

0

15px;

paddi ng: 0;

}

#f ooter - wi dget s . t extwi dget {

paddi ng: 0;

}

#f oot er- wi dgets h4 {


13/163

background: none;

border : none;

margi n: 0

0

5px;

paddi ng: 0;

}

#f ooter - wi dget s . wi dget_ t ag_cl oud di v di v {

paddi ng: 0;

}

#f oot er- wi dgets p {


l i ne- hei ght : 20px;

paddi ng: 0

0

10px;

}

#f ooter - wi dget s ul {

margi n: 0;

}

#f oot er- wi dget s ul l i {

margi n: 0

0

0

20px;

}

#f oot er - wi dget s #wp- cal endar t head,

#f oot er - wi dget s #wp- cal endar t d {


14/163

background: none;

}

. f oot er- wi dget s- 1

{

f l oat : l ef t ;

margi n: 0 20px 0 0;

wi dt h: 295px;

}


{

f l oat : l ef t ;

wi dt h: 290px;

}


{

f l oat : r i ght ;

wi dt h: 295px;

}

How to Setup the Custom Header Function

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

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

/ ** Add support f or customheader ** /


15/163

add_t heme_suppor t ( ' genesi s- cust om- header' , ar r ay( ' wi dt h'

=> 960, ' hei ght '

=> 100 ) ) ;

The code above should be placed anywhere after this:

r equi r e_once( TEMPLATEPATH. ' / l i b/ i ni t . 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 thehomepage, so we thought it’d be a good idea to build the function that does the heavy lifting intocore, 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:


16/163

1. Include Required CSS

/ * Featured Post Gr i d

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

. genesi s- gr i d- even {

f l oat : r i ght ;

paddi ng: 0 0 15px;

wi dth: 48%;

}

. genesi s- gr i d- odd {

cl ear: bot h;

f l oat : l ef t ;

paddi ng: 0 0 15px ;

wi dth: 48%;

}

. genesi s- gr i d- even,

. genesi s- gr i d- odd {

mar gi n: 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 newfeatured image size(s). Simply open up your child theme’s functions.php file and place the codebelow into it. You will need to re-upload any post images for the new size to display, or you canuse the Regenerate Thumbnails plugin.


17/163

/ ** Add new i mage si zes **/

add_i mage_si ze(' gr i d- t humbnai l ' , 100, 100, TRUE) ;

3. Create a home.php File


18/163

/ ** Remove t he post meta f unct i on f or f r ont page onl y **/

r emove_act i on( ' genesi s_af t er_post _cont ent ' , ' genesi s_post _meta' ) ;

genesi s() ;

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 willreturn no image).

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

‘feature_content_limit’ This is where you can specify the number of characters of the post to show in the featuressection (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 usedfor 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:


19/163

Comments Section Filters

genesis_title_comments Default value: __(‘Comments’, ‘genesis’)Applied to the comments title text as well as heading tags in the genesis_do_commentsfunction.

genesis_no_comments_text Default value: (empty)Applied to the no comments text if commenting is enabled but there are no comments so far inthe 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_commentsfunction.

genesis_title_pings Default value: __(‘Trackbacks’, ‘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 thegenesis_do_pings function.

genesis_comment_list_args Default value: $argsApplied to the arguments used in wp_list_comments in the genesis_default_list_comments

function.

genesis_ping_list_args Default value: $argsApplied 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.


20/163

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] ·[footer_genesis_link] [footer_studiopress_link] · [footer_wordpress_link] ·[footer_loginout]’Applied to the credits text in the genesis_do_footer function.

genesis_footer_output Default value: $output, $backtotop_text, $creds_textApplied to final output of genesis_do_footer including the back to top and credits text as well as

div structure.

genesis_footer_scriptsDefault 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 optionset by the user will either wrap the title in or

tags.

genesis_seo_description Default value: $description, $inside, $wrapApplied to the output of the genesis_seo_site_description function which depending on the SEOoption set by the user will either wrap the description in or

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.


21/163

Loop Filters

genesis_custom_loop_args Default value: wp_parse_args($args, $defaults), $args, $defaultsApplied 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: $titleApplied to the output of the title and wrapping heading tags in the genesis_do_post_titlefunction.

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 thegenesis_do_noposts function.

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

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

genesis_author_box_gravatar_size

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

genesis_author_box_title Default value: sprintf( ‘%s %s’, __(‘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.


22/163

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: $argsApplied to the breadcrumb arguments in the genesis_breadcrumb function.

genesis_breadcrumb_homelink

Default value: $homelinkApplied to the breadcrumb home link in the genesis_breadcrumb function.

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

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

Image Filters

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

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

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


23/163

Menu Filters

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

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

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

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

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

Option Filters

genesis_pre_get_option_ Default value: $key, false, $settingAllows 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, $attsapplied to the default atts and output for the copyright shortcode.


24/163

genesis_footer_childtheme_link_shortcode Default value: $output, $attsapplied 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, $attsapplied to the default atts and output for the StudioPress link shortcode.

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

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

Post Shortcode Filters

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

genesis_post_time_shortcode

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

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

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

genesis_post_comments_shortcode

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

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


25/163

genesis_post_categories_shortcode Default value: $output, $attsapplied 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-settingsApplied to the defined Settings Field Constants (for DB storage for genesis settings).

genesis_seo_settings_field

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

genesis_formatting_allowedtags Default value:

array(

/ /

, ,

' p' => ar ray( ' al i gn' => arr ay( ) , ' cl ass' => ar ray( ) , ' st yl e' => arr ay( ) ) ,

' span'

=> arr ay( ' al i gn'

=> arr ay() , ' cl ass'

=> arr ay() , ' st yl e'

=> arr ay( ) ) ,

' di v' => arr ay( ' al i gn' => arr ay( ) , ' cl ass' => arr ay( ) , ' styl e' => ar ray( ) ) ,

/ / Text

' a'

=> ar ray( ' hr ef '

=> arr ay() , ' t i t l e'

=> arr ay( ) ) ,

/ / , , ,

' b'

=> ar ray( ) , ' str ong'

=> ar r ay() ,

' i '

=> ar r ay( ) , ' em'

=> ar r ay() ,

/ / ,


26/163

' bl ockquot e'

=> ar r ay( ) ,

' br ' => ar r ay( )

) ) ;

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

SEO Settings Filter

genesis_seo_settings_defaultsDefault value: $defaultsapplied to the default values for Genesis SEO Settings called in thegenesis_seo_settings_defaults function.

Theme Settings Filter

genesis_theme_settings_defaults Default value: $defaultsapplied to the default values for Genesis theme settings called in thegenesis_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 beingexecuted 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 beingexecuted after all Genesis functions have loaded, but before any custom code in the childfunctions.php file is run.


27/163

Document Head Action Hooks

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

genesis_meta This hook executes in the section of the document source. By default, things like METAdescriptions and keywords are output using this hook, along with the default stylesheet and thereference 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 (ifnecessary).

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 SEOsettings 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 primarysidebar (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 primarysidebar (outside the #content-sidebar-wrap div).

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


28/163

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 #sidebardiv).

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-altdiv).

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 theloop, 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 moredetails.

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.


29/163

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 #contentdiv).

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

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 thegenesis_list_comments hook, which outputs the comment list.

genesis_after_comments This hook executes immediately after the comments block (outside the #comments div).


30/163

genesis_list_comments This hook executes inside the comments block, inside the .comment-list OL. By default, itoutputs 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 thegenesis_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 ofpings 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 easilydisplaying 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 areoften 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.


31/163

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

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 _dat e f or mat="F j , Y"

l abel ="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 WordPressoptions.

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 _t i me f or mat="g: i a"]

Output: 9:48 am

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


32/163

[post_author]

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

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

Example:

[ post _author bef ore=""

af t er =""]

Output: Brian Gardner

[post_author_link]

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

nofollow – assign nofollow to the rel attribute in the link to the author. By default is setto FALSE

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

Example:

[ post _aut hor _l i nk bef ore=""

af t er="" ]


[post_author_posts_link]

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

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

Example:


33/163

[ post _aut hor _post s_l i nk bef ore=""

af t er=""]


[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 _comment s zer o="No Comment s" one="1 Comment " mor e="% Comment s" ]

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 _t ags sep=" , "

bef ore="Tags: " ]

Output: Tags: Tag Name


34/163

[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 _categori es sep=" , "

bef ore="Post ed 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 thisshort 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 _edi t bef ore=""

af t er="" ]

Output: A link to the edit post/page screen for that post will be displayed only for logged inusers 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”


35/163

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:

[ f ooter _backtotop t ext ="Top" hr ef ="#cont ent "]

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:

[ f ooter_copyri ght f i r st ="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


36/163

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

Example:

[ f ooter _chi l dt heme_l i nk bef ore ="&mi ddot ; " ]

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:

[ f oot er_genesi s_l i nk]

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:

[ f oot er_st udi opr ess_l i nk]

Output: by StudioPress


37/163

[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:

[ f ooter_wordpr ess_l i nk]

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:

[ f ooter_l ogi nout r edi r ect="htt p: / / www. st udi opr ess. com/ f eatures/ genesi s"]

Output: Log out


38/163

Visual Markup Guide


39/163

Getting Started

How to Upgrade the Genesis Framework

The Genesis Framework was the first theme package to include an auto-update feature. Wemake 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 playingguinea 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 makechanges this way. Alternatively, use the CSS in the child theme folder to make stylisticmodifications, and use the proper PHP files in the child theme folder, along with the GenesisHook 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 Optionssection of your dashboard: Genesis > Theme Settings > Information … and click on the “EnableAutomatic 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 directory3. Unzip and upload the new genesis folder to your wp-content/themes directory4. Log into the dashboard to complete the upgrade process.


40/163

Theme Customization Basic Skills

So, you have a nice new theme with tons of features, but you want to make changes so it will beuniquely yours. You are at a crossroad. Do you hire a developer or do you become adeveloper? 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 itto be, and it will happen much faster than your could do it yourself. A skilled developer is also anexpensive option. Developer rates generally start at $50/hour and run up to $200/hour for thistype 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 developingthe theme yourself is a potential savings of hundreds of dollars. This is certainly convincing, butbe sure to consider the hidden costs. What is your time worth? If you plan on having a greatlooking and functioning site you will need to learn CSS, HTML, and enough PHP to understandhow 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 orcreate links, insert images, or much else. I strongly recommendW3Schools.com as an incredibleand 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 willhave a good foundation for moving forward.

CSS

Once you have a firm foundation in HTML you will want to understand how to make it lookpretty. HTML without CSS is bland at best. CSS controls, size, color, background, layout, andpretty much every visual component of your site. Again, I recommend W3Schools.com. Not only


41/163

do they have a basic explanation of every aspect of CSS, including some non standard usesthat you have to dig for, they include a “try it yourself” feature that lets you change the CSSproperties/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 basicsdown 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 cansearch 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 isunlikely you will need to learn enough PHP to actually create anything, but you will need to learnenough 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 toadapt it to your unique needs.

Recommended Tools

Developers all have their preferred tools. Many use very expensive software to make their jobseasier. If you are trying to save money, you probably want software in the inexpensive to freerange. Fortunately there are a lot of great tools available for little to nothing. in fact, every tool Iwill recommend here is free.


42/163

FTP

You really need to learn how to access your site via FTP. Even if you do most of your editing inthe WordPress editor, you will need FTP in case you break the theme and can no longer accessyour 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. Prettymuch all operating systems come with some kind of plain text editor such as “Notepad” forWindows. You can open any web document in one of these editors, and this may be all youneed, however, there are extended text editors available that will markup your text, set tabs, andeven check for errors. Some will even connect via FTP to automatically update your f iles. A fewinclude:

Notepad++ NetBeans

Image Editor

Most folks are familiar with Adobe Photoshop. This is very expensive software, but you can getmost of the features with Photoshop Elements. Still I said I would be recommending freeprograms, so if you are on a shoestring budget check out Gimp. This is a free image editor thatcan be extended via free scripts and plugins into a very powerful image editor to rivalPhotoshop. It can also open Photoshop (PSD) files. If you need to work with vector art you canuse 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 isaffecting a given element and lets you test changes to a live site, though you still need to addthe changes to your stylesheet to make it a permanent change. It has a lot of built-in functionsyou are unlikely to need, but it’s great to have them if you ever need them. Safari and Chromealso have a built-in developer tool set you can use. It functions much like FireBug. IE doesn’thave anything at this time, but you can use FireBug Lite to access some of the features.


43/163

Validator This is an online web resource that will validate your website for proper HTML. Manyerrors between browsers are not actually CSS related, but improper validation. Run your sitethrough this validator and then resolve the errors.

Recommended Developers

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

How to Import the Demo Site’s ContentWe’ve been asked many times if it’s possible install the demo theme’s content onto a freshinstallation of WordPress so that they can work backwards to understand how the themes areconfigured. 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 pagefrom the WordPress website. To import from a WordPress export file into your blog follow thesesteps.

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 – manuallywith an FTP client, or automatically through the upload feature in the WordPress dashboard.


44/163

Below you will see both options. Please note that In order to use a child theme, you will also berequired 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 achild theme, you will need to transfer both the "genesis" theme folder as well as the childtheme folder to that directory.

3. Log in to your WordPress dashboard, and go to Appearance > Themes. There you will seescreenshots of the themes that are available for you to use. Click on the theme title (ortheme 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 touse a child theme, make sure you activate the child theme, and not the Genesis parenttheme.

Notes

1. If you are looking for a good FTP client, you can check out CuteFTP, Filezilla, Transmit or Cyberduck – make sure you find one that is compatible with eithera 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 Genesi s i n- post SEO Set t i ngs */

r emove_act i on( ' admi n_menu' , ' genesi s_add_i npost _seo_box'

) ;


45/163

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

/ ** Remove Genesi s Layout Set t i ngs * /

r emove_t heme_support ( ' genesi s- i npost - l ayout s' ) ;

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

/ ** Remove Genesi s menu l i nk */

r emove_t heme_suppor t ( ' genesi s- admi n-menu' ) ;

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

/ ** Remove Genesi s SEO Set t i ngs menu l i nk */

r emove_t heme_support ( ' genesi s- seo- set t i ngs- 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:


46/163

/ ** Unregi st er l ayout set t i ngs */

genesi s_unr egi st er _l ayout ( ' cont ent - si debar ' ) ;

genesi s_unr egi st er _l ayout ( ' si debar - cont ent '

) ;

genesi s_unr egi st er _l ayout ( ' cont ent - si debar - si debar '

) ;

genesi s_unr egi st er _l ayout ( ' si debar - si debar - cont ent ' ) ;

genesi s_unr egi st er _l ayout ( ' si debar - cont ent - si debar '

) ;

genesi s_unregi st er _l ayout ( ' f ul l - wi dt h- cont ent '

) ;

Author Box

How to Customize the Author Box

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

/ ** Modi f y the aut hor box ti t l e */

add_f i l t er ( ' genesi s_aut hor_box_t i t l e' , ' chi l d_aut hor _box_t i t l e'

) ;

f uncti on chi l d_aut hor _box_t i t l e( ) {

return

' About t he Aut hor' ;

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

/ ** Modi f y t he si ze of t he Gr avatar i n t he aut hor box */

add_f i l t er ( ' genesi s_aut hor _box_gravat ar_ si ze' , ' chi l d_aut hor_ box_gr avat ar _si ze' ) ;

f uncti on

chi l d_aut hor _box_gr avatar_si ze( $si ze) {

return

' 90' ;

}


47/163

Breadcrumbs

How to Customize the Breadcrumbs

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

add_f i l t er ( ' genesi s_home_crumb' , ' chi l d_amend_home_br eadcr umb_l i nk'

) ; / / Genesi s>= 1. 5

add_f i l t er ( ' genesi s_breadcr umb_homel i nk' , ' chi l d_amend_home_breadcr umb_l i nk'

) ;/ / Genesi s =< 1. 4. 1

/ **

* Amend Home br eadcr umb l i nk.

*

* @aut hor Gary J ones

*

* @param st r i ng $cr umb HTML mar kup f or Home br eadcr umb

* @r et urn st r i ng HTML mar kup

*/

f uncti on

chi l d_amend_home_br eadcrumb_l i nk( $cr umb

) {

return

pr eg_r epl ace(' / hr ef="[ "̂] *" / ' , ' hr ef ="ht t p: / / exampl e. com/ home"' , $cr umb) ;

}

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

/ ** Reposi t i on t he br eadcr umbs * /

r emove_act i on( ' genesi s_bef ore_l oop' , ' genesi s_do_br eadcr umbs' ) ;

add_act i on( ' genesi s_af t er _header' , ' genesi s_do_br eadcr umbs'

) ;

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

add_f i l t er ( ' genesi s_breadcrumb_args' , ' chi l d_breadcrumb_args'

) ;


48/163

/ **

* Amend br eadcr umb ar gument s.

*


*

* @par am arr ay $ar gs Def aul t breadcr umb argument s

* @r et urn ar r ay Amended breadcr umb ar gument s

*/

f uncti on

chi l d_breadcr umb_args( $ar gs

) {

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

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

$args[' l i st_sep' ] = ' , ' ; / / Genesi s 1. 5 and l at er

$args[ ' pr ef i x' ] = ' ' ;

$args[' suf f i x' ] = ' ' ;

$args[ ' hei r archi al _at t achment s' ] = t r ue; / / Genesi s 1. 5 and l at er

$args[ ' hei rarchi al _cat egor i es' ] = t rue; / / Genesi s 1. 5 and l at er

$args[ ' di spl ay' ] = t rue;

$args[' l abel s' ] [ ' pref i x' ] = ' You are here: ' ;

$args[' l abel s' ] [ ' aut hor' ] = ' Archi ves f or ' ;

$args[ ' l abel s' ] [ ' cat egor y' ] = ' Ar chi ves f or ' ; / / Genesi s 1. 6 and l at er

$args[ ' l abel s ' ][ ' t ag' ] = ' Archi ves f or ' ;

$args[' l abel s' ] [ ' dat e' ] = ' Archi ves f or ' ;

$args[' l abel s' ] [ ' search' ] = ' Sear ch f or ' ;

$args[ ' l abel s ' ][ ' t ax' ] = ' Archi ves f or ' ;

$args[' l abel s' ] [ ' post_t ype' ] = ' Archi ves f or ' ;

$args[ ' l abel s' ] [ ' 404' ] = ' Not f ound: ' ; / / Genesi s 1. 5 and l at er


49/163

return

$args;

}

Column Classes

How to Use Content Column Classes

In Genesis we have added the ability to create columns (column classes) within the contentarea. 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:

Thi s i s an exampl e of a Wor dPress post , you coul d edi t t hi st o put i nf or mati on about your sel f or

your si t e so readers know wher e you ar e comi ng f r om. You can cr eate as

many post s as

you l i ke i n or der t o share wi t h your r eaders what exact l yi s on your mi nd.

Thi s i s an exampl e of a WordPress post , you coul d edi t t hi s t o puti nf ormat i on about your sel f or

your si t e so readers know wher e you ar e comi ng f r om. Youcan cr eat e as many post s as you l i ke i n order t o share wi t h your r eaders what exact l y i son your mi nd.

3-Columns

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

Thi s i s an exampl e of a WordPr ess post , you coul d edi tt hi s t o put i nf ormat i on about your sel f or your si t e so r eaders know wher e you ar e comi ngf r om. You can creat e as many post s as you l i ke i n order t o share wi t h your r eaders whatexact l y i s on your mi nd.

Thi s i s an exampl e of a WordPress post , you coul d edi t t hi s t oput i nf ormat i on about your sel f or


many post s as




many post s as



50/163

4-Columns

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

Thi s i s an exampl e of a Wor dPress post , you coul d edi tt hi s t o put i nf ormat i on about your sel f or your si t e so r eaders know wher e you ar e comi ng

f r om. You can creat e as

many post s as

you l i ke i n order t o shar e wi t h your r eaders whatexact l y i s on your mi nd.

Thi s i s an exampl e of a WordPr ess post , you coul d edi t t hi s t oput i nf ormat i on about your sel f or your si t e so readers know wher e you ar e comi ng f r om. You can cr eate as

many post s as


Thi s i s an exampl e of a WordPr ess post , you coul d edi t t hi s t oput i nf ormat i on about your sel f or


many post s as


Thi s i s an exampl e of a WordPr ess post , you coul d edi t t hi s t o

put i nf ormat i on about your sel f or


many post s as


5-Columns

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

Thi s i s an exampl e of a WordPr ess post , you coul d edi t t hi st o put i nf or mati on about your sel f or

your si t e so readers know wher e you ar e comi ng f r om. You can cr eate as many post s as you l i ke i n or der t o share wi t h your r eaders what exact l yi s on your mi nd.

Thi s i s an exampl e of a WordPr ess post , you coul d edi t t hi s t oput i nf ormat i on about your sel f or your si t e so readers know wher e you ar e comi ng f r om. You can cr eate as many post s as you l i ke i n or der t o share wi t h your r eaders what exact l yi s on your mi nd.

Thi s i s an exampl e of a WordPr ess post , you coul d edi t t hi s t oput i nf ormat i on about your sel f or your si t e so readers know wher e you ar e comi ng f r om. You can cr eate as many post s as you l i ke i n or der t o share wi t h your r eaders what exact l yi s on your mi nd.

Thi s i s an exampl e of a WordPr ess post , you coul d edi t t hi s t o



many post s as


Thi s i s an exampl e of a WordPr ess post , you coul d edi t t hi s t oput i nf ormat i on about your sel f or


many post s as



51/163

6-Columns

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

Thi s i s an exampl e of a WordPr ess post , you coul d edi tt hi s t o put i nf ormat i on about your sel f or your si t e so r eaders know wher e you ar e comi ng

f r om. You can creat e as

many post s as

you l i ke i n order t o share wi t h your r eaders whatexact l y i s on your mi nd.

Thi s i s an exampl e of a WordPress post , you coul d edi t t hi s t oput i nf ormat i on about your sel f or your si t e so readers know wher e you ar e comi ng f r om. You can cr eate as

many post s as




many post s as


Thi s i s an exampl e of a WordPress post , you coul d edi t t hi s t o



many post s as




many post s as



your si t e so readers know wher e you ar e comi ng f r om. You can cr eate as many post s as you l i ke i n or der t o share wi t h your r eaders what exact l yi s on your mi nd.

Required CSS Code

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

/ * Col umn Cl asses

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

. f i ve- s i xt hs ,

. f our - f i f t hs,

. f our- s i xt hs,


52/163

. one- f i f th,

. one- f ourt h,

. one- hal f ,

. one- si xt h,

. one- t hi rd,

. three- f i f ths ,

. t hr ee- f ourt hs,

. t hr ee- si xt hs,

. two- f i f ths ,

. t wo- f ourt hs,

. t wo- si xt hs,

. t wo- t hi rds {

f l oat : l ef t ;

margi n: 0 0 20px;

paddi ng- l ef t : 3%;

}

. one- hal f ,

. t hr ee- si xt hs,

. t wo- f ourt hs {

wi dth: 48%;

}

. one- t hi rd,

. t wo- si xt hs {

wi dth: 31%;


53/163

}

. f our- s i xt hs,

. t wo- t hi rds {

wi dth: 65%;

}

. one- f ourt h {

wi dth: 22. 5%;

}

. t hr ee- f ourt hs {

wi dth: 73. 5%;

}

. one- f i f th {

wi dth: 17. 4%;

}

. two- f i f ths {

wi dth: 37. 8%;

}

. three- f i f ths {

wi dth: 58. 2%;

}


54/163

. f our - f i f t hs {

wi dth: 78. 6%;

}

. one- si xt h {

wi dth: 14%;

}

. f i ve- s i xt hs {

wi dth: 82%;

}

. f i r st {

cl ear: bot h;

paddi ng- l ef t : 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:/ ** Modi f y t he comment l i nk t ext */

add_f i l t er ( ' genesi s_post _met a' , ' post _met a_f i l t er'

) ;

f uncti on

post _met a_f i l t er ( $post _meta

) {


55/163

return

' [ post _comment s zer o="Leave a Comment " one="1 Comment " mor e="% Comments"] ' ;

}

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

/ ** Modi f y comment s header t ext i n comment s */

add_f i l t er ( ' genesi s_t i t l e_comment s' , ' cust om_genesi s_t i t l e_comment s' ) ;

f uncti on

cust om_genesi s_t i t l e_comment s( ) {

$t i t l e

= ' Di scussi on' ;

return $t i t l e;

}

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

/ ** Modi f y t r ackbacks header t ext i n comment s * /

add_f i l t er ( ' genesi s_ti t l e_pi ngs' , ' custom_ti t l e_pi ngs'

) ;

f uncti on

cust om_t i t l e_pi ngs( ) {

echo ' Pi ngs' ;

}

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

/ ** Modi f y t he speak your mi nd t ext */

add_f i l t er( ' genesi s_comment _f orm_ar gs' , ' cust om_comment _f orm_args'

) ;

f uncti on

cust om_comment _f orm_args( $ar gs) {

$args[ ' t i t l e_repl y' ] = ' Leave a Comment ' ;

return

$args;


56/163

}

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

modify.

/ ** Modi f y t he comment says t ext */

add_f i l t er( ' comment _aut hor_ says_t ext ' , ' cust om_comment _aut hor_ says_t ext ' ) ;

f uncti on

cust om_comment _aut hor_says_t ext( ) {

return

' commented' ;

}

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

/ ** Add a comment pol i cy box */

add_act i on( ' genesi s_af t er _comment s' , ' si ngl e_post _comment _pol i cy'

) ;

f uncti on si ngl e_post_comment _pol i cy( ) {

i f

( i s_s i ngl e( ) && ! i s_user_ l ogged_i n( ) && comment s_open( ) ) {

?>

Comment Pol i cy: Your words areyour own, so be ni ce and

hel pf ul i f

you can. Pl ease, onl y use

your r eal name and

l i mi t t heamount of l i nks submi t t ed i n your comment . We accept cl ean XHTML i n comment s, but don' toverdo i t pl ease.


57/163

Comment Form

How To Remove the Aria-Required Attribute

Pre-Code Advisory NoteWe 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 ar i a- r equi red attribute is one of thosethings where it’s fine for it not to be in current specifications but still have it on your site. It’scurrently 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”. Onbrowsers 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 thisattribute included within the comment form for the comment area itself, and on the name andemail inputs if the WordPress option is selected. This is because accessibility should alwaystrump valid code. Valid code is pointless if your visitors can’t access the content and interactwith your site successfully and for that reason, you should leave the ari a- requi r ed attributeintact.

The PHP Code

If you still want to remove ari a- requi r ed attribute to satisfy your validation needs, then addthe following to the end of your child theme’s f unct i ons. php file, just before anyclosing ?>you may have.

add_f i l t er ( ' genesi s_comment _f or m_args' , ' cust om_r emove_ar i a_r equi r ed' ) ;

/ **

* Remove WAI - Ar i a ari a- r equi r ed at t r i butes f r omcomment f orm.

*


* @l i nk ht t p: / / dev. st udi opr ess. com/ r emove- ari a-r equi r ed- at t r i but e. ht m

*

* @param ar r ay $ar gs Comment f or m ar guments

* @r et urn arr ay Amended comment f or m ar gument s


58/163

*/

f uncti on cust om_r emove_ar i a_r equi r ed( $ar gs ) {

$ar gs

= str _repl ace( ' ar i a- requi red="t rue"' , ' ' , $args

) ;

$args[f i el ds] = str _repl ace( ' ar i a- requi red="t rue" ' , ' ' , $args[f i el ds] ) ;

$ar gs[ f i el ds ] = st r _ r epl ace( " ar i a- r equi r e =' t r ue' " , ' ' , $ar gs[ i e s] ; / / On y nee e

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 f ield in our commentform so that the value entered by the Commenter will be saved to the database.

Add the following code to the functions.phpafter r equi r e_once( TEMPLATEPATH. ' / l i b/ i ni t . php' ) ; to create an additional comment form field:

add_act i on ( ' comment _post ' , ' add_comment _f i el ds' , 1) ;

f uncti on add_meta_set t i ngs( $comment _i d) {

add_comment _meta( $comment _i d, ' f avor i t e_col or ' , $_POST[ ' f avor i t e_col or' ] , t r ue) ;

}

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

/ / adds ext r a f i el ds t o t he comment f orm.

add_f i l t er ( ' genesi s_comment _f orm_args' , ' my_f i el ds' ) ;

f uncti on

my_f i el ds( $args) {

$args[ ' f i el ds' ] [ ' col or ' ] = '

' .

'


59/163

/ >'

.

' ' . __( ' Favor i te Col or ', ' chi l d' ) . ' ' .

' ' ;

return

$args;

}

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

#aut hor , #emai l , #ur l

{

background: #F7F7F7

! i mport ant ;

wi dt h: 250px;

col or : #333333;

f ont - f ami l y: Ar i al , Tahoma, Verdana;


paddi ng: 3px

0

3px

3px;

margi n: 5px

5px

0

0;

border : 1px

s ol i d

#E6E6E6;

}

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

#aut hor, #emai l , #ur l , #f avori t e_col or {

background: #F7F7F7 ! i mport ant ;

wi dt h: 250px;

col or : #333333;

f ont - f ami l y: Ar i al , Tahoma, Verdana;



60/163

paddi ng: 3px

0

3px

3px;

margi n: 5px 5px 0 0;

border : 1px

s ol i d

#E6E6E6;

}

How to Change The Trackback Format

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

The PHP CodeOpen up the f unct i ons. php file in your child theme and add the following code. The codeshould be entered at the end of the file, just before the closing ?>if there is one.

add_f i l t er( ' genesi s_pi ng_ l i st_args' , ' chi l d_pi ng_ l i st_args'

) ;

/ **

* Take t he exi st i ng ar gument s, and one that speci f i es a cust om cal l back.

*


* @l i nk ht t p: / / dev. st udi opr ess. com/ change- t r ackback- f ormat . ht m

*

* Tap i nt o t he l i st of ar gument s appl i ed at genesi s/ l i b/ f unct i ons/ comment s. php: 136

* @param arr ay $args

* @r eturn t ype

*/

f uncti on chi l d_pi ng_l i st _ar gs( $args ) {

$args[ ' cal l back' ] = ' chi l d_ l i s t_pi ngs ' ;

return

$args;

Documents

Tutorial Genesis 1.x