Responsive WordPress Theme Home Page Slider, Google Search and Colophon Widget

Video is ready, Click Here to View ×


A brief tutorial on how to modify the Responsive WordPress Theme from ThemeID. Please NOTE, home php has been changed to front-page php. Be sure to make a backup copy of your home.php or front-page.php (new) file before editing or copy your home php (old) or front-page php (new) file into your child theme folder and edit that copy! I show how to add a wide featured slider using the Meteor Slides Plugin, add a Google Custom Search to the top of your theme and how to use the Colophon Widget. This tutorial is packed with some of my coolest tricks for the Responsive Theme! Watch my video that compares both home.php and front-page.php here: https://www.youtube.com/watch?v=Xmz42bgqqP4

The methods involved cover:
-Theme Options-Home Page Settings
-home.php file (old) front-page.php (new)
-Colophon Widget
-Top Widget

For more Tips Tools and Tutorials from Allan, visit www.mindvisionmedia.net or subscribe to my channel.

– Get your FREE guide for website…

49 Comments

  1. I'm new to the Responsive theme and would be lost without your VERY helpful videos. The clear step-by-step instructions make it easy to follow along and adapt to my own site. Thanks for the help. I'll be back soon to learn more as my site grows. :)

  2. Hi Allan,

    Really enjoying your videos.  You mention and link to an Area Map for the Responsive Theme but I get a 404 page instead.  Would really like to see the map – is it some place else?

    Michael

  3. Hi Allan – thanks for sharing such brilliant guidelines, it's really helpfull.
    Could I ask you to wisit the page i'm building from your videos http://www.itjelp.dk and tell my why the search buttom do not appear, under the google search field?
    – Keep up sharing videos and have a nice day
    Regards  
    Joakim (from Denmark)
     

  4. Hello Allan, 
    I followed your steps on how to insert a video in the featured content of the home page. The video doesn't load. The embed code is there. How can I fix it.

    Claudio Monge

  5. Hey Allen, I have been trying to figure it out and was able to make it so that I completed everything up to  being able to center. Below is my code if you could check it out and see if anything is wrong::

    <?php

    // Exit if accessed directly
    if ( !defined( 'ABSPATH' ) ) {
        exit;
    }

    /**
     * Site Front Page
     *
     * Note: You can overwrite front-page.php as well as any other Template in Child Theme.
     * Create the same file (name) include in /responsive-child-theme/ and you're all set to go!
     *@see            http://codex.wordpress.org/Child_Themes and
     *                 http://themeid.com/forum/topic/505/child-theme-example/
     *
     *@file           front-page.php
     *@package        Responsive
     *@author         Emil Uzelac
     *@copyright      2003 – 2014 CyberChimps
     *@license        license.txt
     *@version        Release: 1.0
     *@filesource     wp-content/themes/responsive/front-page.php
     *@link           http://codex.wordpress.org/Template_Hierarchy
     *@since          available since Release 1.0
     */

    /**
     * Globalize Theme Options
     */
    $responsive_options = responsive_get_options();
    /**
     * If front page is set to display the
     * blog posts index, include home.php;
     * otherwise, display static front page
     * content
     */
    if ( 'posts' == get_option( 'show_on_front' ) && $responsive_options['front_page'] != 1 ) {
        get_template_part( 'home' );
    } elseif ( 'page' == get_option( 'show_on_front' ) && $responsive_options['front_page'] != 1 ) {
        $template = get_post_meta( get_option( 'page_on_front' ), '_wp_page_template', true );
        $template = ( $template == 'default' ) ? 'index.php' : $template;
        locate_template( $template, true );
    } else {

        get_header();

        //test for first install no database
        $db = get_option( 'responsive_theme_options' );
        //test if all options are empty so we can display default text if they are
        $empty = ( empty( $responsive_options['home_headline'] ) && empty( $responsive_options

    ['home_subheadline'] ) && empty( $responsive_options['home_content_area'] ) ) ? false : true;
        ?>

        <div id="featured" class="grid col-940">

            <div id="featured-image" class="grid col-940 fit">

                <?php $featured_content = ( !empty( $responsive_options['featured_content'] ) ) ?

    $responsive_options['featured_content'] : '<img class="alignlcenter" src="' . get_template_directory_uri() .

    '/core/images/featured-image.png" width="940" height="500" alt="" />'; ?>

                <?php echo do_shortcode( wpautop( $featured_content ) ); ?>

                <?php
                if ( isset( $responsive_options['home_content_area'] ) && $db && $empty ) {
                    echo do_shortcode( wpautop( $responsive_options['home_content_area'] ) );
                } else {
                    ?>
                    <p>
                        <?php _e( 'Your title, subtitle and this very content is editable from

    Theme Option. Call to Action button and its destination link as well. Image on your right can be an image or

    even YouTube video if you like.', 'responsive' ); ?>
                    </p>

                <?php
                }

                if ( $responsive_options['cta_button'] == 0 ): ?>

                    <div class="call-to-action">

                        <a href="<?php echo $responsive_options['cta_url']; ?>" class="blue

    button">
                            <?php
                            if ( isset( $responsive_options['cta_text'] ) && $db )
                                echo $responsive_options['cta_text'];
                            else
                                _e( 'Call to Action', 'responsive' );
                            ?>
                        </a>

                    </div><!– end of .call-to-action –>

                <?php endif; ?>

            </div>
            <!– end of .col-940 –>

            

            </div>
            <!– end of #featured-image –>

        </div><!– end of #featured –>

        <?php
        get_sidebar( 'home' );
        get_footer();
    }
    ?>

  6. hello I am using WP v. 3.8.2 and Responsive Theme 1.9.5.4, and have tried numerous times to replace the content area (the headline, subheadline, etc.) with the featured content area (the pc, tablet and phone pic). Every time after I perform the action at 18:22, I always get a 500 internal server error. Please help me

  7. Hi Allan…  my Home.PHP file has none of the info you mentioned.   My Front-Page.PHP has all those area you mentioned to copy and paste… but when I do it my webpage goes completely blank after I update it.   Still trying to figure out what to do.

  8. Allan… first of all thank you for all your videos.  Great stuff.  I am a newbie who just stumbled onto your youtube channel.  I am just curious regarding the height of the feature content where you added the slides.  I saw how you edited the width but I didn't see you mention anything on height.  Is the height restricted at all? 

  9. Wondering if you could help? How would I get my images closer to the top so theres less white showing? Also I've checked your site and see your drop down menus are in orange how would I go about doing this in blue? Sorry for bothering you with this.

    Thanks

  10. Hi, Allan. I understand that I need to be editing front-page.php with the new version, however, I'm not sure how. When I begin to edit the .php file and following your direction, I'm getting an error (says error on line 94) which is the last php on the page. If I remove that, I remove everything below. Please assist if you can. I appreciate your tutorials very much and I'm learning so much!

  11. Hi , Thanks Allan, great video. how do you change the text color and size on the main page of a responsive theme?, not really sure where I can find it in the HTML code, thanks.

  12. Thanks Allan, this was really helpful. I had been trying for so long to try to span that banner out, this fixed it for me. My site now doesn't look like a "default" template. Your instructions were very clear and you know how to teach! Thanks! :)

  13. I just wanted to share this classic Responsive Theme Tutorial from Allan at MindVisionMedia.net. Demand is still high for this video tutorial because it shows how to add a full width Slider, a Google Search Bar and how to work with the Colophon Widget

  14. This was really useful, thanks Allan. I got my slider full width and working sweet. However, I don't know how to get the top of the slider to marry to the menu bar above it. It would be great if there wasn't a gap so it looked neat and tidy. Do you have a tutorial or tips on this? This is a great video and I am a complete beginner (though I had to edit 'frontpage.php' rather than 'home.php' but I worked it out). 

  15. Hello Allan, please help up if you have time with the aligning of the Slideshow to the center because the code just shows up on the site on the sides of the slide image.
    Thank you in advance

  16. Allan, the php code you're working with is in my front-page.php file, not the home.php file. Why is that?

    I followed your steps in the front-page.php file and it crashed my site. I'm assuming that something is wrong with my files. Do you have any suggestions?

  17. Allan, I followed your advice to the letter and it now looks good and works perfectly on my camera site now. I think my ten years of Dreamweaver worked against me at the start when using WordPress. Firebug is a must. It makes it so much easier. So changes made to the Style CSS are lost when you update WordPress. I'll have to get the Child Theme going. Thanks again Allan. You have helped heaps!

  18. Hello fishingmag, hope all is well. You'll have to adjust the margins in the style sheet under the #featured parameters. Play around to see what works as far as space. If you use Firefox, Firebug and help you find it and experiment before making changes. Watch my videos on Editing WordPress with Firefox 1&2 to see how, if you still need help, email me at my website, thanks! BTW, I'm a fisherman too, love it…

  19. Hello World media Advocacy, hope all is well. It is probably do to the file name change. I mention it in my description, they changed the name of the home php file in one of the updates to front-page php. this has caused much confusion for a lot of people. If you need help, email me via my site, thanks

  20. Hi Allan,
    I am trying to get a full width header on my site but my code looks very different to the one you are editing on this video, Any advice on how I could correct this?
    I could send you the code so you can see what I mean.
    Thank you so much, great videos

  21. hi Mr. Allan
    thank you very much for great video, unfortunately I tried to change size and remove the text widget but I can't find in editting PHP page, it look like variable no size for the photo bar, what I have to do in this case?

  22. Good day Cal,hope all is well. Without knowing what slideshow plugin you are suing it sounds like a "shortcode" issue. As long as you have created and saved your slideshows, you just need to place the shortcode where you want the slideshow. Double check your work, you probably missed something simple. I don't have a video for slideshows specifically because there are so many different ones out there. Thanks

  23. Hallo Allan, thank you for your videos! One thing is not working for me and that is the code on 25:11. It is not working for me. I can't post the code because Youtube won't let me, but the code you are using is not working for me. What is the other way you are talking about?

Leave a Reply

Your email address will not be published.


*