Menu

How to Add a Logo to the Header

One question I get asked often is how to add a logo to the Genesis header. To add an image logo to your header you ideally would want access to sever files through FTP. However, it is entirely possibly to do with without FTP access by using the media library and the admin file editor in WordPress, though I do not recommend tis way.

Step 1: Create your logo

I would guess most of you have already went ahead and completed this step even before reading this tutorial, but you never know. Anyways, make sure to have your logo handy and sized appropriately. In the default child theme the title area is 350px x 90px, but feel free to create the logo as big or little as you want it.

Step 2: Upload your logo

Have your favorite FTP tool? Open it up and navigate to your images folder in your child theme. Upload your logo to this directory and make sure to remember the name of the file.

Filezilla or Cyberduck are good FTP browsing apps.

Step 3: Update Settings

To ready the area for the logo make sure to update Genesis header settings to ‘Image logo’. This adds a class to the body of ‘.header-image’ to allow us to style the title area specifically for use with an image logo. If you don’t see this setting it is possible you are using a header background, and this option is unavailable (In the future I may update or write a new post to how to add a logo with a header background).

Step 4: Modify style.css

This step may vary depending on your child theme, but the idea is the same.
In your child theme’s style.css you would want to find the lines below or similar.


/* Image Header - Partial Width
------------------------------------------------------------ */

.header-image #title-area,
.header-image #title,
.header-image #title a {
	display: block;
	float: left;
	height: 90px;
	overflow: hidden;
	padding: 0;
	text-indent: -9999px;
	width: 350px;
}

.header-image #description {
	display: block;
	overflow: hidden;
}

If you can’t find anything similar in your child theme feel free to add it yourself. The CSS above is actually taking the text from the site title area and pushing it off-screen. There are also many ways of accomplishing this, but for this tutorials lets just use what we have. So, long as this CSS now is in your theme, where you saw your header text before it will be blank. To get your logo to appear we need to set the background of this area to the logo you uploaded in step 2. To do this add the lines below making sure to ‘update your-logo-filename.png’ yo your filename.

.header-image #title a {
	background: url( 'images/your-logo-filename.png' ) no-repeat;
}

If your logo is bigger than the default size make sure to tweak the height and width of your title area.
Note: If adjusting width wider than the 350px default you may also need to update ‘#header .widget-area’.

Step 5: Cheer in Success (or slam things in frustration)

Taking a look at your site now you should see your logo in all magnificent glory. If not don’t panic or be frustrated. Make sure to go over the past steps, and that the path to your logo is correct. If it needs some minor tweaking to fit in the area inspect it with firebug or your browser’s built-in inspector and play with it till perfect.

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

Say Hello to the Genesis Visual Hook Guide v2.5

The Genesis Visual Hook Guide, developed for myself, released to the public, originally was just a sample functions.php file I used to test snippets for Genesis, however it quickly grew to more than that.

At first, the Hook Guide was just a series of images that I snapped of an early version of what it is now. These images quickly became a useful tool to many of the developers just learning and figuring out Genesis and all of its hooks.

Following the images I shared, I created a single template on this site, that outputted the hooks, and added the ability to see the main wrapping divs visually, as well as filterable text. Being a single template file however, it was limited as you could only view the hooks in the hacked up page template I created.

During a clean up of code I ported the main features of the template to a plugin that can be installed on any Genesis Theme site. This allows the hooks and filters to be viewed in the your theme may it be the sample child theme, Lifestyle, Prose, or a custom theme build.

So today, I want to welcome version 2.5 of the Visual Hook Guide as a part of the revamp of genesistutorials.com that will be happening over the next few weeks (more info on this to come soon). I have built the visual hook guide to be a full functional site, with many new features and updates to it coming down the road. The guide has also been update to the latest version of the Genesis sample child theme, so, yes, it is responsive. Go check it out, click around. Some features of it may be buggy for the next few days, it was originally built as only a single template, but please let me know of any issues you come across and I’ll try my best to quickly fix them.

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

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/w2t8g

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 is simple.

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

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

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

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

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

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

}
?>

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

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

<?php genesis(); ?>

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

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

Recommended way: custom-template.php

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

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

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

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 22 Comments

To:

By on August 7, 2010 22 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