• From: Chicago
  • Registered: 07-30-2011 UTC
  • Posts: 10,495

Re: Adding multiple widgets to Responsive Theme

Just remembered something. 4th widget will be all the way at the top, not where current Home Widgets are. Please check above all widgets for me? (above main one)

Emil

Emil wrote:

do you mind including the entire Child Theme please?

Emil

JuryDuty wrote:

I can, but it's literally a cut-and-paste from http://themeid.com/forum/topic/1076/add … me-widget/

Best I can tell, it's not even reading from my child theme's functions.php file. I can mess it up and nothing changes. It's under responsive-child-theme/includes/functions.php.

http://www.runningmomentum.com/theme.png

Emil Uzelac's Website

12 Reply by JuryDuty (edited by JuryDuty 05-24-2012 UTC 07:26:34)

  • Registered: 05-20-2012 UTC
  • Posts: 29

Re: Adding multiple widgets to Responsive Theme

Here's the screenshot of the whole widget bar:
http://www.runningmomentum.com/widgetbar.png

And the full child theme is attached.

So playing around with it more, I'm convinced that while WP is reading the child sidebar-home.php file (it must to get the fourth widget to show up), it is NOT reading the child functions.php at all. I can change code inside the child functions.php and none of it is registering any change.

However, the code does seem correct. If I put it in the parent functions.php file, it works great. The problem seems to be getting the child functions.php to work correctly.

  • From: Chicago
  • Registered: 07-30-2011 UTC
  • Posts: 10,495

Re: Adding multiple widgets to Responsive Theme

It took me some time to figure out than boom, you added your functions.php within a /includes/functions.php while this should not be in any folder at all. Move functions.php from Child Theme includes to the Theme folder and you'll be all set.

Child Theme functions must be like this /responsive-child-theme/functions.php

Emil

JuryDuty wrote:

Here's the screenshot of the whole widget bar:
http://www.runningmomentum.com/widgetbar.png

And the full child theme is attached.

So playing around with it more, I'm convinced that while WP is reading the child sidebar-home.php file (it must to get the fourth widget to show up), it is NOT reading the child functions.php at all. I can change code inside the child functions.php and none of it is registering any change.

However, the code does seem correct. If I put it in the parent functions.php file, it works great. The problem seems to be getting the child functions.php to work correctly.

Emil Uzelac's Website

  • Registered: 05-20-2012 UTC
  • Posts: 29

Re: Adding multiple widgets to Responsive Theme

Emil!!! That was it. Geesh. I figured since things like icons and images had to go in folders that anything else would have to follow fashion.

Thank you SO MUCH for your help with this. You went above and beyond. I'll be sending in a donation so you can continue your great support and development.

