jQuery isn't working in Wordpress

Question

I've created a function in js/custom.js. Basically, it aligns posts for me in wordpress by adding a class of articleAlign, which will insert content to create a greater gap between the title of the article and the excerpt beneath, this is only necessary when the title of the article does not exceed one line, because for titles that take up two lines, it will push the excerpt of the article down. I want a bigger gap between article titles of one line and the excerpt below them, so that the top of the excerpts are all aligned.

CSS

.articleAlign::after {
  display:block;
  height:55px;
  content:"";
}

jQuery

(function($) {
  function articleAlign() {
    titleLength = $('.entry-title').children('a').text().length;
    if(titleLength < 44) {
    $('.entry-title').addClass('articleAlign');
    }
  }
  articleAlign();
})(jQuery);

And of course, here is my enqueue:

wp_enqueue_script('custom-js', get_template_directory_uri() . 
'/js/custom.js', array('jquery'), '1.0.0', true);

Note that I'm passing true for $in_footer so the script is just before the </body> tag. (All on one line in original, in the Wordpress functions.php right beneath the enqueue for js/functions.js.)

Why isn't my class getting added?

Use the debugger built into your browser to set a breakpoint on your call to articleAlign, then step through and examine what's going on in the code as it rights -- does it find the element, does it get the text you expect, what's the length of that text, etc. There's no substitute for debugging. — T.J. Crowder
– T.J. Crowder, Commented Apr 20, 2017 at 4:31
Side note: Your code is falling prey to The Horror of Implicit Globals (disclosure: that's a post on my anemic little blog). You need to declare titleLength. — T.J. Crowder
– T.J. Crowder, Commented Apr 20, 2017 at 4:32
jQuery's text is an odd duck: Unlike all of jQuery's other getters, which only return the relevant value for the first entry in the set, it returns a concatenated string of the text for all the entries in the set. So one possible issue is that there is more than one .entry-title and you're getting more text than you expect. I picked a Wordpress site at random and found it had two .entry-title elements, each with the title, rather than one. So perhaps that's it. (But that site's .entry-title elements didn't have any a in them, so clearly a different design...) — T.J. Crowder
– T.J. Crowder, Commented Apr 20, 2017 at 4:39
So before my function articleAlign, I just have to declare titleLength; just like that? — Zach Broniszewski
– Zach Broniszewski, Commented Apr 20, 2017 at 4:40

T.J. Crowder · Accepted Answer · 2017-04-20 04:49:21Z

2

jQuery's text is an odd duck: Unlike all of jQuery's other getters, which only return the relevant value for the first entry in the set, it returns a concatenated string of all the entries in the set. So one possible issue is that there is more than one .entry-title and you're getting more text than you expect.

Looking at a random Wordpress site, I see that there are two .entry-title elements, not just one, and each of them contains the title. So $(".entry-title").children("a").text() in that case would return a string containing two copies of the title.

If that's what's happening in your case, you can use .eq(0) or .first() to just get the first. Also note that $(".entry-title").children("a") is ore simply written $(".entry-title > a"). So:

if ($(".entry-title > a").eq(0).text().length < 44) {

In a comment you've asked:

Should I loop my function for every article?

If you want this applied to each of them, yes:

(function($) {
    $(".entry-title").each(function() {
        var $this = $(this);
        if ($this.children("a").first().text().length < 44) {
            $this.addClass("articleAlign");
        }
    });
})(jQuery);

edited Apr 20, 2017 at 4:49

answered Apr 20, 2017 at 4:44

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zach Broniszewski Over a year ago

You're awesome dude! Learned a couple new things from you, thanks so much. By the way, I had another function with the same name in a different file that I forgot to take out. But I'm glad you've assisted me. I used the function I made, but I'm going to include the "> a" syntax. Thank you!

Collectives™ on Stack Overflow

jQuery isn't working in Wordpress

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related