Kattene Shortcode

Below, you’ll find a detailed guide on how to add the Kattene 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 Kattene Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the Kattene Plugin and the shortcodes it provides:

Kattene

"Kattene is a user-friendly WordPress plugin designed to enhance website functionality. With its easy installation and seamless integration, Kattene simplifies website management for superior user experience."

✩✩✩✩✩ () Active Installs: 2000+ Tested with: 6.2.3 PHP Version: 5.5

Included Shortcodes:

• [kattene]

Kattene [kattene] Shortcode

The ‘kattene’ shortcode is designed to dynamically display content based on JSON data. It allows customization of the appearance, including the number of sites, image, title, and description. The PHP function ‘kattene_func’ processes the JSON data, applies styling, and returns a formatted HTML string. It also handles the lazy loading of images for optimal performance.

Shortcode: [kattene]

Parameters

Here is a list of all possible kattene shortcode parameters and attributes:

• width – sets the width of the image in pixels.
• height – sets the height of the image in pixels.
• shadow – determines whether the image has a shadow or not.
• no_target_blank – decides if the link opens in a new tab or the same tab.
• custom – allows for the usage of a custom CSS file.

Examples and Usage

Basic example – Display the main site information with default settings.

[kattene]

Advanced examples

Customize the display by specifying the width, height, and shadow options, and prevent the link from opening in a new tab. The data for the sites is passed in JSON format.

[kattene width="200" height="200" shadow="false" no_target_blank="true"]{"sites": [{"main": true, "url": "https://example.com", "label": "Visit Site", "color": "blue"}], "image": "https://example.com/image.jpg", "title": "Site Title", "description": "Site Description"}[/kattene]

Use a custom stylesheet for the display. The stylesheet must be located in the theme’s directory and named ‘kattene-custom.css’.

[kattene custom="true"]{"sites": [{"main": true, "url": "https://example.com", "label": "Visit Site", "color": "blue"}], "image": "https://example.com/image.jpg", "title": "Site Title", "description": "Site Description"}[/kattene]

Display multiple sites. The one marked as ‘main’ will be displayed first. If no site is marked as ‘main’, the first one in the array will be used.

[kattene]{"sites": [{"main": true, "url": "https://example1.com", "label": "Visit Site 1", "color": "blue"}, {"url": "https://example2.com", "label": "Visit Site 2", "color": "red"}], "image": "https://example.com/image.jpg", "title": "Site Title", "description": "Site Description"}[/kattene]

PHP Function Code

In case you have difficulties debugging what causing issues with [kattene] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'kattene', 'kattene_func' );

Shortcode PHP function:

function kattene_func( $args, $content ) {
  $path = plugin_dir_url( __FILE__ );
  wp_enqueue_style( 'kattene', $path . 'style.css');

  $content = str_replace("<br />", "", $content);
  $arr = json_decode($content,true);
  $sites = $arr["sites"];

  $main_tmp = array_filter($sites,
    function($site){
      return isset($site["main"]) && $site["main"];
    }
  );

  if(empty($main_tmp)){
    $main = $sites[0];
  }else{
    $main = array_shift($main_tmp);
  }

  $cnt = count($sites);

  if ($cnt == 1):
      $num_class = "__one";
  elseif ($cnt == 2):
      $num_class = "__two";
  elseif ($cnt == 3):
      $num_class = "__three";
  elseif ($cnt == 4):
      $num_class = "__four";
  elseif ($cnt == 5):
      $num_class = "__five";
  endif;

  $opt = array(
    'width'  => 160,
    'height' => 160,
    'shadow' => true,
    'no_target_blank' => false,
    'custom' => false
  );
  $opt = apply_filters('kattene', $opt);

  if(is_array($args)){
    $args = kattene_convert_str_bool('shadow', $args);
    $args = kattene_convert_str_bool('no_target_blank', $args);
    $opt = array_merge($opt, $args);
  }

  $shadow_str = $opt['shadow'] ? 'class="kattene__shadow" ' : '';

  if($opt['no_target_blank']){
    $target_blank_str = "";
  }else{
    $target_blank_str = ' target="_blank" rel="noopener"';
  }

  if($opt['custom']){
    wp_enqueue_style( 'kattene-custom', get_stylesheet_directory_uri() . '/kattene-custom.css', array('kattene'));
  }

  $lazyloading_str = ' width="'. $opt['width'].'" height="'.$opt['height'].'" loading="lazy"';

  $str = '<div class="kattene">
    <div class="kattene__imgpart"><a'.$target_blank_str.' href="'.$main["url"].'"><img' .$lazyloading_str. ' src="'.$arr["image"].'" '.$shadow_str.'></a></div>
    <div class="kattene__infopart">
      <div class="kattene__title"><a'.$target_blank_str.' href="'.$main["url"].'">'.$arr["title"].'</a></div>
      <div class="kattene__description">'.$arr["description"].'</div>
      <div class="kattene__btns '.$num_class.'">';

  for( $i=0 ; $i<$cnt ; $i++ ){
     $str .= '<div><a class="kattene__btn __'.$sites[$i]["color"].'"'.$target_blank_str.' href="'.$sites[$i]["url"].'">'.$sites[$i]["label"].'</a></div>';
  }

  $str .= '</div></div></div>';

  add_action( 'wp_footer', 'kattene_script' );
  return $str;
}

Code file location:

kattene/kattene/plugin.php

Conclusion

Now that you’ve learned how to embed the Kattene 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.