Академический Документы
Профессиональный Документы
Культура Документы
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 dont 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.
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 sites 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, weve chosen to simplify things and just give the child theme its 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 dont 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 themes 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. Youll 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.
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, youll see that it occurs before the footer.
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 themes 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 well 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 youll 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 themes 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.
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.
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
Template: genesis
Template Version: 1.7.1
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 thats what weve 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-inpostmetaboxes.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.
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.
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)
Rule #2
The Child Theme settings page must be added as a sub-menu of the main Genesis menu. Dont
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]
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
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 );
#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 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;
}
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;
}
The heavy lifting of custom header is built into Genesis and needs to be activated on the child
theme level. Inside your child themes 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 **/
This feature is really simple to use and can be implemented by following these steps:
.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;
}
/** Remove the post meta function for front page only **/
remove_action( 'genesis_after_post_content', 'genesis_post_meta' );
genesis();
Filter Reference
Below is a list of filters that have been built into the Genesis Framework:
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.
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
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.
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' => array( 'align' => array(), 'class' => array(), 'style' => array() ),
'span' => array( 'align' => array(), 'class' => array(), 'style' => array() ),
'div' => array( 'align' => array(), 'class' => array(), 'style' => array() ),
//
//
//
Hook Reference
Below is a list of hooks that have been built into the Genesis Framework:
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 #sidebaralt 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.
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 .entrycontent 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.
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.
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: "]
[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:
Example:
[post_author before="<em>" after="</em>"]
[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>"]
[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:
Example:
[post_comments]
This function produces the comment link. Here is a list of attributes for this short code:
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:
Example:
[post_tags sep=", " before="Tags: "]
[post_categories]
This function produces the category link list. Here is a list of attributes for this short code:
Example:
[post_categories sep=", " before="Posted Under: "]
[post_edit]
This function produces the edit post link for logged in users. Here is a list of attributes for this
short code:
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:
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:
Example:
[footer_backtotop text="Top" href="#content"]
[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: 20052011
[footer_childtheme_link]
This function produces the child theme link. Here is a list of attributes for this short code:
Example:
[footer_childtheme_link before ="·"]
[footer_genesis_link]
This function produces the genesis theme link. Here is a list of attributes for this short code:
Example:
[footer_genesis_link]
[footer_studiopress_link]
This function produces the StudioPress link. Here is a list of attributes for this short code:
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:
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:
Example:
[footer_loginout redirect="http://www.studiopress.com/features/genesis"]
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 dont have to call your developer. All updates are thoroughly tested, so youre 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.
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.
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 isnt advisable.
HTML
You will need to learn the basics of html or you wont 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:
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
IfElse
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:
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 its 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 doesnt
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 sites content and that you would like to
expedite your websites 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 Use the XML File to Import the Demo Sites Content
1.
2.
3.
4.
5.
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.
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:
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']
$args['prefix']
= '<div class="breadcrumb">';
$args['suffix']
= '</div>';
$args['display']
= true;
$args['labels']['prefix']
$args['labels']['author']
$args['labels']['category']
$args['labels']['tag']
$args['labels']['date']
$args['labels']['search']
$args['labels']['tax']
$args['labels']['post_type']
$args['labels']['404']
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>
.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 themes functions.php file:
/** Modify the comment link text */
add_filter( 'genesis_post_meta', 'post_meta_filter' );
function post_meta_filter( $post_meta ) {
To customize the Comments headline text, simply place the code below to your child themes
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 themes
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 themes
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 themes 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 themes 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 its 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 its fine for it not to be in current specifications but still have it on your site. Its
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 its not supported, it has no negative effect.
Its 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 cant access the content and interact
with your site successfully and for that reason, you should leave the aria-required attribute
intact.
*/
function custom_remove_aria_required( $args ) {
$args = str_replace( ' aria-required="true"', '', $args );
$args[fields] = str_replace( ' aria-required="true"', '', $args[fields] );
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;
/**
* 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
}
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
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>
/* 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!
// 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 well 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.
// 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 );
);
// Merge the standard query for this page, and our preferred loop arguments
genesis_grid_loop( array_merge( (array) $query_args, $grid_args ) );
Theres 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 didnt need to include this, as the home page was just showing all
posts, in the default date order. Now weve enabled the grid loop on other archive pages, this is
needed.
The amendment to that is when youre 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 well 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 its 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 {
// Alter this number to change the number of columns - used to add class names
$columns = 3;
By the time this function is run, were 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 weve
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 (well get to that
shortly), its 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 were outputting a feature post. For grid posts, there are two classes being
added. The first adds a numbered class, indicating which column were 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 youll need to adjust the width percentages, else
youll either have noticeable gaps, or the last post in a row wrapping around to below the others
in the same row.
Putting it Altogether
Heres the final PHP code to drop in to your functions.php file (and dont 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() {
// 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() {
// 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 );
// 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;
Footer
How to Add Footer Widgets
If you would like to add footer widgets to the sample child theme, follow the instructions below.
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 );
#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 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-1 {
float: left;
margin: 0 20px 0 0;
width: 295px;
}
.footer-widgets-2 {
float: left;
width: 290px;
}
.footer-widgets-3 {
float: right;
width: 295px;
}
To customize the Credits, add this to your child themes functions.php file:
/** Customize the credits */
add_filter('genesis_footer_creds_text', 'custom_footer_creds_text');
function custom_footer_creds_text($creds) {
$creds = 'Copyright © · <a href="http://mydomain.com">My Custom Link</a>
· 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 themes 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>© Copyright 2011 <a href="http://mydomain.com/">My Domain</a> ·
All Rights Reserved · Powered by <a href="http://wordpress.org/">WordPress</a>
· <a href="http://mydomain.com/wp-admin">Admin</a></p>
<?php
}
Using this method will remove some markup thats within the footer this is the Return to Top
Section and the Credit section. Youll 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 wouldnt 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 sites 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 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.
Heres an example of what Chris Brograns 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.
With that said, Ive 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.
#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;
}
// 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' );
/**
* 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(
// Related accounts that will be suggested to follow once tweet has been shared
'related' => '',
// Optionally use this if you have custom shortlinks set up. Uncomment to use.
//$query_string_parameters['url'] = wp_get_shortlink();
/**
* 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);
}
If JavaScript isnt 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 youre 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.
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 arent 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.
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.
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.
// 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;
Note: This shortcode was included in Genesis 1.5. For those using previous versions, we make
it available here as a tutorial.
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:
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 wont 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.
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, lets 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) . ' …';
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) . ' …';
return $title;
}
The code above should be placed in your child theme functions.php file anywhere after:
require_once(TEMPLATEPATH.'/lib/init.php');
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, its now in the middle column of the page.
Before trying this, always check beforehand, if what youre 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.
Heres 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' );
$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.
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
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 themes style.css file and style as desired.
.print {
You can use the free image editor, like GIMP, to save the 1616 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
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 youll need to clear your browsers
cache before the new favicon will be visible to you.
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() ) {
else {
To remove the page title from this template add a line to the Page Template (page_mytemplate.php) file.
<?php
genesis();
The code above should be placed in the functions.php child theme file anywhere after this:
require_once(TEMPLATEPATH.'/lib/init.php');
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
/**
* 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' );
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.
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 its assigned to, the content type, and
any tags assigned to it are already added by default, so you can target them with CSS
immediately.
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.
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-towordpress%/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/wpcontent/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.
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 dont 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 wpcontent 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.
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 /%pathto-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-namedisabled. 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.
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-towordpress%/wp-login.php on line 337
The Solution:
You will need to access your site via FTP. (Getting repetitive isnt 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.
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.
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>';
}
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 }
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;
}
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 wouldnt be Genesis if there wasnt a solution for that. Heres 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 Themes functions.php:
//Child Theme Language override
define('GENESIS_LANGUAGES_DIR', STYLESHEETPATH.'/languages');
define('GENESIS_LANGUAGES_URL', STYLESHEETPATH.'/languages');
<?php
Thats 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.
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 couldnt 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
(dont 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.
Notice the class on the body element. It has home, blog, logged-in, header-image, and contentsidebar 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;
}
This would make the header 120px tall on the home page and show the home-logo.png instead
of logo.png. Notice that I dont 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.
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.
function custom_noposts_text() {
echo 'Sorry, but nothing matched your search criteria.';
}
The code above should be placed in the child themes functions.php file anywhere after the
following line:
require_once(TEMPLATEPATH.'/lib/init.php');
The code above should be placed in the child themes functions.php file anywhere after the
following line:
require_once(TEMPLATEPATH.'/lib/init.php');
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:
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.
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):
?>
That said, many prefer the built in page and category navigation so they wont 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) {
The great thing with this method is you are able to change any of the defaults for pages or
categories with this as well.
Genesis comes with a feature called Primary Navigation Extras, which lets you stick the
following at the end of the primary navigation: Date, RSS Feed, Search, or Twitter link. But for a
project Im working on now, I wanted something more custom.
This tutorial will show you how to customize the navigation area. Ill 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 navigations output itself.
Im going to walk you through the code, so skip to the end if you just want the functioning code.
This code isnt really doing anything yet. Its 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 (Im only using 1).
In the first line Ive created a variable called $follow which will contain the code Im 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 Ill 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;
Ive turned the static RSS and Twitter text into links and images. Heres what each one means:
get_bloginfo('rss_url'); This is the link to the RSS feed. The reason I didnt
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 themes
directory. I have an image for the RSS feed and Twitter uploaded in the images directory
of the child theme.
esc_url() Any time youre using data created by a person, you want to escape it.
Escaping it ensures that untrusted text cant 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.
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. Im 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');
200,
animation:
dropShadows: true,
speed:
} );
}
);
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; itll fail in Internet Explorer if you do.
We use the same check that the core does, to ensure were 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.
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 themes functions.php file
}
return $menu;
}
The code above should be placed in the child themes functions.php file anywhere after the
following line:
require_once(TEMPLATEPATH.'/lib/init.php');
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;
}
-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;
}
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.
The code above should be placed in the child themes functions.php file anywhere after the
following line:
require_once(TEMPLATEPATH.'/lib/init.php');
The code above should be placed in the child themes functions.php file anywhere after the
following line:
require_once(TEMPLATEPATH.'/lib/init.php');
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.
*
if ( has_excerpt() ) {
The code above should be placed in the child themes functions.php file anywhere after the
following line:
require_once(TEMPLATEPATH.'/lib/init.php');
Post Info
How to Customize the Post Info Function
You may notice that the Genesis Framework outputs a line just below the posts 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.
To customize the post info function, open your child themes 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 themes 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 posts 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.
To customize the post meta function, open your child themes functions.php file, enter this code:
The code above will replace the default output from the Genesis parent theme, allowing you to
customize it as you wish from the child themes 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 */