[Glen Pavelich]

I don’t know php enough to know how to do this properly, but I would like to create a widget area below the #header and above the #main, for the home page.

I have a child theme: catch-box-pro-child

I found this tutorial: https://devotepress.com/tutorials-hacks/wordpress-coding/how-to-register-sidebars-in-wordpress/

I know I need to register it by dropping code in the functions.php
(Can I use the ‘child’ function.php and just added it to the end, or do I need the entire catch-box-pro functions.php code copied over to my child one??)

This is the code that the tutorial tells me to drop in, but I’m not sure

where and what to change on it.

It will not be a header, but a “before-content-widget”. I tried to edit it but it broke my site until I restored the original functions.php….. so obviously I need help to get the code right?

* Register a widget area.
*/
function register_widget_areas() {
register_sidebar( array(
‘name’ => __( ‘ Header Widget Area’, ‘twentyfifteen’ ),
‘id’ =>’header-1′,
‘description’ => __( ‘Add widgets here to appear in your header.’, ‘twentyfifteen’ ),
‘before_widget’ => ‘
‘, ‘after_widget’ => ‘
‘, ‘before_title’ => ‘
<h2 class=”widget-title”>’, ‘after_title’ => ‘</h2>
‘, ) ); } add_action( ‘widgets_init’, ‘register_widget_areas’ ); ;

Then I don’t know where to drop this:

or how to change it

.

<!–?php if ( is_active_sidebar( ‘header-1’ ) ) : ?–>
<div class=”header-area”></div>

The example is using header so they are dropping it into the header.php…. but I want it above the content area, including above any sidebars. Is this the best way to do this??

[Pratik]

Hi @Glen,
You can just add the functions in your child theme’s functions.php file. And the second part of code, copy your parent theme’s header.php file to child theme and paste that near lien 106 just above <div id="main" class="clearfix">. I think the second part of code is incomplete though as it requires a few more lines. The code in image highlighted in yellow(in the tutorial/link you provided) below the code is complete.

Caution though, improper handling of this task may break your site totally.
Please seek professional help.

Regards,
Pratik

[Glen Pavelich]

I finally accomplished this, but I have another question because I only want this new registered widget on the home page.
My site:
The added widget area is just below the header and contains the 3 images: liqueur glass, jelly tree, jelly

I have the functions.php code as:

// Optional Main Content Sidebar Added
function tgherbs_widgets_init() {

register_sidebar( array(
‘name’ => __( ‘Main Content Widget’, ‘catch-box-pro’ ),
‘id’ => ‘main_content_sidebar’,
‘description’ => __( ‘Main Content Widget’, ‘catch-box-pro’ ),
‘before_widget’ => ‘<section id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => “</section>”,
‘before_title’ => ‘<h2 class=”widget-title”>’,
‘after_title’ => ‘</h2>’,
) );
}
add_action( ‘widgets_init’, ‘tgherbs_widgets_init’ );

And have added it to the header

near lien 106 just above div id=”main” class=”clearfix”

<?php if ( is_active_sidebar( ‘main_content_sidebar’ ) ) : ?>
<div class=”main-content-widget”>
<?php dynamic_sidebar( ‘main_content_sidebar’ ); ?>
</div>
<?php endif; ?>

BUT for catch-box-pro how do I edit the php so it only displays on the home page.

Can you instruct me as to what code to use?

[Pratik]

Hi @Glen,

in header.php, try to add a condition is_front_page(). Your code will look something like:

<?php if ( is_front_page() && is_active_sidebar( 'main_content_sidebar' ) ) : ?>
	<div class="main-content-widget">
		<?php dynamic_sidebar( 'main_content_sidebar' ); ?>
	</div>
<?php endif; ?>

Let me know ow this works out.

Regards,
Pratik

[Glen Pavelich]

Yes, thank you very much that is the code I needed help with, and I appreciate your taking the time to show me how it should look. I learn from this… thank you.
Can you assist with one more thing on this.
I now have the new widget area working, except I cannot get the 3 items within the widget to float left so they are horizontal across the page.
You will see below header how they align vertically. My css doesn’t seem to be working to get the sections to float left.
Thanks
Glen

[Glen Pavelich]

And sorry… I found still one more thing in addition to the previous post I just made.

I have two page branding images… a shorter one for the pages, and a longer one for the home page, but I can’t find a different class or id that allows me to set one for each.

Can you tell me how to set the second one below so it appears only on the pages, and the top so it only appears on the home page?

#page #branding {
width: 1000px;
height: 642px;
background: #000 url(/ThemeTrialWP/wp-content/uploads/2017/02/background2.jpg) no-repeat;

}
#branding {
width: 1000px;
height: 200px;
border: 1px solid #eee;
background: #000 url(/ThemeTrialWP/wp-content/uploads/2017/02/backgroundSmall.jpg) no-repeat;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}

[Pratik]

Hi @Glen,

For widgets,

Please remove your custom code and add following code:

.widget_sp_image {
width: 31.3%;
 float: left;
 clear: none;
 border-bottom: none
}

.main-content-widget {
width: 100%;
 border-bottom: 2px solid #bbb;
}
 
.main-content-widget::after {
   clear: both;
   content: " ";
   display: block;
}

The second post, I do not understand what you mean. You can only add one Featured Image to a post. If you want different images, please hire a customizer.

Regards,
Pratik

[Glen Pavelich]

Sorry, I likely didn’t make that second part of the question clear.

It wasn’t about adding featured images to a post, but adding CSS code for second branding area photo (for the header) …so I could have a larger header image on the home page and a shorter one on all the other pages. I couldn’t find the proper class to grab, but I did figure it out. See code below.

#branding
width: 1000px;
height: 200px;
border: 1px solid #eee;
background: #000 url(/ThemeTrialWP/wp-content/uploads/2017/02/backgroundSmall.jpg) no-repeat;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}

.home #branding {
width: 1000px;
height: 642px;
background: #000 url(/ThemeTrialWP/wp-content/uploads/2017/02/background2.jpg) no-repeat;
}

As to the first question: The code you gave me for the new widget area works perfect, and is exactly what I was looking for help with.
Thank you so much.

The support here at Catch Themes is one of the reasons I use Catch almost exclusively for the WP sites I build.

G

[Glen Pavelich]

Ha! But replacing the header that way makes it non-responsive to devices.
Is there a simple trick to make a background image in the header responsive?

If not, (using appearance/theme options to assign the image)
how do I disable the header for the pages, so it only appears on the home page.
And is there a way to make a different header appear on the pages (other than the home page)?

[Pratik]

Hi Glen,

Catch Box Pro does not have this feature. Maybe you can try Clean Box theme. Demo here.

Or you need to hire a customizer.

Regards,
Pratik

[Glen Pavelich]

Is there a theme with a ‘horizontal’ widget area above or below the content? I see some themes have a widget area ‘BEFORE’ content, but I’m assuming this is a vertical sidebar, or does this in fact mean horizontal?

G

[Pratik]

Hi Glen,

Yo have already been answered in https://catchthemes.com/support-forum/topic/compare-sheet/

Please refrain from posting same question in multiple posts.

Regards,
Pratik

[Author]

Posts