You are here:Home » static homepage » Static Page, slider and Quote on Homepage Wordpress

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; }

0 comments:

Post a Comment