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).<\/p>\n
functions.php<\/code> and style.css<\/code>).<\/li>\n<\/ul>\n\n
\n<\/div>\nAdding Custom SNS Links to User Profiles<\/h2>\n
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<\/code>.<\/p>\nAdding Input Fields to the User Profile Edit Screen<\/h3>\nfunction add_custom_user_profile_field($user) {\n ?>\n <h3>\u30ab\u30b9\u30bf\u30e0SNS\u30ea\u30f3\u30af<\/h3>\n <table class="form-table">\n <tr>\n <th><label for="patreon">Patreon URL<\/label><\/th>\n <td>\n <input type="text" name="patreon" id="patreon" value="<?php echo esc_attr(get_the_author_meta('patreon', $user->ID)); ?>" class="regular-text" \/>\n <br><span class="description">Patreon \u306e\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb URL \u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/span>\n <\/td>\n <\/tr>\n <tr>\n <th><label for="booth">BOOTH URL<\/label><\/th>\n <td>\n <input type="text" name="booth" id="booth" value="<?php echo esc_attr(get_the_author_meta('booth', $user->ID)); ?>" class="regular-text" \/>\n <br><span class="description">BOOTH \u306e\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb URL \u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/span>\n <\/td>\n <\/tr>\n <tr>\n <th><label for="marshmallow">\u30de\u30b7\u30e5\u30de\u30ed URL<\/label><\/th>\n <td>\n <input type="text" name="marshmallow" id="marshmallow" value="<?php echo esc_attr(get_the_author_meta('marshmallow', $user->ID)); ?>" class="regular-text" \/>\n <br><span class="description">\u30de\u30b7\u30e5\u30de\u30ed \u306e\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb URL \u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/span>\n <\/td>\n <\/tr>\n <\/table>\n <?php\n}\nadd_action('show_user_profile', 'add_custom_user_profile_field');\nadd_action('edit_user_profile', 'add_custom_user_profile_field');<\/pre>\nSaving the Entered URLs<\/h3>\nfunction save_custom_user_profile_fields($user_id) {\n if (!current_user_can('edit_user', $user_id)) {\n return false;\n }\n if (isset($_POST['patreon'])) {\n update_user_meta($user_id, 'patreon', $_POST['patreon']);\n }\n if (isset($_POST['booth'])) {\n update_user_meta($user_id, 'booth', $_POST['booth']);\n }\n if (isset($_POST['marshmallow'])) {\n update_user_meta($user_id, 'marshmallow', $_POST['marshmallow']);\n }\n}\nadd_action('personal_options_update', 'save_custom_user_profile_fields');\nadd_action('edit_user_profile_update', 'save_custom_user_profile_fields');<\/pre>\n\n
\n<\/div>\nCustomizing to Display SNS Icons<\/h2>\n
Next, we will display the added SNS links on the site and apply custom images as icons.<\/p>\n
Downloading SNS Icons<\/h3>\n
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.<\/p>\n
\n- BOOTH<\/strong>: https:\/\/www.pixiv.co.jp\/news\/press-kit\/<\/a><\/li>\n
- Patreon<\/strong>: https:\/\/www.patreon.com\/ja-JP\/brand<\/a><\/li>\n
- Marshmallow<\/strong>: https:\/\/help.marshmallow-qa.com\/–66e2538617c946001d347fd3<\/a><\/li>\n<\/ul>\n
Code to Display SNS Icons<\/h3>\n
Add code to the child theme’s functions.php<\/code> and style.css<\/code> to enable displaying your own custom SNS icons.<\/p>\nAdding SNS Follow Buttons<\/h4>\n
Add the following code to the child theme’s functions.php<\/code> so that your custom SNS follow buttons can be rendered.<\/p>\n\/\/ SNS\u30d5\u30a9\u30ed\u30fc\u30dc\u30bf\u30f3\u306e\u51fa\u529b\u3092\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\u3057\u3066SNS\u30d5\u30a9\u30ed\u30fc\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\nfunction add_patreon_follow_button($content) {\n $user_id = get_the_posts_author_id();\n $patreon_url = get_the_author_meta('patreon', $user_id);\n $booth_url = get_the_author_meta('booth', $user_id);\n $marshmallow_url = get_the_author_meta('marshmallow', $user_id);\n\n $content .= '"><div class="sns-follow-buttons sns-buttons">';\n\n if ($patreon_url) {\n $button_html = '<a href="' . esc_url($patreon_url) . '" class="sns-button follow-button patreon-button patreon-follow-button-sq" target="_blank" title="Patreon\u3092\u30d5\u30a9\u30ed\u30fc" rel="nofollow noopener noreferrer" aria-label="Patreon\u3092\u30d5\u30a9\u30ed\u30fc"><span class="icon-patreon-logo"><\/span><\/a>';\n $content .= $button_html;\n }\n if($booth_url) {\n $button_html = '<a href="' . esc_url($booth_url) . '" class="sns-button follow-button booth-button booth-follow-button-sq" target="_blank" title="BOOTH\u3092\u30d5\u30a9\u30ed\u30fc" rel="nofollow noopener noreferrer" aria-label="BOOTH\u3092\u30d5\u30a9\u30ed\u30fc"><span class="icon-booth-logo"><\/span><\/a>';\n $content .= $button_html;\n }\n if ($marshmallow_url) {\n $button_html = '<a href="' . esc_url($marshmallow_url) . '" class="sns-button follow-button marshmallow-button marshmallow-follow-button-sq" target="_blank" title="\u30de\u30b7\u30e5\u30de\u30ed\u3092\u30d5\u30a9\u30ed\u30fc" rel="nofollow noopener noreferrer" aria-label="\u30de\u30b7\u30e5\u30de\u30ed\u3092\u30d5\u30a9\u30ed\u30fc"><span class="icon-marshmallow-logo"><\/span><\/a>';\n $content .= $button_html;\n }\n $content .= '<\/div "';\n return $content;\n}\nadd_filter('get_additional_sns_follow_button_classes', 'add_patreon_follow_button');<\/pre>\nIn this approach, we filter the get_additional_sns_follow_button_classes<\/code> function from Cocoon’s tmp\/sns-follow-buttons.php<\/code> to inject custom SNS buttons. However, this method results in a new <div class=”sns-follow-buttons sns-buttons”><\/code> being added right above the original <div class=”sns-follow-buttons sns-buttons”><\/code>, making it a slightly forceful approach.<\/p>\n
\nStyling Icons with CSS<\/h4>\n
Add the following to your style.css<\/code> to apply the icon images.<\/p>\n.icon-booth-logo {\n display: inline-block;\n width: 30px;\n height: 30px;\n background: url('<upload\u3057\u305f\u30ed\u30b4\u3078\u306e\u30d1\u30b9>') no-repeat center \/ contain !important;\n}\n[class*=bc-brand-color] .booth-button {\n --cocoon-sns-color: #FC4D50;\n}\n\n.icon-patreon-logo {\n display: inline-block;\n width: 27.4px;\n height: 30px;\n background: url('<upload\u3057\u305f\u30ed\u30b4\u3078\u306e\u30d1\u30b9>') no-repeat center \/ contain !important;\n}\n[class*=bc-brand-color] .patreon-button {\n --cocoon-sns-color: #f96854;\n}\n\n.icon-marshmallow-logo {\n display: inline-block;\n width: 30px;\n height: 30px;\n background: url('<upload\u3057\u305f\u30ed\u30b4\u3078\u306e\u30d1\u30b9>') no-repeat center \/ contain !important;\n}\n[class*=bc-brand-color] .marshmallow-button {\n --cocoon-sns-color: #F3969A;\n}<\/pre>\nNote:<\/strong> You may encounter an issue where specifying an image using background-image<\/code> causes the background-size<\/code> property to be ignored. To avoid this, use the background<\/code> shorthand property, which ensures background-size<\/code> is applied correctly as well.<\/p>\nHow to Use<\/h2>\n\n- Enter your URLs into the custom SNS link fields created at the bottom of your profile page and save.<\/li>\n
- Visit a page that displays SNS follow buttons to verify.<\/li>\n
- If they do not appear, clear your WordPress cache and browser cache.<\/li>\n<\/ol>\n
Conclusion<\/h2>\n
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.<\/p>\n
If you know of any plugins or resources that make adding SNS icons or creating custom buttons even easier, please let me know!
\nAlso, any advice on how to align the icons nicely side-by-side would be greatly appreciated.<\/p>\n","protected":false},"excerpt":{"rendered":"
While WordPress’s popular "Cocoon" theme has built-in features to display SNS icons by default […]<\/p>\n","protected":false},"author":4,"featured_media":1098,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"en_US","_original_post":"https:\/\/donguri3.net\/?p=524","footnotes":""},"categories":[1166],"tags":[164,52,61,179,181],"class_list":["post-4933","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-blog-seo","tag-cocoon","tag-https","tag-wordpress","tag-179","tag-181","en-US"],"_links":{"self":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/4933","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/comments?post=4933"}],"version-history":[{"count":1,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/4933\/revisions"}],"predecessor-version":[{"id":4936,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/4933\/revisions\/4936"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/media\/1098"}],"wp:attachment":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/media?parent=4933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/categories?post=4933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/tags?post=4933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}