Animated Headline Shortcode

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

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

Animated Headline

"Animated Headline is a dynamic WordPress plugin that adds lively, attention-grabbing headlines to your website. It enhances user engagement and improves overall site aesthetics."

★★★★✩ (7) Active Installs: 4000+ Tested with: 4.9.24 PHP Version: false

Included Shortcodes:

• [animated-headline]

Animated Headline [animated-headline] Shortcode

The Animated-Headline shortcode is a dynamic tool that creates eye-catching animated headlines for your WordPress site. This shortcode allows you to customize the title, animation style, and text. It also includes a cleanse_shortcode_input function to sanitize the input for the animated text. The shortcode then generates a header element with the specified animation class and title text. It also wraps the animated text within a span element for styling purposes. In conclusion, the Animated-Headline shortcode offers a simple yet effective way to add engaging animations to your site’s headlines.

Shortcode: [animated-headline]

Parameters

Here is a list of all possible animated-headline shortcode parameters and attributes:

• title – Sets the non-animated part of the headline text.
• animation – Defines the type of animation to use for the headline.
• animated_text – Specifies the part of the headline that will be animated.

Examples and Usage

Basic example – This shortcode example uses the default ‘rotate-1’ animation and an empty title. The animated text will be ‘Hello, World!’

[animated-headline animated_text='Hello, World!' /]

Advanced examples

Here, the shortcode is used to display a title ‘Welcome to’ with the animated text ‘My Website’. The animation used is ‘rotate-2’.

[animated-headline title='Welcome to' animation='rotate-2' animated_text='My Website' /]

In this example, the shortcode is used to display a title ‘Check out our’ with the animated text ‘Products, Services, Offers’. The animation used is ‘scale’.

[animated-headline title='Check out our' animation='scale' animated_text='Products, Services, Offers' /]

This example shows the shortcode being used with a title ‘Learn’ and the animated text ‘PHP, WordPress, Coding’. The animation used is ‘type’.

[animated-headline title='Learn' animation='type' animated_text='PHP, WordPress, Coding' /]

PHP Function Code

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

Shortcode line:

add_shortcode('animated-headline', array($this, 'render_shortcode'));

Shortcode PHP function:

function render_shortcode($atts){
         // Attributes
         extract( shortcode_atts(
            array(
               'title' => '',
               'animation' => 'rotate-1',
               'animated_text' => '',
            ), $atts )
         );

         $title_text = $title;
         $animation_class = $animation;
         $animat_text  = $this->cleanse_shortcode_input($animated_text);

         // add letters class in $animation_class variable.
         if(($animation_class=="rotate-2")||($animation_class=="rotate-3")||($animation_class=="type")||($animation_class=="scale")){
            $animation_class .= " letters";
         }
         
         $out = '<h1 class="cd-headline '.$animation_class.'"><span> '. $title_text .' </span> ';
         $out .= '<span class="cd-words-wrapper">';
         $out .= $this->animat_text_filter($animat_text);
         $out .= '</span></h1>';

         return $out;
      }

Code file location:

animated-headline/animated-headline/settings.php

Conclusion

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