Below, you’ll find a detailed guide on how to add the Easy Social 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 Easy Social Icons Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Easy Social Icons Plugin and the shortcodes it provides:
"Easy Social Icons is a user-friendly WordPress plugin that lets you add and manage customizable social media icons. It enhances your website's social media integration for improved online presence."
- [cn-social-icon]
Easy Social Icons [cn-social-icon] Shortcode
The Easy Social Icons plugin shortcode, cn_social_icon, dynamically displays social media icons. It fetches the icon details from the database, applies custom styling, and generates an unordered list of clickable icons that link to the respective social media pages.
Shortcode: [cn-social-icon]
Parameters
Here is a list of all possible cn-social-icon shortcode parameters and attributes:
attr_id– Unique identifier for the social icon.attr_class– CSS class to style the social icon.selected_icons– Array of selected social icons to display.width– Defines the width of the social icon.height– Sets the height of the social icon.margin– Sets the margin around the social icon.display– Determines the orientation (vertical or horizontal) of the icons.alignment– Aligns the social icons left, center, or right.
Examples and Usage
Basic example – The following shortcode displays social icons by using the default settings configured in the plugin’s options.
[cn-social-icon /]Advanced examples
Displaying specific social icons by referencing their IDs. In this case, the icons with the IDs 1, 2, and 3 will be displayed.
[cn-social-icon selected_icons="1,2,3" /]Adjusting the width and height of the social icons. This example will display the icons with a width of 50px and a height of 50px.
[cn-social-icon width="50" height="50" /]Displaying the social icons in a horizontal layout with a right alignment. The ‘display’ attribute controls the layout (vertical or horizontal) and the ‘alignment’ attribute controls the alignment (left, center, or right).
[cn-social-icon display="horizontal" alignment="right" /]Adding custom CSS ID and class to the social icons. This example adds a CSS ID of ‘custom-id’ and a CSS class of ‘custom-class’ to the icons.
[cn-social-icon attr_id="custom-id" attr_class="custom-class" /]PHP Function Code
In case you have difficulties debugging what causing issues with [cn-social-icon] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('cn-social-icon', 'cn_social_icon');Shortcode PHP function:
function cn_social_icon($attr = array(), $call_from_widget = NULL) {
global $wpdb, $cnssBaseURL;
$image_file_path = $cnssBaseURL;
$attr_id = isset($attr['attr_id'])?$attr['attr_id']:'';
$attr_class = isset($attr['attr_class'])?$attr['attr_class']:'';
$where_sql = "";
if(isset($attr['selected_icons']))
{
if(is_string($attr['selected_icons'])) {
$attr['selected_icons'] = preg_replace('/[^0-9,]/','',$attr['selected_icons']);
$attr['selected_icons'] = explode(',', $attr['selected_icons']);
}
if(is_array($attr['selected_icons']) && !empty($attr['selected_icons'])) {
$placeholder = implode(', ', array_fill(0, count($attr['selected_icons']), '%d'));
$where_sql .= $wpdb->prepare("AND `id` IN({$placeholder})", $attr['selected_icons']);
}
}
$cnss_width = isset($attr['width'])?$attr['width']:esc_attr(get_option('cnss-width'));
$cnss_height = isset($attr['height'])?$attr['height']:esc_attr(get_option('cnss-height'));
$cnss_margin = isset($attr['margin'])?$attr['margin']:esc_attr(get_option('cnss-margin'));
$cnss_rows = esc_attr(get_option('cnss-row-count'));
$vorh = isset($attr['display'])?$attr['display']:esc_attr(get_option('cnss-vertical-horizontal'));
$text_align = isset($attr['alignment'])?$attr['alignment']:esc_attr(get_option('cnss-text-align'));
// settings for font-awesome icons
$icon_bg_color = cnss_get_option('cnss-icon-bg-color');
$icon_color = cnss_get_option('cnss-icon-color');
$icon_hover_color = cnss_get_option('cnss-icon-hover-color');
$icon_shape = cnss_get_option('cnss-icon-shape');
$cnss_original_icon_color = cnss_get_option('cnss-original-icon-color');
$table_name = $wpdb->prefix . "cn_social_icon";
$sql = $wpdb->prepare("SELECT * FROM `{$table_name}` WHERE `image_url` != '' AND `url` != '' $where_sql ORDER BY `sortorder`");
$icons = $wpdb->get_results($sql);
$icon_count = count($icons);
$li_margin = round($cnss_margin/2);
ob_start();
echo '<ul id="'.esc_attr($attr_id).'" class="cnss-social-icon '.esc_attr($attr_class).'" style="text-align:'.esc_attr($text_align).';">';
$i=0;
foreach($icons as $icon)
{
$aStyle = '';
$liClass = 'cn-fa-'.cnss_format_title($icon->title);
$aClass = '';
$liStyle = ($vorh == 'horizontal') ? 'display:inline-block;' : '';
$aTarget = ($icon->target ==1 ) ? 'target="_blank"' : '';
if ( !cnss_is_image_icon($icon->image_url) ) {
$liClass .= " cn-fa-icon ";
$aPadding = round($cnss_width/4);
$aWidth = $cnss_width + $aPadding*2;
$aHeight = $aWidth;
$aStyle .= "width:{$aWidth}px;";
$aStyle .= "height:{$aHeight}px;";
$aStyle .= "padding:{$aPadding}px 0;";
$aStyle .= "margin:{$li_margin}px;";
$aStyle .= "color: {$icon_color};";
if ($cnss_original_icon_color == '1') {
$aClass = cnss_format_class($icon->image_url);
} else {
//$aStyle .= "background-color:{$icon_bg_color};";
}
if ($icon_shape == 'circle') {
$borderRadius = '50%';
} elseif ($icon_shape == 'round-corner') {
$borderRadius = '10%';
} else {
$borderRadius = '0%';
}
$aStyle .= "border-radius: {$borderRadius};";
}
?><li class="<?php echo $liClass; ?>" style="<?php echo $liStyle; ?>"><a class="<?php echo $aClass; ?>" <?php echo $aTarget ?> href="<?php echo $icon->url ?>" title="<?php echo $icon->title ?>" style="<?php echo $aStyle ?>"><?php echo cnss_get_icon_html($icon->image_url, $icon->title, $cnss_width, $cnss_height, $li_margin); ?></a></li><?php
$i++;
}
echo '</ul>';
$out = ob_get_contents();
ob_end_clean();
return $out;
}
Code file location:
easy-social-icons/easy-social-icons/easy-social-icons.phpConclusion
Now that you’ve learned how to embed the Easy Social Icons Plugin shortcode, 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.
Leave a Reply