Genesis Framework

Web Design General
#1

Hi,
I am trying to work on the templates, similar to what we did in web design classes, but the framework seems very different to a regular theme, I don’t see all the templates in the theme and some of them look a little different…
Anyone have experience with it at all?
thanks

#2

Since Genesis is a framework, not a theme, it does work differently. You work with hooks/functions to adjust the templates. You do sometimes use custom templates, but depending on what you are trying to do, you may not need to.

If you don’t like coding, start out using the Genesis Simple Hooks plugin, which gives you an interface that hooks into the hooks, without your needing to use functions. (You’ll still need html/css.)

For templates, you can start out putting in a blank php file named appropriately (ie, page.php or front-page.php). Put the opening php tag and add “genesis();” to the bottom. That makes it work like an ordinary Genesis page.

Next, you can start adjusting. So if you want to force a particular layout for that page (full-width/etc), you add the line of code Studiopress provides you with for that, to the template. Or you can use a function to remove the loop and write your own, or, you can use a function to add content before/after the existing loop, in various places. Look at this visual hook guide to get started.

I realize this is a lot of information to dump on you! There are so many Genesis tutorials and resources available online. I would also be happy to upload a few simple Genesis templates with some explanations if that’s helpful.

#3

That would be great if you can!
thanks

#4

Ok – the attached file is a page.php from Genesis. You’ll see the genesis warnings at the top (really could be removed) and the genesis(); at the bottom, which is important to get the header/footer/format.

This version has a few lines on it that you should recognize as the last line of a function, ie, where it hooks into the content. If you read the code, you’ll see that it’s unhooking the title (and surrounding, corresponding code like <header> tags) from within the content and placing it after the header, which is above the content.

This gives you a full-width title as your default page layout. Everything else is the same.

You can copy this idea with any other snippets you’d want (from Studiopress or tutorials, etc) or put in functions like adding a CTA at the end of all pages, just on this template.

#5

Oh whoops, can’t upload php files. Here’s the code:

<?php 
/**
 * Genesis Framework.
 *
 * WARNING: This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances.
 * Please do all modifications in the form of a child theme.
 *
 * @package Genesis\Templates
 * @author  StudioPress
 * @license GPL-2.0+
 * @link    http://my.studiopress.com/themes/genesis/
 */

// This file handles pages, but only exists for the sake of child theme forward compatibility.
 
 
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );

add_action( 'genesis_after_header', 'genesis_entry_header_markup_open', 5 );
add_action( 'genesis_after_header', 'genesis_do_post_title' );
add_action( 'genesis_after_header', 'genesis_entry_header_markup_close', 15 );

genesis();
#6

Another example. This adds a template that takes the featured image and uses it as the background of the title. Everything else is the same:

<?php
/**
 * Template name: Image header 
 */

// Add page header 
function themeprefix_title_img_bg() { 
    $output = false;
    $image = get_post_thumbnail_id();
    if( $image ) {

	remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
	remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
	remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );

        
        $image = wp_get_attachment_image_src( $image, 'title_bg' );        
        $title = the_title( '<h1 class="entry-title template-img">', '</h1>', false );                
        
        $output .= '<header class="entry-header template-img" 
        style="background-image: url(' . $image[0] . '); background-size: cover;">';        
        $output .= $title;        
        $output .= '</header>';    
   }

 if( $output ) 
      echo $output;
}
add_action( 'genesis_after_header', 'themeprefix_title_img_bg', 8 );

genesis();
#7

And if you want to change the loop, you can do it like this:

<?php
/**

 * Template name: ...

 */

add_filter ( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); 

remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'themeprefix_template_loop' ); 

function themeprefix_template_loop() {
	?>

	Custom content goes here...
        This can be html and include php tags, like <?php the_title(); ?> or custom fields.
	
	<?php
}

genesis();
#8

You can check Genesis snippets for lots of quick, easy changes. Googling specific things you want to do will get you lots more.

#9

Thanks so much, was a real help!!