Move &quot;Youtube Channel Gallery&quot; widget to center of a page

(@satimis)

11 years ago

Hi maaike,

Sorry, no.

I’m now embedding Youtube gallery in Post

satimis

(@nightbook)

10 years, 10 months ago

Hi satimis & maaikeWP,
This may be too late for you guys but hopefully useful to others in the future.

I’ve been able to implement the widget within a page by creating a custom template which has a widget space right after the post content.

So created template-videos.php as a duplicate of my pages.php file.

Added Template definition into the comments at the top:
Template Name: Videos

Then following the loop – <?php get_template_part( 'loop', 'page' ); ?>
I included the dynamic sidebar I set-up in functions.php following this

<div class="videos">
	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('video-widget') ) : ?>
	<?php endif; ?>
</div>

Now register the widget in your functions.php

register_sidebar(array(
		'name'=> __( "Video Widget", 'organicthemes' ),
		'id' => 'video-widget',
		'before_widget'=>'<div id="%1$s" class="widget %2$s"><div class="video-widget">',
		'after_widget'=>'</div></div>',
		'before_title'=>'<h6>',
		'after_title'=>'</h6>'
	));

*Just duplicate another register_sidebar and modify as you’ll need the name to register with your theme.

Save your template and functions files, create a new page set it to use your new template, and under Widgets add the Youtube widget into your new sidebar named Video Widget (or whatever you called it).

Hope that’s helpful.
Cheers

Thread Starter

(@satimis)

Hi nightbook,

Thanks for your advice.

So created template-videos.php as a duplicate of my pages.php file.

Where is pages.php? Under which folders?

wp-admin?
wp-content ?
wp-includes?

Thanks

satimis

(@nightbook)

Hi Satimis
No worries, pages.php is in your theme folder, so create the template there or in a templates folder that’s under that location, as long as it has the heading comment with it’s name:
/*
Template Name: Videos
*/
And the functions.php I’m referring to is also under your theme folder.
Hope that helps,
Cheers

Thread Starter

(@satimis)

Hi nightbook,

I have piano-03.satimis.com download from Godaddy on my PC. It is now running locally for testing.

OS – Ubuntu 12.04.3

Theme twentyeleven and child are installed and running.

$ ls /var/www/
index.html info.php piano-03

$ ls /var/www/piano-03/

index.php        wp-blog-header.php    wp-login.php      xmlrpc.php
license.txt      wp-comments-post.php  wp-cron.php        wp-mail.php
readme.html      wp-config.php         wp-includes        wp-settings.php
wp-activate.php  wp-config-sample.php  wp-links-opml.php  wp-signup.php
wp-admin         wp-content            wp-load.php        wp-trackback.php

$ ls /var/www/piano-03/wp-content/themes/

index.php  twentyeleven        twentyfourteen  twentytwelve
style.css  twentyeleven-child  twentythirteen

$ ls /var/www/piano-03/wp-content/themes/twentyeleven

404.php               content-link.php      image.php       searchform.php
archive.php           content-page.php      images          search.php
author.php            content.php           inc             showcase.php
category.php          content-quote.php     index.php       sidebar-footer.php
colors                content-single.php    js              sidebar-page.php
comments.php          content-status.php    languages       sidebar.php
content-aside.php     editor-style.css      license.txt     single.php
content-featured.php  editor-style-rtl.css  page.php        style.css
content-gallery.php   footer.php            readme.txt      tag.php
content-image.php     functions.php         rtl.css
content-intro.php     header.php            screenshot.png

Pls advise under which folder shall I add pages.php? Thanks

satimis

(@nightbook)

