[Cocoon] How to Add Custom SNS Icons to the Cocoon Theme

2026-08-29

While WordPress’s popular "Cocoon" theme has built-in features to display SNS icons by default, you may sometimes want to add icons for services that aren’t supported out of the box. In this article, I’ll introduce how I used a Cocoon child theme to add custom SNS icons (for BOOTH, Patreon, and Marshmallow).

Prerequisites

Do not edit the Cocoon parent theme; all customizations will be performed using only the Cocoon child theme (functions.php and style.css).

Adding Custom SNS Links to User Profiles

First, we will add custom fields to the WordPress user profile screen where users can enter their BOOTH, Patreon, and Marshmallow URLs. Add the following code to your child theme’s functions.php.

Adding Input Fields to the User Profile Edit Screen

function add_custom_user_profile_field($user) {
    ?>
    <h3>カスタムSNSリンク</h3>
    <table class="form-table">
        <tr>
            <th><label for="patreon">Patreon URL</label></th>
            <td>
                <input type="text" name="patreon" id="patreon" value="<?php echo esc_attr(get_the_author_meta('patreon', $user->ID)); ?>" class="regular-text" />
                <br><span class="description">Patreon のプロフィール URL を入力してください。</span>
            </td>
        </tr>
        <tr>
            <th><label for="booth">BOOTH URL</label></th>
            <td>
                <input type="text" name="booth" id="booth" value="<?php echo esc_attr(get_the_author_meta('booth', $user->ID)); ?>" class="regular-text" />
                <br><span class="description">BOOTH のプロフィール URL を入力してください。</span>
            </td>
        </tr>
        <tr>
            <th><label for="marshmallow">マシュマロ URL</label></th>
            <td>
                <input type="text" name="marshmallow" id="marshmallow" value="<?php echo esc_attr(get_the_author_meta('marshmallow', $user->ID)); ?>" class="regular-text" />
                <br><span class="description">マシュマロ のプロフィール URL を入力してください。</span>
            </td>
        </tr>
    </table>
    <?php
}
add_action('show_user_profile', 'add_custom_user_profile_field');
add_action('edit_user_profile', 'add_custom_user_profile_field');

Saving the Entered URLs

function save_custom_user_profile_fields($user_id) {
    if (!current_user_can('edit_user', $user_id)) {
        return false;
    }
    if (isset($_POST['patreon'])) {
        update_user_meta($user_id, 'patreon', $_POST['patreon']);
    }
    if (isset($_POST['booth'])) {
        update_user_meta($user_id, 'booth', $_POST['booth']);
    }
    if (isset($_POST['marshmallow'])) {
        update_user_meta($user_id, 'marshmallow', $_POST['marshmallow']);
    }
}
add_action('personal_options_update', 'save_custom_user_profile_fields');
add_action('edit_user_profile_update', 'save_custom_user_profile_fields');

Customizing to Display SNS Icons

Next, we will display the added SNS links on the site and apply custom images as icons.

Downloading SNS Icons

Since we are using SNS icons for BOOTH, Patreon, and Marshmallow, download the logos from each official website. Please thoroughly read and follow each site’s guidelines regarding logo usage.

BOOTH: https://www.pixiv.co.jp/news/press-kit/
Patreon: https://www.patreon.com/ja-JP/brand
Marshmallow: https://help.marshmallow-qa.com/–66e2538617c946001d347fd3

Code to Display SNS Icons

Add code to the child theme’s functions.php and style.css to enable displaying your own custom SNS icons.

Adding SNS Follow Buttons

Add the following code to the child theme’s functions.php so that your custom SNS follow buttons can be rendered.

// SNSフォローボタンの出力をフィルタリングしてSNSフォローボタンを追加
function add_patreon_follow_button($content) {
    $user_id = get_the_posts_author_id();
    $patreon_url = get_the_author_meta('patreon', $user_id);
    $booth_url = get_the_author_meta('booth', $user_id);
    $marshmallow_url = get_the_author_meta('marshmallow', $user_id);

    $content .= '"><div class="sns-follow-buttons sns-buttons">';

    if ($patreon_url) {
        $button_html = '<a href="' . esc_url($patreon_url) . '" class="sns-button follow-button patreon-button patreon-follow-button-sq" target="_blank" title="Patreonをフォロー" rel="nofollow noopener noreferrer" aria-label="Patreonをフォロー"><span class="icon-patreon-logo"></span></a>';
        $content .= $button_html;
    }
    if($booth_url) {
        $button_html = '<a href="' . esc_url($booth_url) . '" class="sns-button follow-button booth-button booth-follow-button-sq" target="_blank" title="BOOTHをフォロー" rel="nofollow noopener noreferrer" aria-label="BOOTHをフォロー"><span class="icon-booth-logo"></span></a>';
        $content .= $button_html;
    }
    if ($marshmallow_url) {
        $button_html = '<a href="' . esc_url($marshmallow_url) . '" class="sns-button follow-button marshmallow-button marshmallow-follow-button-sq" target="_blank" title="マシュマロをフォロー" rel="nofollow noopener noreferrer" aria-label="マシュマロをフォロー"><span class="icon-marshmallow-logo"></span></a>';
        $content .= $button_html;
    }
    $content .= '</div "';
    return $content;
}
add_filter('get_additional_sns_follow_button_classes', 'add_patreon_follow_button');

In this approach, we filter the get_additional_sns_follow_button_classes function from Cocoon’s tmp/sns-follow-buttons.php to inject custom SNS buttons. However, this method results in a new <div class="sns-follow-buttons sns-buttons"> being added right above the original <div class="sns-follow-buttons sns-buttons">, making it a slightly forceful approach.

Styling Icons with CSS

Add the following to your style.css to apply the icon images.

.icon-booth-logo {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url('<uploadしたロゴへのパス>') no-repeat center / contain !important;
}
[class*=bc-brand-color] .booth-button {
    --cocoon-sns-color: #FC4D50;
}

.icon-patreon-logo {
    display: inline-block;
    width: 27.4px;
    height: 30px;
    background: url('<uploadしたロゴへのパス>') no-repeat center / contain !important;
}
[class*=bc-brand-color] .patreon-button {
    --cocoon-sns-color: #f96854;
}

.icon-marshmallow-logo {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url('<uploadしたロゴへのパス>') no-repeat center / contain !important;
}
[class*=bc-brand-color] .marshmallow-button {
    --cocoon-sns-color: #F3969A;
}

Note: You may encounter an issue where specifying an image using background-image causes the background-size property to be ignored. To avoid this, use the background shorthand property, which ensures background-size is applied correctly as well.

How to Use

Enter your URLs into the custom SNS link fields created at the bottom of your profile page and save.
Visit a page that displays SNS follow buttons to verify.
If they do not appear, clear your WordPress cache and browser cache.

Conclusion

This successfully adds BOOTH, Patreon, and Marshmallow SNS icons to the Cocoon theme. By creating custom fields in user profiles and displaying the icons on your site, you can easily guide visitors to your pages on each service.

If you know of any plugins or resources that make adding SNS icons or creating custom buttons even easier, please let me know!
Also, any advice on how to align the icons nicely side-by-side would be greatly appreciated.

WordPress, blog management, SEOCocoon,HTTPS,wordpress,plugin,Blog Management

Posted by 納戸工房