H1 and Widgets

[RecipeSocial]

Hi Bill,

I hope you’re well.

When using widgets on the home page, it stops the H1 tag from working when adding to the associated page.
Is there a way to have both widgets and a H1 tag? I know you can add a title to each widgt but then I can’t space it as I need to.

Thanks,
Christian.

[Bill Robbins]

Good Morning Christian,

What you’ll want to do is add the h1 tag to the page and then apply styling to it to make it appear like you want it to. The way you would then style the h1 tags is with this CSS snippet:

.widget h1 {
	font-size: 30px;
	color: #333;
}

You can change font sizes, colors and so on by targeting just the h1 tags that are inside widgets. There won’t be any by default so you should only be targeting the ones you add.

Hope that helps out,
Bill

[RecipeSocial]

Hi Bill,

Thanks for the code. Much Appreciated 🙂

Ideally I need to centralise each heading too, will this code do that?

Regards
Christian.

[Bill Robbins]

It can if you set the text align of that style to center.

Take care,
Bill

[RecipeSocial]

I’ve just tried with <p style=”text-align: center;”>Book Online</p>

But the widget doesn’t save the code for some reason. Or am I missing something?

Thanks,
Christian.

[Bill Robbins]

Which text are you trying to change on your home page? What type of widget are you using for this spot?

[RecipeSocial]

Hi,

I’m using a load of different widgets on the home page sections, 2-7

events, contact, custom ones etc.

http://dev.thalassaseafood.co.uk.gridhosted.co.uk/

Thanks,
Christian.

[RecipeSocial]

What I’m trying to achieve is the same H1 tag as create on an individual page which has been used on the home page.

I just want to have matching H1 tags for each page section on the home page.

as seen on Fifteen.net

Thanks,
Christian.

[Bill Robbins]

You’d probably be better off to hard code something like that into each section of the home page. In the page-home.php file there are several lines like this:

<?php dynamic_sidebar('home-1') ?>

Right above each of those you could add a title for that section. That would look something like this:

<h1 class="page-title">Your Title</h1>

Sometimes you can coerce an item to do something different from how it was intended, but other times you just have to hard code it to get the results you’re after. I think you’ll be best served with hard coding the titles in this case.

[RecipeSocial]

Hi Bill,

I tried your suggestion on the last section for the home page but it hasn’t worked for some reason.

I’m not a coder, so well out of my comfort zone really.

Here’s what i did:

<?php if ( of_get_option( ‘section_7’ ) ) { ?>

<div id=”seven”>

<div class=”section-wrap”>

<?php dynamic_sidebar(‘home-7’) ?>

</div>

<h1 class="page-title">Your Title</h1>

<?php if(of_get_option(‘section_image_7’, $single = true) != “”){ ?>

<style>

div#seven .picture-block {
height: <?php echo of_get_option(‘section_image_height_7’); ?>px;
background-image: url(<?php echo of_get_option(‘section_image_7’); ?>);
}

</style>

<div class=”picture-block”></div>

<div class=”mobile-picture-block”>

” alt=”” />

</div>

<?php } ?>

</div><!– #seven –>

<?php } ?>

<?php get_footer(); ?>

Thanks,
Christian.

[Bill Robbins]

This is the complete block of home 7:

<?php if ( of_get_option( 'section_7' ) ) { ?>

	<div id="seven">
		
		<div class="section-wrap">
			
			<?php dynamic_sidebar('home-7') ?>
		
		</div>
						
		<?php if(of_get_option('section_image_7', $single = true) != ""){ ?>
		
			<style>
			
				div#seven .picture-block {
					height: <?php echo of_get_option('section_image_height_7'); ?>px;
					background-image: url(<?php echo of_get_option('section_image_7'); ?>);  
				}
				
			</style>
			
			<div class="picture-block"></div>
			
			<div class="mobile-picture-block">
			
				<img src="<?php echo of_get_option('section_image_7'); ?>" alt="" />
			
			</div>
		
		<?php } ?>
		
	</div><!-- #seven -->
	
<?php } ?>

adding a title would look like this:

[Author]

Posts