Hi Satimis,
You’ll want to create a template-videos.php file which is a duplicate of your pages.php file under /var/www/piano-03/wp-content/themes/twentyeleven (that is if twentyeleven is your current theme there was also listed under themes twentytwelve, twentyeleven-child twentythirteen, twentyfourteen).
Check what theme is active by going to the WP-Admin > Appearance > Themes (YOURWPURL/wp-admin/themes.php), whatever it says is active will tell you which themes folder to be in. So if it says Twenty Eleven is Active then go into wp-content/themes/twentyeleven.
From there duplicate page.php as template-videos.php, add into the comment in the header a Template Name:
Template Name: Videos
Add a videos container and dynamically include the sidebar we’ll register next in functions.php
Something like follows, feel free to wrap it in whatever div markup suites your website
<div class=”videos”>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘video-widget’) ) : ?>
<?php endif; ?>
</div>
And then we register the sidebar in the functions.php which is also in your theme folder.
Search for register_sidebar and duplicate an existing one customizing it to match the dynamic_sidebar inclusion we just added to your template-video.php. Should look similar to:

register_sidebar(array(
		'name'=> __( "Video Widget", 'organicthemes' ),
		'id' => 'video-widget',
		'before_widget'=>'<div id="%1$s" class="widget %2$s"><div class="video-widget">',
		'after_widget'=>'</div></div>',
		'before_title'=>'<h6>',
		'after_title'=>'</h6>'
	));

Note: Your name will differ from mine and should match more what your other register_sidebar declarations say.
'name'=> __( "Video Widget", 'organicthemes' ),
*organicthemes is my theme so yours may be twentyeleven
The other thing to be careful with is that the id in your register_sidebar matches exactly what you used in the dynamic_sidebar includes in template-videos.php

'id' => 'video-widget',
'before_widget'=>'<div id="%1$s" class="widget %2$s"><div class="video-widget">',

*If you didn’t change the id used in the template-videos.php codeblock you shouldn’t have to change this.

I hope that’s clear,
All the best,
Cheers

Thread Starter

(@satimis)

Hi nightbook,

You’ll want to create a template-videos.php file which is a duplicate of your pages.php file under /var/www/piano-03/wp-content/themes/twentyeleven (that is if twentyeleven is your current theme there was also listed under themes twentytwelve, twentyeleven-child twentythirteen, twentyfourteen).

Sorry I can’t find pages.php here. Twentyeleven-child is the active theme.

# ls /var/www/piano-03/wp-content/themes/

index.php  twentyeleven        twentyfourteen  twentytwelve
style.css  twentyeleven-child  twentythirteen

# ls /var/www/piano-03/wp-content/themes/twentyeleven-child/
header.php style.css

Whether header.php was what you referred to as “pages.php”? Thanks

satimis

(@nightbook)

Hi satimis,
So you’re using a child theme which means the page.php (sorry I said pages.php, it’s page.php) that your site is currently using is in the twentyeleven theme folder.
Copy page.php into /twentyeleven changing name to template-videos.php
Then you can go through the rest of the process previously mentioned.
Hope that clears things up, best of luck,
Cheers

Thread Starter

(@satimis)

Hi nightbook,

Performed following steps:-

$ locate page.php | grep twentyeleven

/var/www/piano-03/wp-content/themes/twentyeleven/content-page.php
/var/www/piano-03/wp-content/themes/twentyeleven/page.php
/var/www/piano-03/wp-content/themes/twentyeleven/sidebar-page.php

page.php is already there

$ cat /var/www/piano-03/wp-content/themes/twentyeleven/page.php

<?php
....
..
get_header(); ?>

                <div id="primary">
                        <div id="content" role="main">

                                <?php while ( have_posts() ) : the_post(); ?>

                                        <?php get_template_part( 'content', 'pae' ); ?>

                                        <?php comments_template( '', true ); ?>

                                <?php endwhile; // end of the loop. ?>

                        </div><!-- #content -->
                </div><!-- #primary -->

$ sudo cp /var/www/piano-03/wp-content/themes/twentyeleven/page.php /var/www/piano-03/wp-content/themes/twentyeleven/template-videos.php

$ sudo nano /var/www/piano-03/wp-content/themes/twentyeleven/template-videos.php

adding following lines at the bottom of the file;

<div class="videos">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('video-widget') ) : ?>
<?php endif; ?>
</div>

$ cat /var/www/piano-03/wp-content/themes/twentyele
ven/template-videos.php

