Making a clickable header

MakeupMartyr
(@makeupmartyr)

8 years, 3 months ago

I have searched the web and the forums extensively and I cannot figure this out.

I’m aware the theme puts the header in the background. I’m aware that making it a logo instead makes it clickable, but then there’s a massive gap between the logo and the navigation bar, and the image is not full size.

I have made the image clickable before, but I had another unrelated issue and got the WSOD and had to completely uninstall and reinstall WordPress, and this was before I learned the glory of child themes, so I’m starting over. Probably for the best, but I digress.

I’m guessing the reason it was clickable in the previous modified version was because I made the ‘site-branding’ section a link? I just know it was something I did in header.php and I think it was actually adding a href=”” somewhere. Adding ‘onclick’ as I’ve seen in many places, has done nothing for me, and I read for many people that if it did work, it made the entire site clickable.

Any ideas? This is my header.php, I really haven’t done anything to it.

`<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <main id=”main”>
*
* @package Sela
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”profile” href=”http://gmpg.org/xfn/11″>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id=”page” class=”hfeed site”>
<header id=”masthead” class=”site-header” role=”banner”>
<a class=”skip-link screen-reader-text” href=”#content” title=”<?php esc_attr_e( ‘Skip to content’, ‘sela’ ); ?>”><?php _e( ‘Skip to content’, ‘sela’ ); ?></a>

<div class=”site-branding”>
<?php sela_the_site_logo(); ?>
<h1 class=”site-title”><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></h1>
<?php if ( ” != get_bloginfo( ‘description’ ) ) : ?>
<h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
<?php endif; ?>
</div><!– .site-branding –>

<nav id=”site-navigation” class=”main-navigation” role=”navigation”>
<button class=”menu-toggle” aria-controls=”menu” aria-expanded=”false”><?php _e( ‘Menu’, ‘sela’ ); ?></button>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) ); ?>
</nav><!– #site-navigation –>
</header><!– #masthead –>

<div id=”content” class=”site-content”>`

Viewing 15 replies - 1 through 15 (of 15 total)

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

8 years, 3 months ago

Can you link to your site? This sounds like a CSS issue:

I’m aware that making it a logo instead makes it clickable, but then there’s a massive gap between the logo and the navigation bar, and the image is not full size.

Thread Starter MakeupMartyr
(@makeupmartyr)

8 years, 3 months ago

Sure, it’s http://www.makeupmartyr.com.

For right now I took the header and logo off completely.

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

8 years, 3 months ago

Sorry, can you clarify the issue you are facing?

Thread Starter MakeupMartyr
(@makeupmartyr)

8 years, 3 months ago

Note: I realized that adding my image as a logo is full size, it was just adjusting for the window size on my screen. Sorry!

Basically, I want to place an image at the top that is my logo. I want to make it clickable. If I do this using Sela’s ‘logo’ upload, it does make it clickable, but it has a great deal of space between the image and the header. I’ll upload the image as a logo again so you can see.

Thread Starter MakeupMartyr
(@makeupmartyr)

8 years, 3 months ago

Still can’t figure out how to get rid of the space between the logo and the main nav bar. Tried messing around in the CSS but I’m certainly not a coding expert, so my trial and error didn’t get me anywhere.
Moderator Kathryn Presner
(@zoonini)

8 years, 3 months ago
Hi there, I can help with this and I’ll reply separately below about the extra space.

I first wanted to let you know that I see a couple of issues in your child theme’s CSS:

http://www.makeupmartyr.com/wp-content/themes/selachild/style.css

– This line is repeated twice – it should only be there once:
```
@import "../sela/style.css";
@import "../sela/style.css";
```
– In the same file, the comments block is also repeated twice, you should remove one:
```
/*
 Theme Name:     Sela Child Theme
 Theme URI:      http://www.makeupmartyr.com/gallery/sela/
 Description:    Sela Child Theme
 Author:         Makeup Martyr
 Author URI:     http://www.makeupmartyr.com
 Template:       sela
 Version:        1.0.0
*/
```
– It looks like you’ve copied the entire stylesheet over into your child theme. You should only put the CSS overrides in your child theme. In other words, only the pieces of CSS that you’re changing go into your child theme.
Moderator Kathryn Presner
(@zoonini)

8 years, 3 months ago
This will remove the extra space below your logo and make it match the amount of space on top of the logo:
```
.site-branding {
  padding-bottom: 0;
}
```
You can add it to your child theme once you’ve sorted out the issues above.
Thread Starter MakeupMartyr
(@makeupmartyr)

8 years, 3 months ago

Hi Kathryn! Thanks so much for the help! So I went back in and deleted anything in the child css I haven’t changed or don’t plan to change. It definitely helped a good deal! And I added your code to fix the spacing, that should have been more obvious to me, I was just flustered with so much coding and all the issues I’ve been having.

I’m fine now with the logo and nav bar spacing. I still have some other issues though.

1) Now my test posts have the date to the left of the posts and the headers lined up with that date. I’d prefer the post and comment section were moved beneath the date OR that the date were to the right of the post. I’d like to make the header/date/content aligned with the featured image, as well. Where would I go to play with the alignment of these?

2) I’d like to expand the content and sidebar to fill more of the space in the background. Where should I go in the code to do that? Would I need to change the width of both columns, the background width as a whole, or their padding?

3) Is there a way to change my featured images to show up as the full image in the post instead of a ‘thumbnail’ that cuts it off?

Thanks again! I’m pulling my hair out over here, you’re a real life saver.
Moderator Kathryn Presner
(@zoonini)

