salcode / bootstrap-genesis

WordPress Genesis Child Theme setup to use Bootstrap, Sass, and Grunt
MIT License
184 stars 63 forks source link

Add filter to .navbar-brand in primary nav for logo #80

Closed salcode closed 9 years ago

salcode commented 9 years ago

You can see I've added a logo in place of the text for .navbar-brand on http://ironco.de/ image

This involved modifying the theme. In general, this theme is meant to be modified but it seems there are some instances of low hanging fruit where a well-placed filter would allow a common modification (e.g. adding a logo in this area).

salcode commented 9 years ago

With the filter in place, this code should replace .navbar-brand anchor tag which contained the text name of the website with whatever we want. In this case, the Iron Code Studio logo as an SVG wrapped in an anchor tag.

add_filter( 'bsg_navbar_brand', 'ironcode_navbar_brand' );
function ironcode_navbar_brand( $output ) {
    $output = '<a style="padding: 0 15px;" class="" id="logo" title="' .
        esc_attr( get_bloginfo( 'description' ) ) .
        '" href="' .
        esc_url( home_url( '/' ) ) .
        '">';
        $output .= '<img style="width: 104px; height: 46px; margin-top: 3px;" src="http://static.ironcodestudio.com/ironcodestudio.svg" alt="Iron Code Studio">';
    $output .= '</a>';

    return $output;
}
bryanwillis commented 9 years ago

Good idea using a filter instead.

This should work for anyone interested in adding logo option to customizer, although I haven't tested it yet:

// css styling so logo doesn't overflow off the navbar
function bsg_navbar_brand_logo_css() {
    ?>
<style type="text/css">
.navbar-brand >  img {
  object-fit: contain;
  max-height: 100%;
}
</style>
        <?php
}
add_action( 'wp_head', 'bsg_navbar_brand_logo_css' );

// add customizer controls
function bsg_navbar_brand_logo_customize_register( $wp_customize ) {
$wp_customize->add_setting( 'brand_logo', 
         array(
            'default' => '', 
            'type' => 'theme_mod',
            'capability' => 'edit_theme_options',
            'transport' => 'refresh',
         ) 
      );     
$wp_customize->add_control( new WP_Customize_Image_Control(
         $wp_customize, 
         'bsg_brand_logo', 
         array(
            'label' => __( 'Navbar Logo', 'bsg' ),
            'section' => 'title_tagline', 
            'settings' => 'brand_logo',
            'priority' => 10,
         ) 
      ) );
}
add_action( 'customize_register', 'bsg_navbar_brand_logo_customize_register' );

// show logo if added to customizer
function bsg_customizer_add_navbar_brand() { 
    if( get_theme_mod( 'brand_logo') !== '' ) {
    $output = '<a class="navbar-brand" id="logo" href="'. esc_url( home_url( '/' ) ) .'" title="'. esc_attr( get_bloginfo( 'name', 'display' ) ) .'" rel="home" ><img src="'. esc_url( get_theme_mod( 'brand_logo' ) ) .'" alt="'. esc_attr( get_bloginfo( 'name', 'display' ) ) .'"></a>';
    } else {
    $output .= '<a class="navbar-brand" id="logo" title="' .
                esc_attr( get_bloginfo( 'description' ) ) .
                '" href="' .
                    esc_url( home_url( '/' ) ) .
            '">';
    $output .= get_bloginfo( 'name' );
    $output .= '</a>'; 
    }
return $output;
}

// filter default navbar
add_filter( 'bsg_navbar_brand', 'ironcode_navbar_brand' );
function ironcode_navbar_brand( $output ) {
    $output = bsg_customizer_add_navbar_brand();
    return $output;
}

Or just install like this:

https://github.com/bryanwillis/bootstrap-genesis-addons

salcode commented 9 years ago

Very cool stuff @bryanwillis

I made a few changes to the code you have posted above and put it in a gist for future reference (and modification) https://gist.github.com/salcode/5a39e9edc9ad18bc6aeb

This was really cool. I had not played with the customizer previously. Thanks for sharing this.