Now all the widgets I was wanting on the home page are working (see http://www.runningmomentum.com). Thanks again!

  • From: Chicago
  • Registered: 07-30-2011 UTC
  • Posts: 10,495

Re: Adding multiple widgets to Responsive Theme

Looks very nice and I love widgets!

Emil

JuryDuty wrote:

Emil!!! That was it. Geesh. I figured since things like icons and images had to go in folders that anything else would have to follow fashion.

Thank you SO MUCH for your help with this. You went above and beyond. I'll be sending in a donation so you can continue your great support and development.

Now all the widgets I was wanting on the home page are working (see http://www.runningmomentum.com). Thanks again!

Emil Uzelac's Website

  • Registered: 05-20-2012 UTC
  • Posts: 29

Re: Adding multiple widgets to Responsive Theme

So, for anyone else who's following this and wants to add widgets of different sizes, here's how I created the following with Emil's help:

First, after activating the main theme, download, install and activate his responsive-child-theme.

Then, copy over home.php and add it to the responsive-child-theme root. Add the following lines at the end of home.php, just above <?php get_footer(); ?>. You can change the order if you want, or drop any out:

<?php get_sidebar('home-widget-single'); ?>
<?php get_sidebar('home-widgets-double'); ?>
<?php get_sidebar('home-widgets-triple'); ?>

Then, create a new file called functions.php. Place it in the responsive-child-theme root. Here's the code to put inside. Drop any arrays you don't want:

<?php
function responsive_child_widgets_init() {

        register_sidebar(array(
            'name' => __('Home Widget 4', 'responsive'),
            'description' => __('Area Nine - sidebar-home-widgets-triple.php', 'responsive'),
            'id' => 'home-widget-4',
            'before_title' => '<div id="widget-title-one" class="widget-title-home"><h3>',
            'after_title' => '</h3></div>',
            'before_widget' => '<div id="%1$s" class="widget-wrapper %2$s">',
            'after_widget' => '</div>'
        ));

        register_sidebar(array(
            'name' => __('Home Widget 5', 'responsive'),
            'description' => __('Area Ten - sidebar-home-widgets-triple.php', 'responsive'),
            'id' => 'home-widget-5',
            'before_title' => '<div id="widget-title-two" class="widget-title-home"><h3>',
            'after_title' => '</h3></div>',
            'before_widget' => '<div id="%1$s" class="widget-wrapper %2$s">',
            'after_widget' => '</div>'
        ));

        register_sidebar(array(
            'name' => __('Home Widget 6', 'responsive'),
            'description' => __('Area Ten - sidebar-home-widgets-triple.php', 'responsive'),
            'id' => 'home-widget-6',
            'before_title' => '<div id="widget-title-two" class="widget-title-home"><h3>',
            'after_title' => '</h3></div>',
            'before_widget' => '<div id="%1$s" class="widget-wrapper %2$s">',
            'after_widget' => '</div>'
        ));

        register_sidebar(array(
            'name' => __('Home Widget Single', 'responsive'),
            'description' => __('Area Twelve - sidebar-home-widget-single.php', 'responsive'),
            'id' => 'home-widget-single',
            'before_title' => '<div id="widget-title-three" class="widget-title-home"><h3>',
            'after_title' => '</h3></div>',
            'before_widget' => '<div id="%1$s" class="widget-wrapper %2$s">',
            'after_widget' => '</div>'
        ));

        register_sidebar(array(
            'name' => __('Home Widget Double 1', 'responsive'),
            'description' => __('Area Thirteen - sidebar-home-widgets-double.php', 'responsive'),
            'id' => 'home-widgets-double-1',
            'before_title' => '<div id="widget-title-two" class="widget-title-home"><h3>',
            'after_title' => '</h3></div>',
            'before_widget' => '<div id="%1$s" class="widget-wrapper %2$s">',
            'after_widget' => '</div>'
        ));

        register_sidebar(array(
            'name' => __('Home Widget Double 2', 'responsive'),
            'description' => __('Area Fourteen - sidebar-home-widgets-double.php', 'responsive'),
            'id' => 'home-widgets-double-2',
            'before_title' => '<div id="widget-title-three" class="widget-title-home"><h3>',
            'after_title' => '</h3></div>',
            'before_widget' => '<div id="%1$s" class="widget-wrapper %2$s">',
            'after_widget' => '</div>'
        ));
}
add_action( 'widgets_init', 'responsive_child_widgets_init' );
?>

Then, create a new file called sidebar-home-widget-single.php. Place it in the responsive-child-theme root. Here's the code to put inside:

<?php
/**
 * Home Widgets Template
 *
 *
 * @file           sidebar-home-widget-single.php
 * @package        Responsive 
 * @author         Emil Uzelac 
 * @copyright      2003 - 2012 ThemeID
 * @license        license.txt
 * @version        Release: 1.0
 * @filesource     wp-content/themes/responsive/sidebar-home-widget-single.php
 * @link           http://codex.wordpress.org/Theme_Development#Widgets_.28sidebar.php.29
 * @since          available since Release 1.0
 */
?>
    <div id="widgets" class="home-widgets">
        <div class="grid col-940 fit">
        <?php responsive_widgets(); // above widgets hook ?>
            
            <?php if (!dynamic_sidebar('home-widget-single')) : ?>
            <div class="widget-wrapper">
            
                <div class="widget-title-home"><h3><?php _e('Home Widget Single', 'responsive'); ?></h3></div>
                <div class="textwidget"><?php _e('This is your single home widget box. To edit please go to Appearance > Widgets and choose the widget called Home Widget Single. Title is also manageable from widgets as well.','responsive'); ?></div>
            
            </div><!-- end of .widget-wrapper -->
            <?php endif; //end of home-widget-single ?>

        <?php responsive_widgets_end(); // responsive after widgets hook ?>
        </div><!-- end of .col-940 fit-->

     </div><!-- end of #widgets -->

Then, create a new file called sidebar-home-widgets-double.php. Place it in the responsive-child-theme root. Here's the code to put inside:

<?php
/**
 * Home Widgets Template
 *
 *
 * @file           sidebar-home-widgets-double.php
 * @package        Responsive 
 * @author         Emil Uzelac 
 * @copyright      2003 - 2012 ThemeID
 * @license        license.txt
 * @version        Release: 1.0
 * @filesource     wp-content/themes/responsive/sidebar-home-widgets-double.php
 * @link           http://codex.wordpress.org/Theme_Development#Widgets_.28sidebar.php.29
 * @since          available since Release 1.0
 */
?>
    <div id="widgets" class="home-widgets">
        <div class="grid col-460">
        <?php responsive_widgets(); // above widgets hook ?>
            
            <?php if (!dynamic_sidebar('home-widgets-double-1')) : ?>
            <div class="widget-wrapper">
            
                <div class="widget-title-home"><h3><?php _e('Home Widgets Double 1', 'responsive'); ?></h3></div>
                <div class="textwidget"><?php _e('This is your first double home widget box. To edit please go to Appearance > Widgets and choose the widget called Home Widgets Double 1. Title is also manageable from widgets as well.','responsive'); ?></div>
            
            </div><!-- end of .widget-wrapper -->
            <?php endif; //end of home-widgets-double-1 ?>

        <?php responsive_widgets_end(); // responsive after widgets hook ?>
        </div><!-- end of .col-460 -->

        <div class="grid col-460 fit">
        <?php responsive_widgets(); // responsive above widgets hook ?>
            
            <?php if (!dynamic_sidebar('home-widgets-double-2')) : ?>
            <div class="widget-wrapper">
            
                <div class="widget-title-home"><h3><?php _e('Home Widgets Double 2', 'responsive'); ?></h3></div>
                <div class="textwidget"><?php _e('This is your second home widget box. To edit please go to Appearance > Widgets and choose the widget called Home Widgets Doouble 2. Title is also manageable from widgets as well.','responsive'); ?></div>
            
            </div><!-- end of .widget-wrapper -->
            <?php endif; //end of home-widgets-double-2 ?>
            
        <?php responsive_widgets_end(); // after widgets hook ?>
        </div><!-- end of .col-460 fit -->

    </div><!-- end of #widgets -->

Then, create a new file called sidebar-home-widget-triple.php. Place it in the responsive-child-theme root. Here's the code to put inside:

<?php
/**
 * Home Widgets Template
 *
 *
 * @file           sidebar-home-widgets-triple.php
 * @package        Responsive 
 * @author         Emil Uzelac 
 * @copyright      2003 - 2012 ThemeID
 * @license        license.txt
 * @version        Release: 1.0
 * @filesource     wp-content/themes/responsive/sidebar-home-widgets-triple.php
 * @link           http://codex.wordpress.org/Theme_Development#Widgets_.28sidebar.php.29
 * @since          available since Release 1.0
 */
?>
    <div id="widgets" class="home-widgets">
        <div class="grid col-300">
        <?php responsive_widgets(); // above widgets hook ?>
            
            <?php if (!dynamic_sidebar('home-widget-4')) : ?>
            <div class="widget-wrapper">
            
                <div class="widget-title-home"><h3><?php _e('Home Widget 4', 'responsive'); ?></h3></div>
                <div class="textwidget"><?php _e('This is your first home widget box on your secondary set of triple widgets. To edit please go to Appearance > Widgets and choose the widget called Home Widget 4. Title is also manageable from widgets as well.','responsive'); ?></div>
            
            </div><!-- end of .widget-wrapper -->
            <?php endif; //end of home-widget-4 ?>

        <?php responsive_widgets_end(); // responsive after widgets hook ?>
        </div><!-- end of .col-300 -->

        <div class="grid col-300">
        <?php responsive_widgets(); // responsive above widgets hook ?>
            
            <?php if (!dynamic_sidebar('home-widget-5')) : ?>
            <div class="widget-wrapper">
            
                <div class="widget-title-home"><h3><?php _e('Home Widget 5', 'responsive'); ?></h3></div>
                <div class="textwidget"><?php _e('This is your first home widget box on your secondary set of triple widgets. To edit please go to Appearance > Widgets and choose the widget called Home Widget 5. Title is also manageable from widgets as well.','responsive'); ?></div>
            
            </div><!-- end of .widget-wrapper -->
            <?php endif; //end of home-widget-5 ?>
            
        <?php responsive_widgets_end(); // after widgets hook ?>
        </div><!-- end of .col-300 -->

        <div class="grid col-300 fit">
        <?php responsive_widgets(); // above widgets hook ?>
            
            <?php if (!dynamic_sidebar('home-widget-6')) : ?>
            <div class="widget-wrapper">
            
                <div class="widget-title-home"><h3><?php _e('Home Widget 6', 'responsive'); ?></h3></div>
                <div class="textwidget"><?php _e('This is your first home widget box on your secondary set of triple widgets. To edit please go to Appearance > Widgets and choose the widget called Home Widget 6. Title is also manageable from widgets as well.','responsive'); ?></div>
        
            </div><!-- end of .widget-wrapper -->
            <?php endif; //end of home-widget-6 ?>
            
        <?php responsive_widgets_end(); // after widgets hook ?>
        </div><!-- end of .col-300 fit -->
    </div><!-- end of #widgets -->

That's it! You're good-to-go.

The files are below if you just want to upload them, too.
https://www.dropbox.com/s/m2qbkc5qniw2s … itions.zip

  • Registered: 05-20-2012 UTC
  • Posts: 29

Re: Adding multiple widgets to Responsive Theme

PS Here's how the added widgets look underneath what's in the original theme:
http://www.masellis.com/juryduty/addedwidgets.png

  • From: Chicago
  • Registered: 07-30-2011 UTC
  • Posts: 10,495

Re: Adding multiple widgets to Responsive Theme

Awesome and thanks! Going sticky now!

Emil

JuryDuty wrote:

PS Here's how the added widgets look underneath what's in the original theme:
http://www.masellis.com/juryduty/addedwidgets.png

Emil Uzelac's Website

  • Registered: 05-22-2012 UTC
  • Posts: 1

Re: Adding multiple widgets to Responsive Theme

First, I want to thank both your advice and your help. This is just what I was looking for. But I found that the home.php file attached here is different in the original theme. Can this cause a problem?

20 Reply by JuryDuty (edited by JuryDuty 05-25-2012 UTC 13:20:01)

  • Registered: 05-20-2012 UTC
  • Posts: 29

Re: Adding multiple widgets to Responsive Theme

Javier wrote:

First, I want to thank both your advice and your help. This is just what I was looking for. But I found that the home.php file attached here is different in the original theme. Can this cause a problem?

Ah--good catch. Yes, I'm using an adapted home.php that Emil created that puts the Call to Action on the RIGHT and the content on the LEFT in the main widget. The original theme has it the other way around. But that's the only difference.

http://www.masellis.com/juryduty/flippedwidget1.png

So if you want the content on the RIGHT in the main widget, open up the home.php that comes with the theme and just append the lines above the footer call as listed above. It'll still work the same.

(That said, if Emil updates the theme and changes anything on the original home.php file, we'll need to copy those changes here to keep it up-to-date, too.)