Genesis Classes Coming in the Fall to WP Classroom

Genesis Tutorials and WP Classroom are teaming up to bring to you – Genesis Classes.

WP Classroom is an online WordPress training site where you can learn WordPress from the ground up. Genesis Classes wont start till early September, but I’m currently putting together what the classes will consist of and looking to you for what you want to learn about the Genesis Framework and get out of these classes. May it be how to set up and use genesis as a blogger and use some the child themes available from StudioPress and their options, to building your own child theme to ready for the just announced StudioPress Theme Marketplace or your own use.

Help shape the classes

Always wanted to learn how to use the genesis loop function or genesis grid loop function or how to properly set up a custom template to be used within Genesis? Add your suggestions down in the comments section below. I want the content of these classes to be powered by you so you get the most out of them.

From these comments and questions I have received over the months of running the site I will be creating several classes at different levels. For the developer and advance classes, participants will get access to example files and even free child themes(basic) to help them get started. For the blogging and beginner classes, you’ll learn all about the available genesis child themes and options to set up the perfect blog/site for your use. Classes will be recorded so if you miss out don’t worry, you’ll be able purchase a recording of the class and receive any files the participants may have gotten. Depending how these classes go we may grow the Genesis learning experience offering several classes more focused on specific topics within the Genesis Theme Framework so make sure to comment below with anything you want to learn.

Also, to those wondering what’s the status of the site and my plugins I have been working on a Version 2.0 of the Genesis Visual Hook Guide (aka Genesis Developer’s Handbook) as well as a library of Genesis functions which I hope to have all packaged up and ready in a month or so as well asa major update to Genesis Post Teasers and an update to the Genesis Favicon uploader to help smooth out some issues some user have experienced with not being able to upload a favicon through the uploader. Also, I hope to add many more tutorials through prepping for these classes. I am a full time Designer at WebDevStudios and this is all a side project of mine cause I love the Genesis Community, but hoping to give back much more in the coming months; theses classes being one of the ways.

Hope to see you in Class ;) .

Also make sure to check out WP Classroom for general WordPress training and courses!

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

Genesis Structural Wraps & Creating a Full Width Genesis Child Theme

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

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

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

Short link:

How to Filter the Genesis Post Navigation Text

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

Older / Newer Post Navigation Filter

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

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

Previous / Next Post Navigation Filter

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

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

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

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

Understanding Genesis Layout Options

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

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

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

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

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

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

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

Unregistering Genesis Layout Options

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

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

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

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

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

Registering custom layouts for genesis child themes

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

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

How to create a Custom Template In Genesis

This has to be one my favorite things when building a child theme with the genesis framework. The process can not be any simpler.

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

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

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

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

<?php
remove_action('genesis_loop', 'genesis_do_loop');
add_action('genesis_loop', 'custom_loop');
function custom_loop() {

    global $paged;
    $args = array('post_type' => 'PostType');

    genesis_custom_loop( $args );

}
?>

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

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

<?php genesis(); ?>

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

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

Though I know this method is not for everyone, I have included a template file that is the actual structure containing the main genesis hooks. You may also just create a template using none of the genesis hooks building it much like you would for any other theme.

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

I soon will be creating a section on this site to include some custom templates to be used in anyone’s genesis child theme. For now here is the template used in the example and the alternate version.

custom-template.php
custom-template-alt.php

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

How to Define Genesis default options

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

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

It sure is!

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

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

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

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

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

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

Define Default Options

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

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

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

Remove Access to Genesis Admin Menu

remove_theme_support('genesis-admin-menu');

Removing per Post/Page Layout Options

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

remove_theme_support('genesis-inpost-layouts');

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

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

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

?>
Short link: http://goo.gl/ZVkWv

How to Filter the Byline in Genesis

By default genesis post info includes the date the article was posted, an author link and comments. However every blog may have a different need of exactly what they want displayed here.

Some may not even want any of this information displayed. To remove the byline in genesis add the following code to your child’s theme functions.php

remove_action('genesis_before_post_content', 'genesis_post_info');

However, if you do want want a byline on your site but just want to change exactly what is displayed or in what order it shown, there is a filter available.

add_filter('genesis_post_info', 'custom_post_info');
function custom_post_info($post_info) {
     $post_info =  __('By', 'genesis') . ' [post_author_posts_link] ' . __('on', 'genesis') . ' [post_date] [post_comments] [post_edit]';
     return $post_info;
}

The code above will change the output from the default byline:

August 7, 2010 by 3 Comments

To:

By on August 7, 2010 3 Comments

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

How to Filter the Genesis “Return to Top of Page”

“Back to top” links, though minor, are a great added feature to your site for anyone browsing. With a click, the visitor is returned to the top of the page, saving the need to use the scroll bar or mouse wheel (Your users will thank you for this on long posts). With Genesis, the default text for this link is “Return to Top of Page” which is fine, but Genesis is all about the ability to customize and truly make it your site. To change the text for the “back to top” link, we have this simple filter. Just drop the code below into functions.php and you are done.


add_filter('genesis_footer_backtotop_text', 'custom_footer_backtotop_text');
function custom_footer_backtotop_text($backtotop) {
    $backtotop = '[footer_backtotop text="Top"]';
    return $backtotop;
}

This example will change the text to just simply say “Top” to have it say what you want change Top in text="Top".

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

How to Filter the Genesis Footer Creds

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

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

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

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

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

The code above will output

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

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

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

Genesis Footer

Website footers have become so much more than the end of the scroll for a site. Once a place to only find some credit to the designer or copyright/trademarks of the blog, they have now evolved into their own significant part of the site. They contain anything from contact information and twitter feeds, to contact forms and any extra information or functionality that really increases the usability of a site.

The default genesis child theme has a “go to top” link and a credit section, both of which are filterable. If you are looking to just change the text of either, you may want to check out these other tutorials.

Changing “Return to Top of the Page” text in the footer.
Giving Credit Where Credit Is Due

If not, continue on.

[Read more...]

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