How do I add a class to the logo?

[Matthew MacMillan]

Hi All,

Could anyone explain how would I add a class to header_logo_image in the Jumpstart Stretch Child Theme?
I’m still wrapping my head around hooks, and I’m not even sure that’s where I would start.

Even if you could just point me in the right direction, it would help.

Thanks!

Matt

Topic

[Jason Bobich]

Hello Matt,

What you’re going to do is unhook the theme’s function on the “themeblvd_header_logo” action and then hook on your own function. And for your function, you can use the theme’s current one as a starting point, which you continue to edit. So let’s bread it down into the items that are going to go in your functions.php. —

1) Identify your action hook by looking at the actions map. We can see what we want to target is the “themeblvd_header_logo” action hook.

2) Now remove any current functions hooked there:

/**
 * Remove all actions from themeblvd_header_logo
 */
remove_all_actions( 'themeblvd_header_logo' );

And now you’ll notice there’s no logo on your website at all.

3) Next, you need to create your own function for displaying the logo that’ll you’ll hook on. You can find the current one called “themeblvd_header_logo_default” in /framework/includes/display.php. So copy it to your child theme’s functions.php and change the name to something unique.

/**
 * New function for displaying logo.
 */
function my_header_logo() {

	$option = themeblvd_get_option( 'logo' );
	$classes = 'header_logo header_logo_'.$option['type'];

	if ( $option['type'] == 'custom' || $option['type'] == 'title' || $option['type'] == 'title_tagline' ) {
		$classes .= ' header_logo_text';
	}

	if ( $option['type'] == 'custom' && ! empty( $option['custom_tagline'] ) ) {
		$classes .= ' header_logo_has_tagline';
	}

	if ( $option['type'] == 'title_tagline' ) {
		$classes .= ' header_logo_has_tagline';
	}
	?>
	<div class="<?php echo $classes; ?>">
		<?php
		if ( ! empty( $option['type'] ) ) {
			switch ( $option['type'] ) {

				case 'title' :
					echo '<h1 class="tb-text-logo"><a href="'.home_url().'" title="'.get_bloginfo('name').'">'.get_bloginfo('name').'</a></h1>';
					break;

				case 'title_tagline' :
					echo '<h1 class="tb-text-logo"><a href="'.home_url().'" title="'.get_bloginfo('name').'">'.get_bloginfo('name').'</a></h1>';
					echo '<span class="tagline">'.get_bloginfo('description').'</span>';
					break;

				case 'custom' :
					echo '<h1 class="tb-text-logo"><a href="'.home_url().'" title="'.$option['custom'].'">'.$option['custom'].'</a></h1>';
					if ( $option['custom_tagline'] ) {
						echo '<span class="tagline">'.$option['custom_tagline'].'</span>';
					}
					break;

				case 'image' :

					echo '<a href="'.home_url().'" title="'.get_bloginfo('name').'" class="tb-image-logo">';

					echo '<img src="'.$option['image'].'" alt="'.get_bloginfo('name').'" ';

					if ( ! empty( $option['image_width'] ) ) {
						echo 'width="'.$option['image_width'].'" ';
					}

					if ( ! empty( $option['image_2x'] ) ) {
						echo 'data-image-2x="'.$option['image_2x'].'" ';
					}

					echo '/></a>';

					break;
			}
		}
		?>
	</div><!-- .tbc_header_logo (end) -->
	<?php
}

And now you’ve got the function which you can make whatever edits to you want.

4) And the last step is to put that into place by hooking it to the themeblvd_header_logo action.

/**
 * Add new function to themeblvd_header_logo
 */
add_action( 'themeblvd_header_logo', 'my_header_logo' );

[karlo]

I will bet 25 free themes from .org site someone was thinking of 1 line jQuery code utilizing addClass http://api.jquery.com/addClass/ but ended up with “Nah” 🙂

More important to get native WordPress hook stuff used by Jump Start and everything else but still close to case where short cut is better? Much WordPress stuff collapse with no jQuery so http://jqfundamentals.com/ or what ever. Most of what is useful is also easy.

I recently had a question about how to limit character length of last part of breadcrumbs,”current” part of the “trail”. Could not figure it out by scanning Jump Start, other than “does not seem possible but am I sure???”. jQuery did in in few minutes 🙂 If good or bad I am not sure of but I got what I wanted so that is something.

[Matthew MacMillan]

Yea, I used that exact solution to shore it up so I could keep working. I got stymied on the hook, because that logo area is variable (Site Name | Name & Tag | Logo Image) so I’m not sure what actions to remove and which to keep… I’m still new to hooks.

We’re measuring page loads in milliseconds due to end-users having very limited pipe, so anywhere I can shave load, I am.

Love the challenge though. I’m hoping to see a fully formed page spring forth in 2 seconds on dial-up. Never gonna happen though, WordPress itself is too fat. 🙂

[karlo]

You will enjoy this then https://plus.google.com/+ColtMcAnlis/posts/Yf61Pt3QiU3 or cry. First world web devs. are spoiled. You must think internet physics before anything else. Closely related is server! Rest does not really matter in comparison.

WordPress is not that fat or slower than comparable blog/CMS things (forget about hand coded super fast stuff), more stupid and lacking features 🙂 Like what Plugin Organizer does http://wordpress.org/plugins/plugin-organizer/ or any basic caching plugin. Now you have to do it your self. But fact is most could not care less and majority tend to be what WordPress focus on. Not going to change.

[Author]

Replies