8 years, 3 months ago
That’s quite a lot of rearranging. 🙂

You’ll definitely need some CSS knowledge to make those changes in your child theme. Learning how to target your site’s CSS will help you make certain design and layout changes – here are some good places to boost your CSS skills:

https://dailypost.wordpress.com/2013/07/25/css-selectors/

http://dailypost.wordpress.com/2013/06/21/css-intro/

http://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

https://thewc.co/articles/view/web-inspector-tutorial

https://cssworkshop.wordpress.com/

When changing things like positioning and widths with CSS, be sure to consider and test smaller screens. If you decide to restrict your changes to certain screen sizes, you can learn more about using media queries that target certain screen sizes here:

http://en.support.wordpress.com/custom-design/custom-css-media-queries/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

That should help get you started with your changes.

If you need to rearrange HTML in addition to making CSS changes, look in the content.php file.

3) Is there a way to change my featured images to show up as the full image in the post instead of a ‘thumbnail’ that cuts it off?

The various thumbnail sizes are set in the theme’s functions.php file:
```
// Post thumbnails
	set_post_thumbnail_size( 820, 312, true );
	// Hero Image on the front page template
	add_image_size( 'sela-hero-thumbnail', 1180, 610, true );
	// Full width and grid page template
	add_image_size( 'sela-page-thumbnail', 1180, 435, true );
	// Grid child page thumbnail
	add_image_size( 'sela-grid-thumbnail', 360, 242, true );
	// Testimonial thumbnail
	add_image_size( 'sela-testimonial-thumbnail', 90, 90, true );
```
You can override those dimensions in your child theme.

Depending which one you want to override, you could add something like this to increase the height on the full-width and grid templates:
```
function sela_child_featured() {
  add_image_size( 'sela-page-thumbnail', '1180', '900' );
}
add_action( 'after_setup_theme', 'sela_child_featured', 11 );
```
Thread Starter MakeupMartyr
(@makeupmartyr)

8 years, 3 months ago

Oddly enough, once I cleaned up my CSS and was able to look into it further, most of the issues were resolved! So the only thing I’m trying to accomplish now is fixing the featured image size.

I have created a functions.php but nothing is changing, so I’m assuming I’ve done something wrong or I’m missing something.

I apologize, I haven’t been into coding in soooo long and everything has changed. And this is my first time with WordPress specifically. It’s quite a nice though sometimes overwhelming amount of control! Thank you again!

Moderator Kathryn Presner
(@zoonini)

8 years, 3 months ago

I have created a functions.php but nothing is changing, so I’m assuming I’ve done something wrong or I’m missing something.

No need to apologize!

After changing thumbnail image sizes in functions, you’ll need to either reupload your featured images on static pages (or whichever thumbnails you opted to change) or run the Regenerate Thumbnails plugin. Let me know how it goes!

Thread Starter MakeupMartyr
(@makeupmartyr)

8 years, 3 months ago

I downloaded the Regenerate Thumbnails plugin and ran it twice with no results. I’m going to try deleting and reuploading the images to see if that does it. But I’m guessing that, regardless, the featured images function doesn’t have the ability to just show the image’s true dimensions, so I’ll either have to settle on specs to resize everything to, or make sure every image I set as a featured image is the same size. Is that right?

Moderator Kathryn Presner
(@zoonini)

8 years, 3 months ago

Could you link to a specific page where you want to change the featured image display? The code I gave you above was just an example for full-width and grid templates. The code you need might be different depending which featured images you’re trying to target – Sela has five different types of featured images.

Also let me know what code you put in your child theme so I can take a look. You can paste it here between code tags.

Thread Starter MakeupMartyr
(@makeupmartyr)

8 years, 2 months ago

Sorry for the late reply, had quite a busy week.

Here is an example : http://www.makeupmartyr.com/test-3/

You should be able to see the logo name beneath it but it cuts it off into a pre-determined size. So basically every time I make a blog post, this is what happens.

As far as the code, I made a functions page with the following code, and for now I just put it back to what the Sela default is.

`<?php

/* custom PHP functions below this line */

// Post thumbnails
set_post_thumbnail_size( 820, 312, true );
// Hero Image on the front page template
add_image_size( ‘sela-hero-thumbnail’, 1180, 610, true );
// Full width and grid page template
add_image_size( ‘sela-page-thumbnail’, 500, 500, true );
// Grid child page thumbnail
add_image_size( ‘sela-grid-thumbnail’, 360, 242, true );
// Testimonial thumbnail
add_image_size( ‘sela-testimonial-thumbnail’, 90, 90, true );
?>`
Moderator Kathryn Presner
(@zoonini)

8 years, 2 months ago
OK, let’s look at two things:

As far as the code, I made a functions page with the following code, and for now I just put it back to what the Sela default is.

If you’re not adding a custom function – like the one I provided above – I’d suggest you remove those functions from your child theme, as they aren’t needed. A child theme first loads the parent’s functions.php, and then adds the functions from the child theme. Having duplicate functions in both files may cause issues.

Next, put this function in your child theme:
```
function sela_child_featured() {
    set_post_thumbnail_size( '820', '800', false );
}
add_action( 'after_setup_theme', 'sela_child_featured', 11 );
```
That should override the default height on the featured image on new images you upload add going forward.

If you want to automatically resize previously uploaded images, you’ll need to run a plugin like Regenerate Thumbnails.

Let me know how it goes.

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘Making a clickable header’ is closed to new replies.

Tags