Below, you’ll find a detailed guide on how to add the Custom Site Logo 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 Custom Site Logo Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Custom Site Logo Plugin and the shortcodes it provides:
"Custom Site Logo is a WordPress plugin that allows you to personalize your website's identity. Easily add and style your own logo for a more professional look."
- [csl_display_logo]
Custom Site Logo [csl_display_logo] Shortcode
The Custom Site Logo shortcode is a feature that allows you to display your custom site logo. It retrieves the logo’s details from the plugin’s options. This shortcode fetches the logo image, its URL, dimensions, responsive setting, hover effect, and alignment from the plugin’s options. If the logo image is set and not empty, it is displayed within a div block. If not, an error message prompts you to upload a logo.
Shortcode: [csl_display_logo]
Examples and Usage
Basic example – This shortcode is used to display the custom site logo.
[csl_display_logo /]PHP Function Code
In case you have difficulties debugging what causing issues with [csl_display_logo] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'csl_display_logo', array( $this, 'csl_show_logo' ) );Shortcode PHP function:
function csl_show_logo() {
/* Get Options */
$get_csl_options = get_option('csl_CustomSiteLogo_option_name');
/* Assign Option Values */
$csl_image_field = ( ! empty( $get_csl_options['csl_CustomSiteLogo_image_field'] ) && isset( $get_csl_options['csl_CustomSiteLogo_image_field'] ) ) ? $get_csl_options['csl_CustomSiteLogo_image_field'] : '';
$csl_image_url = isset( $get_csl_options['csl_CustomSiteLogo_custom_url_field'] ) ? $get_csl_options['csl_CustomSiteLogo_custom_url_field'] : '';
$csl_option_width = isset( $get_csl_options['csl_CustomSiteLogo_width_field'] ) ? $get_csl_options['csl_CustomSiteLogo_width_field'] : '';
$csl_option_height = isset( $get_csl_options['csl_CustomSiteLogo_height_field'] ) ? $get_csl_options['csl_CustomSiteLogo_height_field'] : '';
$csl_option_responsive = isset( $get_csl_options['csl_CustomSiteLogo_image_responsive_field'] ) ? $get_csl_options['csl_CustomSiteLogo_image_responsive_field'] : 0;
$csl_option_hover = isset( $get_csl_options['csl_CustomSiteLogo_hover_effect_field'] ) ? $get_csl_options['csl_CustomSiteLogo_hover_effect_field'] : 'none';
$csl_option_center = isset( $get_csl_options['csl_CustomSiteLogo_image_center_field'] ) ? $get_csl_options['csl_CustomSiteLogo_image_center_field'] : 0;
if ( isset( $csl_image_field ) && !empty( $csl_image_field ) ) {
?>
<div class="csl-logo-block" style="<?php if($csl_option_center == 1){ echo esc_attr(('text-align:center')); } ?>">
<a id="csl-logo-block-link" href="<?php if(!empty($csl_image_url)){ echo esc_url($csl_image_url); }else{ echo esc_attr("#"); } ?>">
<img id="csl-customsite-logo" class="csl-customsite-logo <?php echo esc_attr($csl_option_hover); ?>"
src="<?php echo esc_url($csl_image_field); ?>" style=" <?php if(!empty($csl_option_width)){ echo esc_attr('width:'.$csl_option_width.'px;'); } ?>
<?php if(!empty($csl_option_height)){ echo esc_attr('height:'.$csl_option_height.'px;'); } ?>
<?php if($csl_option_responsive == 1){ echo esc_attr('width:100%;max-width:100%;height:auto;'); } ?>" />
</a>
</div><!-- csl-logo-block Ends -->
<?php
} else {
?>
<div class="csl-error" style="text-align: center;">Error! No Logo Upload. Please upload logo : <strong>(Dashboard => Appearence => Custom Site Logo)</strong></div>
<?php
}
}
Code file location:
custom-site-logo/custom-site-logo/public/partials/custom-site-logo-public-shortcodes.phpConclusion
Now that you’ve learned how to embed the Custom Site Logo 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