Below, you’ll find a detailed guide on how to add the Popular Brand Icons – Simple Icons Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Popular Brand Icons – Simple Icons Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Popular Brand Icons – Simple Icons Plugin and the shortcodes it provides:
Popular Brand Icons – Simple Icons
"Popular Brand Icons – Simple Icons is a handy WordPress plugin that offers a vast library of brand logos. Enhance your site's visuals and brand recognition with this easy-to-use tool."
Included Shortcodes:
- [simple_icon]
Simple Icons [simple_icon] Shortcode
The Simple Icons shortcode allows users to display icons on their website. Users can customize the icon’s appearance by specifying the icon slug, color, size, and CSS class. The shortcode fetches the relevant icon from the Simple Icons library. It also allows caching of the icon and inclusion of a title tag inside the SVG. If no name is provided, the output is set to false. Shortcode: [simple_icon]
Shortcode: [simple_icon]
Parameters
Here is a list of all possible simple_icon shortcode parameters and attributes:
name– the slug of the desired icon (for example, ‘facebook’)color– sets the color of the icon (for example, ‘blue’, ‘#fff’)size– defines the size of the icon (for example, ’24px’, ‘1.5rem’)class– applies a custom CSS class to the iconcache– determines if the icon should be cached or nottitle_tag– decides if atag should be included within the SVG</li> </ul> <div style="height:5px" aria-hidden="true" class="wp-block-spacer"></div> <h3 class="wp-block-heading">Examples and Usage</h3> <p><strong>Basic example</strong> – Display a simple icon with the name parameter</p> <pre class="wp-block-code"><code lang="php" class="language-php">[simple_icon name='facebook' /]</code></pre> <p><strong>Advanced examples</strong></p> <p>Display an icon with a specific color and size</p> <pre class="wp-block-code"><code lang="php" class="language-php">[simple_icon name='twitter' color='blue' size='24px' /]</code></pre> <p>Display an icon with a custom CSS class</p> <pre class="wp-block-code"><code lang="php" class="language-php">[simple_icon name='instagram' class='my-custom-class' /]</code></pre> <p>Display an icon without caching it</p> <pre class="wp-block-code"><code lang="php" class="language-php">[simple_icon name='linkedin' cache=false /]</code></pre> <p>Display an icon without the title tag inside SVG</p> <pre class="wp-block-code"><code lang="php" class="language-php">[simple_icon name='youtube' title_tag=false /]</code></pre> <p>In these examples, replace ‘facebook’, ‘twitter’, ‘instagram’, ‘linkedin’, and ‘youtube’ with the name of the icon you want to display. Also, you can replace ‘blue’ with any color you want, ’24px’ with any size you want, and ‘my-custom-class’ with any custom CSS class you want to apply to the icon.</p> <div style="height:5px" aria-hidden="true" class="wp-block-spacer"></div> <h3 class="wp-block-heading">PHP Function Code</h3> <p>In case you have difficulties debugging what causing issues with <code>[simple_icon]</code> shortcode, check below the related PHP functions code.</p> <p><strong>Shortcode line</strong>:</p> <pre class="wp-block-code"><code lang="php" class="language-php">add_shortcode( 'simple_icon', 'simpleicons_shortcode_func' );</code></pre> <p><strong>Shortcode PHP function</strong>:</p> <div class="wp-block-syntaxhighlighter-code "><pre class="brush: php; light: false; title: ; toolbar: true; notranslate" title=""> function simpleicons_shortcode_func($atts) { global $simple_icons_debug; // reset debug $simple_icons_debug = array(); $a = shortcode_atts( array( 'name' => null, // icon slug (ie: facebook) 'color' => false, // (ie: blue, #fff, etc.) 'size' => null, // size of icon (ie: 24px, 1.5rem) 'class' => false, // custom CSS class name 'cache' => true, // cache the icon 'title_tag' => true // <title> tag inside svg ), $atts ); if (isset($a['name'])) { $icon = new SimpleIcons(); $output = $icon->display_single_icon($a); } else { $output = false; } // loop through and output debug messages if (SIMPLE_ICONS_DEBUG && $simple_icons_debug) { foreach ($simple_icons_debug as $message) { $output .= $message; } } return $output; } </pre></div> <p><strong>Code file location</strong>:</p> <pre class="wp-block-code"><code lang="php" class="language-php">simple-icons/simple-icons/simple-icons.php</code></pre> <div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div> <h2 class="wp-block-heading">Conclusion</h2> <p>Now that you’ve learned how to embed the <strong>Popular Brand Icons – Simple Icons Plugin shortcode</strong>, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.</p> </div> <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained"></div> <section class="wp-block-template-part"> <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"> <div class="wp-block-comments"> <h2 class="wp-block-heading">Comments</h2> <div id="respond" class="comment-respond wp-block-post-comments-form"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/simple-icons/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://wpshortcode.org/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p> <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> <p class="form-submit wp-block-button"><input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='1784' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div> </div> </section></main> <footer class="wp-block-template-part"> <div class="wp-block-group has-base-color has-contrast-background-color has-text-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"> <div class="wp-block-group alignwide is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-9 wp-block-group-is-layout-flex" style="padding-top:0"><p style="font-style:normal;font-weight:700;" class="wp-block-site-title has-medium-font-size has-ibm-plex-mono-font-family"><a href="https://wpshortcode.org" target="_self" rel="home">WPShortcode</a></p> <p class="has-text-align-right"> Proudly powered by <a rel="nofollow" href="https://wordpress.org">WordPress</a> and <a href="https://codeless.co" data-type="link" data-id="https://codeless.co">Codeless</a></p> </div> </div> </footer></div> <script src="https://wpshortcode.org/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js?ver=3.0.9b" id="syntaxhighlighter-core-js"></script> <script src="https://wpshortcode.org/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPhp.js?ver=3.0.9b" id="syntaxhighlighter-brush-php-js"></script> <script type='text/javascript'> (function(){ var corecss = document.createElement('link'); var themecss = document.createElement('link'); var corecssurl = "https://wpshortcode.org/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css?ver=3.0.9b"; if ( corecss.setAttribute ) { corecss.setAttribute( "rel", "stylesheet" ); corecss.setAttribute( "type", "text/css" ); corecss.setAttribute( "href", corecssurl ); } else { corecss.rel = "stylesheet"; corecss.href = corecssurl; } document.head.appendChild( corecss ); var themecssurl = "https://wpshortcode.org/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeDefault.css?ver=3.0.9b"; if ( themecss.setAttribute ) { themecss.setAttribute( "rel", "stylesheet" ); themecss.setAttribute( "type", "text/css" ); themecss.setAttribute( "href", themecssurl ); } else { themecss.rel = "stylesheet"; themecss.href = themecssurl; } document.head.appendChild( themecss ); })(); SyntaxHighlighter.config.strings.expandSource = '+ expand source'; SyntaxHighlighter.config.strings.help = '?'; SyntaxHighlighter.config.strings.alert = 'SyntaxHighlighter\n\n'; SyntaxHighlighter.config.strings.noBrush = 'Can\'t find brush for: '; SyntaxHighlighter.config.strings.brushNotHtmlScript = 'Brush wasn\'t configured for html-script option: '; SyntaxHighlighter.defaults['auto-links'] = false; SyntaxHighlighter.defaults['collapse'] = true; SyntaxHighlighter.defaults['pad-line-numbers'] = false; SyntaxHighlighter.defaults['smart-tabs'] = false; SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.defaults['quick-code'] = false; SyntaxHighlighter.all(); // Infinite scroll support if ( typeof( jQuery ) !== 'undefined' ) { jQuery( function( $ ) { $( document.body ).on( 'post-load', function() { SyntaxHighlighter.highlight(); } ); } ); } </script> <script src="https://wpshortcode.org/wp-includes/js/comment-reply.min.js?ver=6.5.3" id="comment-reply-js" async data-wp-strategy="async"></script> <script id="wp-block-template-skip-link-js-after"> ( function() { var skipLinkTarget = document.querySelector( 'main' ), sibling, skipLinkTargetID, skipLink; // Early exit if a skip-link target can't be located. if ( ! skipLinkTarget ) { return; } /* * Get the site wrapper. * The skip-link will be injected in the beginning of it. */ sibling = document.querySelector( '.wp-site-blocks' ); // Early exit if the root element was not found. if ( ! sibling ) { return; } // Get the skip-link target's ID, and generate one if it doesn't exist. skipLinkTargetID = skipLinkTarget.id; if ( ! skipLinkTargetID ) { skipLinkTargetID = 'wp--skip-link--target'; skipLinkTarget.id = skipLinkTargetID; } // Create the skip link. skipLink = document.createElement( 'a' ); skipLink.classList.add( 'skip-link', 'screen-reader-text' ); skipLink.href = '#' + skipLinkTargetID; skipLink.innerHTML = 'Skip to content'; // Inject the skip link. sibling.parentElement.insertBefore( skipLink, sibling ); }() ); </script> <script id="mkaz-code-syntax-prism-js-js-extra"> var prism_settings = {"pluginUrl":"https:\/\/wpshortcode.org\/wp-content\/plugins\/code-syntax-block\/"}; </script> <script src="https://wpshortcode.org/wp-content/plugins/code-syntax-block/assets/prism/prism.js?ver=1697570583" id="mkaz-code-syntax-prism-js-js"></script> </body> </html> <!-- Page cached by LiteSpeed Cache 6.2.0.1 on 2024-05-14 16:15:43 -->