get_header(); ?>

                <div id="primary">
                        <div id="content" role="main">

                                <?php while ( have_posts() ) : the_post(); ?>

                                        <?php get_template_part( 'content', 'p$

                                        <?php comments_template( '', true ); ?>

                                <?php endwhile; // end of the loop. ?>

                        </div><!-- #content -->
                </div><!-- #primary -->

<?php get_footer(); ?>

<div class="videos">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('video-widg$
<?php endif; ?>
</div>

$ sudo cp /var/www/piano-03/wp-content/themes/twentyeleven/functions.php /var/www/piano-03/wp-content/themes/twentyeleven/functions.php.ORIG

$ sudo gedit /var/www/piano-03/wp-content/themes/twentyeleven/functions.php

There are 5 (Five) register_sidebar(s) which one shall I edit?

register_sidebar( array(
		'name' => __( 'Main Sidebar', 'twentyeleven' ),
		'id' => 'sidebar-1',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

	register_sidebar( array(
		'name' => __( 'Showcase Sidebar', 'twentyeleven' ),
		'id' => 'sidebar-2',
		'description' => __( 'The sidebar for the optional Showcase Template', 'twentyeleven' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

	register_sidebar( array(
		'name' => __( 'Footer Area One', 'twentyeleven' ),
		'id' => 'sidebar-3',
		'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

	register_sidebar( array(
		'name' => __( 'Footer Area Two', 'twentyeleven' ),
		'id' => 'sidebar-4',
		'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

	register_sidebar( array(
		'name' => __( 'Footer Area Three', 'twentyeleven' ),
		'id' => 'sidebar-5',
		'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );
}

Thanks.

satimis

(@nightbook)

Hi Satimis,

Firstly with the placement of the code within template-videos.php you’ll want to place it within your content not at the end. Depending if you want it above, below or inside your content you’ll want to place it above, below or inside ‘the loop’

So if you want it above it should look like:

get_header(); ?>

                <div id="primary">
                        <div id="content" role="main">

                                <div class="videos">
                                        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('video-widget') ) : ?>
                                        <?php endif; ?>
                                </div>

                                <?php while ( have_posts() ) : the_post(); ?>

                                        <?php get_template_part( 'content', 'p$

                                        <?php comments_template( '', true ); ?>

                                <?php endwhile; // end of the loop. ?>

                        </div><!-- #content -->
                </div><!-- #primary -->

<?php get_footer(); ?>

If you want it below your content (& comments) it should look like:

get_header(); ?>

                <div id="primary">
                        <div id="content" role="main">

                                <?php while ( have_posts() ) : the_post(); ?>

                                        <?php get_template_part( 'content', 'p$

                                        <?php comments_template( '', true ); ?>

                                <?php endwhile; // end of the loop. ?>

                                <div class="videos">
                                        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('video-widget') ) : ?>
                                        <?php endif; ?>

                                </div>

                        </div><!-- #content -->
                </div><!-- #primary -->

<?php get_footer(); ?>

And finally if you want it between your content and the comments section it should look like:

get_header(); ?>

                <div id="primary">
                        <div id="content" role="main">

                                <?php while ( have_posts() ) : the_post(); ?>

                                        <?php get_template_part( 'content', 'p$
                                        <div class="videos">
                                                    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('video-widget') ) : ?>
                                                    <?php endif; ?>
                                        </div>

                                        <?php comments_template( '', true ); ?>

                                <?php endwhile; // end of the loop. ?>

                        </div><!-- #content -->
                </div><!-- #primary -->

<?php get_footer(); ?>

Now into your functions.php you don’t want to edit any of the current registers, leave them all and just duplicate one of them like one of the sidebars:

register_sidebar( array(
		'name' => __( 'Showcase Sidebar', 'twentyeleven' ),
		'id' => 'sidebar-2',
		'description' => __( 'The sidebar for the optional Showcase Template', 'twentyeleven' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

And update the duplicate with the name/id/description for this widget:

register_sidebar( array(
		'name' => __( 'Video Sidebar', 'twentyeleven' ),
		'id' => 'video-widget',
		'description' => __( 'The sidebar for the Video Channel Gallery', 'twentyeleven' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

You should end up with 6 sidebars in the end.
Save your functions.php and your new template-videos.php files and go into WP-Admin.
Navigate to widgets, Appearance > Widgets
You’ll find a new sidebar called Video Sidebar where you can add the Video Channel Gallery widget.
Then create a new page or update existing and set the template on it to your newly created one Video Template.
*Note: make sure the comment with template name is at the top of your template-video.php file.
Page Templates – https://codex.www.ads-software.com/Page_Templates

Cheers

Thread Starter

(@satimis)

Hi nightbook,

Performed following steps;

$ sudo gedit /var/www/wp-content/themes/twentyeleven/template-videos.php
edit the file as follow;

<?php
/**
 * Template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

get_header(); ?>

		<div id="primary">
			<div id="content" role="main">

				<?php while ( have_posts() ) : the_post(); ?>

					<?php get_template_part( 'content', 'page' ); ?>

					<?php comments_template( '', true ); ?>

				<?php endwhile; // end of the loop. ?>

		<div class="videos">
				<?php if ( !function_exists
				('dynamic_sidebar') || !dynamic_sidebar('video-widget') ) : ?>
				<?php endif; ?>
			</div>

			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_footer(); ?>

$ sudo gedit /var/www/piano-03/wp-content/themes/twentyeleven/template-videos.php
duplicate and edit one sidebar as follow;

register_sidebar( array(
		'name' => __( 'Video Sidebar', 'twentyeleven' ),
		'id' => 'video-widget',
		'description' => __( 'The sidebar for the Video Channel Gallery', 'twentyeleven' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

Appearance > Widgets
“Video Sidebar” is there

Create a new page. Template > Sidebar Template

“Video Sidebar” can’t be found.

*Note: make sure the comment with template name is at the top of your template-video.php file.

Sorry I can’t follow.

satimis

(@nightbook)

Hi Satimis,
You’re getting there, you just have to customize the Comment at the top of the template-videos.php file to define it as a Template so WordPress will pick it up.

Replace This:

<?php
/**
 * Template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

get_header(); ?>

With This:

<?php
/**
 * Template Name: Videos Gallery
 *
 * This is the template that has the dynamic Videos sidebar to place in the Videos Gallery Widget.
 *
 */

get_header(); ?>

By having the ‘Template Name’ in the comments it defines your php file as a template.
https://codex.www.ads-software.com/Page_Templates
“A custom page template file can be in a sub-folder, or, if using a Child Theme, in its Parent Theme’s folder.”
*So place the file in your twentyeleven folder and not your twentyeleven-child folder.

When you create a page you’ll find in the Template dropdown the Videos Gallery template, selecting/saving will use the Video Sidebar, and finally in your Appearance > Widgets you can then add the Videos Channel Gallery widget into the Videos Sidebar (edit/save).

Hope that clears it up for you, you’re on the home stretch.
Cheers

Thread Starter

(@satimis)

I tried following 2 settings:-

<?php
/**
 * Template Name: Videos Gallery
 *
 * This is the template that has the dynamic Videos sidebar to place in the Videos Gallery Widget.
 */

get_header(); ?>

		<div id="primary">
			<div id="content" role="main">

				<?php while ( have_posts() ) : the_post(); ?>

					<?php get_template_part( 'content', 'page' ); ?>

					<?php comments_template( '', true ); ?>

				<?php endwhile; // end of the loop. ?>

		<div class="videos">
				<?php if ( !function_exists
				('dynamic_sidebar') || !dynamic_sidebar('video-widget') ) : ?>
				<?php endif; ?>
			</div>

			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_footer(); ?>

<?php
/**
 * Template Name: Videos Gallery
 *
 * This is the template that has the dynamic Videos sidebar to place in the Videos Gallery Widget.
 */

get_header(); ?>

		<div id="primary">
			<div id="content" role="main">

		<div class="videos">
				<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('video-widget') ) : ?>
				<?php endif; ?>
			</div>

				<?php while ( have_posts() ) : the_post(); ?>

					<?php get_template_part( 'content', 'page' ); ?>

					<?php comments_template( '', true ); ?>

				<?php endwhile; // end of the loop. ?>

			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_footer(); ?>

Page Attributes including Template “Videos Gallery” is under content. It is the same.

satimis

(@nightbook)