I have Lettering.js enqueued on a WAMP-hosted WordPress theme I’m developing. I’m pretty sure it’s registering because calling this function in my js init throws no error:

style_title = (function($){
    $(document).ready( function(){
        $(".fancy-title").lettering('words');
    });
});

However, the text with that class isn’t being broken up into words, as it should. I suspect this has something to do with the fact that it’s contents aren’t explicitly written in the HTML, but are returned by WordPress’s bloginfo() function, like so (from header.php):

<h1 class="site-title"><a class="fancy-title" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

Am I missing something here? If not, what’s the most efficient solution to this issue? Do I parse the title into an array of strings and then iterate through the array to generate the text of the link broken up into s? I’m hesitant to do this, because it adds non-semantic complexity and makes lettering.js redundant–which is a shame, because I wanted to play with it’s letter-styling capabilities too.

I’m learning as I go, so I apologize if this is a rookie mistake. Thanks in advance for the help!

Read more here: Applying lettering.js method to heading called with WordPress bloginfo("name")


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: