Support » Theme: Twenty Twenty » Social Media menu missing icons

  • Resolved philhuhn

    (@philhuhn)


    Hey:

    I am using the 2020 theme. In my Social Media menu, I want to add Shutterfly, Nextdoor and an Admin links, but they display as the generic link icon. I could use the FontAwesome icons, but that does not seem to work. Any suggestion?

    Thanks,
    Phil

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    Those particular sites are not supported: http://wp101.net/support/article/twenty-twenty/#add-social-icons

    But, you can add them yourself following the steps at http://make.wordpress.org/core/2020/07/30/themes-field-guide-wordpress-5-5/

    philhuhn

    (@philhuhn)

    Hey James:

    I followed the link and it was circular and took me nowhere.

    Found a bug? Create a ticket in our bug tracker.
    Want to contribute? Get started quickly with our tickets marked as good first bugs for new contributors or join a bug scrub. There’s more on our reports page, like patches needing testing.
    Other questions? We also have a detailed handbook for contributors, complete with tutorials.
    philhuhn

    (@philhuhn)

    Hey I found it. I had to scroll down.

    philhuhn

    (@philhuhn)

    Hey:

    I added the following to my child themes functions.php file, and now the original social media icons do not display. How do I extend, not replace?

    <?php
    /*
    ** Child Twenty Twenty functions and definitions
    */
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
    	wp_enqueue_style( 'parent-style', get_template_directory_uri() .
    		'/style.css' );
    }
    /*
    **
    */
    function childtheme_twentytwenty_social_icons_map( $icons ) {
        $icons = array(
            'admin'      => array( 'localhost' ),
            'nextdoor'   => array( 'nextdoor.com' ),
            'shutterfly'   => array( 'shutterfly.com' ),
        );
    
        return $icons;
    }
    add_filter( 'twentytwenty_social_icons_map', 'childtheme_twentytwenty_social_icons_map' );
     
    function childtheme_twentytwenty_svg_icons_social( $icons ) {
        $icons = array(
            'admin'    	=> '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" d="M7.875 2.292a.125.125 0 00-.032.018A7.24 7.24 0 004.75 8.25a7.247 7.247 0 003.654 6.297c.57.327.982.955.941 1.682v.002l-.317 6.058a.75.75 0 11-1.498-.078l.317-6.062v-.004c.006-.09-.047-.215-.188-.296A8.747 8.747 0 013.25 8.25a8.74 8.74 0 013.732-7.169 1.547 1.547 0 011.709-.064c.484.292.809.835.809 1.46v4.714a.25.25 0 00.119.213l2.25 1.385c.08.05.182.05.262 0l2.25-1.385a.25.25 0 00.119-.213V2.478c0-.626.325-1.169.81-1.461a1.547 1.547 0 011.708.064 8.74 8.74 0 013.732 7.17 8.747 8.747 0 01-4.41 7.598c-.14.081-.193.206-.188.296v.004l.318 6.062a.75.75 0 11-1.498.078l-.317-6.058v-.002c-.041-.727.37-1.355.94-1.682A7.247 7.247 0 0019.25 8.25a7.24 7.24 0 00-3.093-5.94.125.125 0 00-.032-.018l-.01-.001c-.003 0-.014 0-.031.01-.036.022-.084.079-.084.177V7.19a1.75 1.75 0 01-.833 1.49l-2.25 1.385a1.75 1.75 0 01-1.834 0l-2.25-1.384A1.75 1.75 0 018 7.192V2.477c0-.098-.048-.155-.084-.176a.062.062 0 00-.031-.011l-.01.001z"></path></svg>',
            'nextdoor' 	=> '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" d="M11.03 2.59a1.5 1.5 0 011.94 0l7.5 6.363a1.5 1.5 0 01.53 1.144V19.5a1.5 1.5 0 01-1.5 1.5h-5.75a.75.75 0 01-.75-.75V14h-2v6.25a.75.75 0 01-.75.75H4.5A1.5 1.5 0 013 19.5v-9.403c0-.44.194-.859.53-1.144l7.5-6.363zM12 3.734l-7.5 6.363V19.5h5v-6.25a.75.75 0 01.75-.75h3.5a.75.75 0 01.75.75v6.25h5v-9.403L12 3.734z"></path></svg>',
            'shutterfly'	=> '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" d="M2.25 4a.25.25 0 00-.25.25v15.5c0 .138.112.25.25.25h3.178L14 10.977a1.75 1.75 0 012.506-.032L22 16.44V4.25a.25.25 0 00-.25-.25H2.25zm3.496 17.5H21.75a1.75 1.75 0 001.75-1.75V4.25a1.75 1.75 0 00-1.75-1.75H2.25A1.75 1.75 0 00.5 4.25v15.5c0 .966.784 1.75 1.75 1.75h3.496zM22 19.75v-1.19l-6.555-6.554a.25.25 0 00-.358.004L7.497 20H21.75a.25.25 0 00.25-.25zM9 9.25a1.75 1.75 0 11-3.5 0 1.75 1.75 0 013.5 0zm1.5 0a3.25 3.25 0 11-6.5 0 3.25 3.25 0 016.5 0z"></path></svg>',
        );
    
        return $icons;
    }
    add_filter( 'twentytwenty_svg_icons_social', 'childtheme_twentytwenty_svg_icons_social' );
    
    ?>
    raQai

    (@raqai)

    You will most likely need to append the $icons array instead of replacing it.

    This is an assignment:

    $icons = array(
    ...
    );
    // you will only return your custom icons
    return $icons;
    

    You can merge your own icons like so:

    $my_icons = array(
    ...
    );
    // this will merge your $my_icons and the $icons array
    // while also assigning it
    $icons = array_merge($icons, $my_icons);
    // so then you can return the combined (merged) array
    return $icons;

    Also see PHP: array_merge for more information.

    • This reply was modified 2 months ago by raQai.
    • This reply was modified 2 months ago by raQai.
    • This reply was modified 2 months ago by raQai.
    philhuhn

    (@philhuhn)

    Hey, thanks for helping me and the community. The completed functions.php is as follows:

    <?php
    /*
    ** Child Twenty Twenty functions and definitions
    */
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
    	wp_enqueue_style( 'parent-style', get_template_directory_uri() .
    		'/style.css' );
    }
    /*
    ** Add missing social media icons.
    */
    function childtheme_twentytwenty_social_icons_map( $icons ) {
    
        $childtheme_icons = array(
            'admin'      => array( 'localhost' ),
            'nextdoor'   => array( 'nextdoor.com' ),
            'shutterfly' => array( 'shutterfly.com' ),
        );
    
        $icons = array_merge( $icons, $childtheme_icons );
    
        return $icons;
    }
    add_filter( 'twentytwenty_social_icons_map', 'childtheme_twentytwenty_social_icons_map' );
     
    function childtheme_twentytwenty_svg_icons_social( $icons ) {
        $icons_svg = array(
            'admin'    	=> '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" d="M7.875 2.292a.125.125 0 00-.032.018A7.24 7.24 0 004.75 8.25a7.247 7.247 0 003.654 6.297c.57.327.982.955.941 1.682v.002l-.317 6.058a.75.75 0 11-1.498-.078l.317-6.062v-.004c.006-.09-.047-.215-.188-.296A8.747 8.747 0 013.25 8.25a8.74 8.74 0 013.732-7.169 1.547 1.547 0 011.709-.064c.484.292.809.835.809 1.46v4.714a.25.25 0 00.119.213l2.25 1.385c.08.05.182.05.262 0l2.25-1.385a.25.25 0 00.119-.213V2.478c0-.626.325-1.169.81-1.461a1.547 1.547 0 011.708.064 8.74 8.74 0 013.732 7.17 8.747 8.747 0 01-4.41 7.598c-.14.081-.193.206-.188.296v.004l.318 6.062a.75.75 0 11-1.498.078l-.317-6.058v-.002c-.041-.727.37-1.355.94-1.682A7.247 7.247 0 0019.25 8.25a7.24 7.24 0 00-3.093-5.94.125.125 0 00-.032-.018l-.01-.001c-.003 0-.014 0-.031.01-.036.022-.084.079-.084.177V7.19a1.75 1.75 0 01-.833 1.49l-2.25 1.385a1.75 1.75 0 01-1.834 0l-2.25-1.384A1.75 1.75 0 018 7.192V2.477c0-.098-.048-.155-.084-.176a.062.062 0 00-.031-.011l-.01.001z"></path></svg>',
            'nextdoor' 	=> '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" d="M11.03 2.59a1.5 1.5 0 011.94 0l7.5 6.363a1.5 1.5 0 01.53 1.144V19.5a1.5 1.5 0 01-1.5 1.5h-5.75a.75.75 0 01-.75-.75V14h-2v6.25a.75.75 0 01-.75.75H4.5A1.5 1.5 0 013 19.5v-9.403c0-.44.194-.859.53-1.144l7.5-6.363zM12 3.734l-7.5 6.363V19.5h5v-6.25a.75.75 0 01.75-.75h3.5a.75.75 0 01.75.75v6.25h5v-9.403L12 3.734z"></path></svg>',
            'shutterfly'	=> '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" d="M2.25 4a.25.25 0 00-.25.25v15.5c0 .138.112.25.25.25h3.178L14 10.977a1.75 1.75 0 012.506-.032L22 16.44V4.25a.25.25 0 00-.25-.25H2.25zm3.496 17.5H21.75a1.75 1.75 0 001.75-1.75V4.25a1.75 1.75 0 00-1.75-1.75H2.25A1.75 1.75 0 00.5 4.25v15.5c0 .966.784 1.75 1.75 1.75h3.496zM22 19.75v-1.19l-6.555-6.554a.25.25 0 00-.358.004L7.497 20H21.75a.25.25 0 00.25-.25zM9 9.25a1.75 1.75 0 11-3.5 0 1.75 1.75 0 013.5 0zm1.5 0a3.25 3.25 0 11-6.5 0 3.25 3.25 0 016.5 0z"></path></svg>',
        );
    
        $icons = array_merge( $icons, $icons_svg );
    
        return $icons;
    }
    add_filter( 'twentytwenty_svg_icons_social', 'childtheme_twentytwenty_svg_icons_social' );
    
    ?>
Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.