Adding another social media icon to wordpress header

1 Views

I’m new to modifying php files in wordpress. I need to add another social media icon (houzz) to my header that is not included in the template. I have found the correct file and the code but I cannot seem to get houzz to show. Any help is greatly appreciated. here is the code: 

<?php 
                if( has_nav_menu( 'social-menu' ) ){

                    // #social-menu
                    mfn_wp_social_menu();

                } else {

                    $target = mfn_opts_get('social-target') ? 'target="_blank"' : false;

                    echo '<ul class="social">';

                        if( mfn_opts_get('social-skype') ) echo '<li class="skype"><a '.$target.' href="'. mfn_opts_get('social-skype') .'" title="Skype"><i class="icon-skype"></i></a></li>';
                        if( mfn_opts_get('social-facebook') ) echo '<li class="facebook"><a '.$target.' href="'. mfn_opts_get('social-facebook') .'" title="Facebook"><i class="icon-facebook"></i></a></li>';
                        if( mfn_opts_get('social-googleplus') ) echo '<li class="googleplus"><a '.$target.' href="'. mfn_opts_get('social-googleplus') .'" title="Google+"><i class="icon-gplus"></i></a></li>';
                        if( mfn_opts_get('social-twitter') ) echo '<li class="twitter"><a '.$target.' href="'. mfn_opts_get('social-twitter') .'" title="Twitter"><i class="icon-twitter"></i></a></li>';
                        if( mfn_opts_get('social-vimeo') ) echo '<li class="vimeo"><a '.$target.' href="'. mfn_opts_get('social-vimeo') .'" title="Vimeo"><i class="icon-vimeo"></i></a></li>';
                        if( mfn_opts_get('social-youtube') ) echo '<li class="youtube"><a '.$target.' href="'. mfn_opts_get('social-youtube') .'" title="YouTube"><i class="icon-play"></i></a></li>';                      
                        if( mfn_opts_get('social-flickr') ) echo '<li class="flickr"><a '.$target.' href="'. mfn_opts_get('social-flickr') .'" title="Flickr"><i class="icon-flickr"></i></a></li>';
                        if( mfn_opts_get('social-linkedin') ) echo '<li class="linkedin"><a '.$target.' href="'. mfn_opts_get('social-linkedin') .'" title="LinkedIn"><i class="icon-linkedin"></i></a></li>';
                        if( mfn_opts_get('social-pinterest') ) echo '<li class="pinterest"><a '.$target.' href="'. mfn_opts_get('social-pinterest') .'" title="Pinterest"><i class="icon-pinterest"></i></a></li>';
                        if( mfn_opts_get('social-dribbble') ) echo '<li class="dribbble"><a '.$target.' href="'. mfn_opts_get('social-dribbble') .'" title="Dribbble"><i class="icon-dribbble"></i></a></li>';
                        if( mfn_opts_get('social-instagram') ) echo '<li class="instagram"><a '.$target.' href="'. mfn_opts_get('social-instagram') .'" title="Instagram"><i class="icon-instagram"></i></a></li>';
                        if( mfn_opts_get('social-behance') ) echo '<li class="behance"><a '.$target.' href="'. mfn_opts_get('social-behance') .'" title="Behance"><i class="icon-behance"></i></a></li>';
                        if( mfn_opts_get('social-vkontakte') ) echo '<li class="vkontakte"><a '.$target.' href="'. mfn_opts_get('social-vkontakte') .'" title="VKontakte"><i class="icon-vkontakte"></i></a></li>';
                        if( mfn_opts_get('social-viadeo') ) echo '<li class="viadeo"><a '.$target.' href="'. mfn_opts_get('social-viadeo') .'" title="Viadeo"><i class="icon-viadeo"></i></a></li>';
                        if( mfn_opts_get('social-xing') ) echo '<li class="xing"><a '.$target.' href="'. mfn_opts_get('social-xing') .'" title="Xing"><i class="icon-xing"></i></a></li>';
                        if( mfn_opts_get('social-rss') ) echo '<li class="rss"><a '.$target.' href="'. get_bloginfo('rss2_url') .'" title="RSS"><i class="icon-rss"></i></a></li>';
                    echo '</ul>';

                }
            ?>
Post Views: 1

Related posts

2 comments

  1. Create A Child Theme

    First things first. When editing theme files its always best to use a child theme.

    From the WordPress Codex

    A child theme is a theme that inherits the functionality and styling
    of another theme, called the parent theme. Child themes are the
    recommended way of modifying an existing theme.

    Once you’ve created and activated your child theme you can copy the template you need to edit into your child theme (keep the folder structure of your theme if the template files is not in the root of your theme)

    Editing your template file

    Since the mfn_opts_get('social-houzz') option does not exist you’ll need to just insert the html you want to add for your social icon like so.

    <?php 
    if( has_nav_menu( 'social-menu' ) ){

        // #social-menu
        mfn_wp_social_menu();

    } else {

        $target = mfn_opts_get('social-target') ? 'target="_blank"' : false;

        echo '<ul class="social">';

            if( mfn_opts_get('social-skype') ) echo '<li class="skype"><a '.$target.' href="'. mfn_opts_get('social-skype') .'" title="Skype"><i class="icon-skype"></i></a></li>';
            // Other social icons

            // Your custom icon.
            echo '<li class="houzz"><a '.$target.' href="link_to_houzz" title="Houzz"><i class="icon-houzz"></i></a></li>';

        echo '</ul>';

    }
?>

    Add CSS

    Now that you have a li with the class houzz you’ll need to add CSS for it. This should also be done in the child theme and not the main theme’s stylesheet. Look in your theme’s stylesheet for one of the other social icons and copy the css for it (li.skype for example) to your child theme’s stylesheet. Then replace “skype” with houzz. You’ll also need to edit your new icon-houzz class with a new icon or the skype icon will be used.

    Note: If you provide a link to the theme you’re using I could provide more specific instructions. My instructions were written going solely off the code sample you provided.

  2. This is bad practice and I’m not recommending you do this but this is an answer that just removes the PHP and replaces it with pure HTML. You now need to add in the appropriate href values and ensure you style the houz icon using CSS. This method will break any content management functionality and you will only be able to update this part of the header manually.

    <ul class="social">
    <li class="facebook"><a href=""><i class="icon-facebook"></i></a></li>
    <!-- add more icons here... -->
    <!-- your custom icon below -->
    <li class="houz"><a href=""><i class="icon-houz"></i></a></li>
</ul>

Comments are closed.