Static Page, slider and Quote on Homepage Wordpress

With this tweak it is possible to show the slider and the quote on your homepage using a static page in fontpage settings.
For this purpose I created a new homepage template
(home2.php), which you can use to design a static homepage with slider and quote; just choose "Homepage Version 2" as the template for your new homepage.

How to?

1. copy the pink code below to a new text-file, save it and rename it to home2.php
2. copy home2.php using ftp into your themes/chameleon folder of your Wordpress installation) if you're using a child theme copy it into your child theme's folder
3. Create a new page, name it "Static Homepage" (the name does not matter since it will not be shown on the homepage), design it and for the page template select "Homepage Version 2" in the drop-down menu
4. In Chameleon options select the images for your slider and fill in the text for the quote which actually will be used as the main header (h1) of the homepage
5. In Wordpress - Settings - Reading select your new page as a static frontpage
6. Add the css-code (at the end of this post) to your custom-css field in the Chameleon options panel or to your child theme's style.css.

<?php
/*
Template Name: Homepage Version 2
*/
?>
<?php get_header(); ?>

<?php if ( get_option('chameleon_featured') == 'on' ) get_template_part('includes/featured'); ?>

<?php if ( get_option('chameleon_quote') == 'on' ) { ?>
    <div id="fronthead">
        <div id="fronthead-inner">
        <?php if ( get_option('chameleon_quote_one') <> '' ) { ?>
            <h1><?php echo (get_option('chameleon_quote_one')); ?></h1>
        <?php } ?>
        <?php if ( get_option('chameleon_quote_two') <> '' ) { ?>
            <p><?php echo (get_option('chameleon_quote_two')); ?></p>
        <?php } ?>
        </div>
    </div> <!-- end .category-name -->
<?php } ?>

<div id="content" class="clearfix">
    <div id="left-area">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <div class="entry post clearfix">
            <?php if (get_option('chameleon_page_thumbnails') == 'on') { ?>
                <?php
                    $thumb = '';
                    $width = 186;
                    $height = 186;
                    $classtext = 'post-thumb';
                    $titletext = get_the_title();
                    $thumbnail = get_thumbnail($width,$height,$classtext,$titletext,$titletext,false,'Entry');
                    $thumb = $thumbnail["thumb"];
                ?>

                <?php if($thumb <> '') { ?>
                    <div class="post-thumbnail">
                        <?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, $classtext); ?>
                        <span class="post-overlay"></span>
                    </div>     <!-- end .post-thumbnail -->
                <?php } ?>
            <?php } ?>

            <?php the_content(); ?>
            <?php wp_link_pages(array('before' => '<p><strong>'.esc_html__('Pages','Chameleon').':</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
            <?php edit_post_link(esc_html__('Edit this page','Chameleon')); ?>
        </div> <!-- end .entry -->

        <?php if (get_option('chameleon_show_pagescomments') == 'on') comments_template('', true); ?>
    <?php endwhile; endif; ?>
    </div>     <!-- end #left-area -->

    <?php get_sidebar(); ?>
</div> <!-- end #content -->

<?php get_footer(); ?>

css-code to add:  

#fronthead {text-align: left; width: 890px; margin: 0 auto; padding-top:10px; background: url(images/top-category-bg.png) no-repeat;}
#fronthead-inner {background: url(images/bottom-category-bg.png) no-repeat bottom left; padding-bottom: 0px; }

Continue Reading

Custom Page Template in Genesis Child Theme - Page Layouts

Page template is one which are created in WordPress template when you publish a new page there is an option on the left hand side to select the page template. Few page templates are applied by default. for example if you create an home.php it will automatically be applied when Home Page of the site is loaded. similarly single.php is applied when a page is viewed. in this tutorial we will create a Home Page Template for our Genesis Child theme.

HOW TO CREATE GENESIS PAGE TEMPLATE :

Creating a page template for the Genesis Child Theme is same as we create in other frameworks or custom WordPress Template but a little few changes to call the header,footer and footer widgets.

Creating Custom Page template :

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

you can see a new page template has been created. all the code that we will enter in this template will be applied on the page which will use this template.

at the end we will call a function from Genesis to call the rest of the page elements (title, header, menu, footer widgets, footer)

<?php genesis(); ?>
Complete code :

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

<!-- Start Custom Loop -->

<!-- End Custom Loop -->

<?php genesis(); ?>


Force Layout for Page Template :
if you want a full width, sidebar content, content sidebar or any other Genesis Layout for a Page Template you can use the following filter to force the layout of the page.

add_filter('genesis_pre_get_option_site_layout', 'name_of_the_layout');
Replace the second perameter with the name of the layout


List of Genesis Layout for Page Template :
// Force Full Width Layout

'__genesis_return_full_width_content'

// Force Content-Sidebar Layout

'__genesis_return_content_sidebar'

// Force Sidebar-Content Layout

'__genesis_return_sidebar_content'

// Force Content-Sidebar-Sidebar Layout

'__genesis_return_content_sidebar_sidebar'

// Force Sidebar-Sidebar-Content Layout

'__genesis_return_sidebar_sidebar_content'

// Force Sidebar-Content-Sidebar Layout

'__genesis_return_sidebar_content_sidebar'




Creating Full Width Home Page in Genesis Child Theme :
<?php

// GENESIS HOMEPAGE TEMPLATE //


// FORCE FULL WIDTH LAYOUT
add_filter ( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

// Homepage CUSTOM LOOP
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'my_custom_loop' );
function my_custom_loop () {
?>
 <div id="main_container">
  <div id="single-post" class="entry-content">
  
  // Add WP Query or Custom Columns for Home page Here
  
  </div> <!-- end single post -->
 </div> <!-- end main container -->
<?php } ?>


<?php genesis(); ?>

Continue Reading

Force Full width and add custom content in Genesis Page Template

Recently I have published a post Custom Page Template in Genesis Child Theme and figured some people still have the problem to work with custom page templates.


Make sure to do every thing in steps so that if a piece of snippet does not work then you can figure out the problem with the code
<?php

/**
*
* Template Name: Agents
*
*/


genesis();

this will create a page template in "pages" post types. now add the page template in the menu and view it. This will show a simple page with title and sidebar. If you add content it will also be show. see the image below.

Return Full width

now we will add a filter that will return a full width page template.

  

// RTURNS A FULL WITH FOT THE PAGE TEMPLATE

add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

Note : If you select another page layout from the "Layout Setting" metabox then it will overwrite the above layout. (if you add full width filter to the page template, and select sidebar/content while publishing the page then sidebar/content layout will be applied to the page template)

There are other layout too that you can use in page template. See other Genesis Layout Filters You remove default layout from the Genesis Child Theme Remove Genesis Laout - Unregister Layouts in Genesis

Remove Default loop.

// remove default loop
remove_action( 'genesis_loop', 'genesis_do_loop' );

Now you will only see header and footer, all the content will be removed.

Custom Content on Custom Page Template :

this is the tricky part of the tutorial, to add custom content we need to hook into the action hook and will add the markup and content over there. If you add content without any action hook then content will be displayed on the top of the header.

to add content we need to know about Action Hooks and Filters that are available in Genesis Framework. We also need a simple Genesis Visula Hooks plugin to see the action hooks and filters. Please read this post to know how to see action hooks with Genesis Visual hooks plugin and use hooks to add and filter content.

to add three columns / Custom Content :

add_action( 'genesis_before_content', 'homepge_content' );

function homepge_content() { ?>

<div class="one-third first">

Lorem ipsum dolor sam.....</div>

<div class="one-third">

Lorem ipsum dolor sit amet......</div>

<div class="one-third">

Lorem ipsum dolor sit amet......</div>

<?php }

Continue Reading

Custom sidebar for single product view in Genesis / WooCommerce

While working on a client site. He offered me to create a separate sidebar for a single product view in genesis. He wanted to load different widgets when single product is viewed. The tool used on the site for shopping cart was "WooCommerce"

First I went to the plugin and open it in editor and hard coded the sidebar which I registered in the functions.php


Later on I thought that this is not a good idea to do this. because with the newer version of Woo Commerce all the changes will be lost. Then I took use of the WooCommerce Actions Hooks in template and Hooked into the content-single-product.php

This template is responsible of showing content on the single-product.phpi took use of the hook

woocommerce_after_single_product

and did the following..

Step 1 : Register New Widget area for Custom Sidebar

add this code in functions.php to create a new widget area for product view page.

// NEW WIDGET AREA FOR SINGLE PRODUCT VIEW
if ( function_exists('register_sidebar') )
 register_sidebar(array('name'=>'Single Product Sidebar',
  'before_widget' => '<div class="widget-wrap">',
  'after_widget' => '</div>',
  'id' => 'product_sidebar',
  'description' => 'Widgets in this area will be shown on the single product view page only.',
  'before_title' => '<h4 class="widgettitle">',
  'after_title' => '</h4>',
));

Step 2 : removing default sidebar & adding Custom sidebar with Hooks.

add this code in functions.php to remove default sidebar and add the above sidebar in that place.

// content-single-product.php HOOK to get into the page to add single product sidebar.
add_action('woocommerce_after_single_product', 'single_product_sidebar_hook');
function single_product_sidebar_hook() { ?>
  <?php remove_action('genesis_sidebar', 'genesis_do_sidebar'); ?>
  <?php add_action('genesis_sidebar', 'genesis_single_product_sidebar');
            function genesis_single_product_sidebar() { ?>
                <?php // SINGLE PRODUCT VIEW SIDEBAR
                    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Product_Sidebar') ) : ?>
                <?php endif; ?>
   <?php } ?>
<?php }

Continue Reading

Add theme support for Custom Background

Custom Background in your WordPress Theme is a theme feature that allows you to change the background color or add background image to the Theme.

add_theme_support( 'custom-background' );

This code simply adds a menu item under Appearance in WordPress Dashborad. This code need to be placed in functions.php or any other file linked with functions.php

// Register Theme Features
function custom_theme_features()  {
 global $wp_version;

 // Add theme support for Custom Background
 $background_args = array(
  'default-color'          => '#7a7a7a',
  'default-image'          => get_template_directory_uri() . '/images/background.jpg',
  'wp-head-callback'       => '_custom_background_cb',
  'admin-head-callback'    => '',
  'admin-preview-callback' => '',
 );
 if ( version_compare( $wp_version, '3.4', '>=' ) ) :
  add_theme_support( 'custom-background', $background_args );
 else :
  add_custom_background();
 endif;
}

// Hook into the 'after_setup_theme' action
add_action( 'after_setup_theme', 'custom_theme_features' );

How Custom Background works.
The important thing to make this feature work is to add wp_head before the closing &lt;/head> tag in your theme header.php. If this is missing the custom background theme support will not work.
This code generates a style in the Head of the theme like this.

<style id="custom-background-css" type="text/css">
body.custom-background body.custom-background {
 background-color: #7a7a7a;
 background-image: url('images/background.png');
 background-repeat: repeat;
 background-position: top left;
 background-attachment: scroll;
}
</style>

Same way add theme support for header works in the presence of wp_head tag.

Continue Reading