Community Forums › Forums › Archived Forums › Design Tips and Tricks › Add Data Attributes in WordPress, Specifically Text Widgets
- This topic has 8 replies, 2 voices, and was last updated 7 years, 9 months ago by kevmon.
-
AuthorPosts
-
July 26, 2016 at 8:10 am #190208kevmonMember
After searching for hours, I haven't found the answer. Is there a way to add custom attributes to a text widget (and other widgets) for use as JavaScript hooks? I'm using a library called wow.js for animations and can only change certain details by adding data attibutes. I can edit the class using a plugin, but I haven't found one that creates data attributes.
I want this:
<div class="widget-1 widget-first widget-last widget-odd widget-wrap">To look like this:
<div class="widget-1 widget-first widget-last widget-odd widget-wrap slideInLeft" data-wow-duration="2s" data-wow-delay="5s"">I'm kind of new to WordPress, so I'm not really sure yet how to find, or even look for whatever it is I need to filter. I'm guessing it's somewhere in the WP core files...
Any advice? Thanks,
July 26, 2016 at 8:50 am #190215Victor FontModeratorWhat theme are you using?
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?July 26, 2016 at 8:52 am #190216kevmonMemberI'm using Agent Focused Pro
July 26, 2016 at 1:35 pm #190238Victor FontModeratorDoes the data attribute have to be at the widget level or can you just wrap the content in a div that has the attribute?
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?July 26, 2016 at 10:34 pm #190271kevmonMemberPreferably the widget level because that's where I'm inputting the extra class via a widget class plugin. I plan on using this js library in more sites so it would be helpful to know how in general.
Or even better - with data-wow-duration="2s" - I would want to do something like have the value of "2s" be stored globally for that attribute in a variable so I could change the effect site-wide easily.
Thanks
July 27, 2016 at 6:29 am #190289Victor FontModeratorYou'll probably have to do this with jQuery. The text widget is a WordPress feature, not Genesis. I don't know of any way to hook into the widget level code other than jQuery. Maybe you can modify the plugin you're using to add the data attributes, since it's already adding the classes.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?July 28, 2016 at 2:36 am #190361kevmonMemberThanks for the suggestion. I learned a little jQuery and added the following, also enqueuing it in functions.php.
jQuery(document).ready(function($){ $('#text-2').attr("data-wow-duration", "3s" ).attr("data-wow-delay", ".5s" ); $('.post-512>header>h4.entry-title').addClass( "wow fadeInRight" ); $('.post-512>header>h4.entry-title').attr("data-wow-delay", ".5s" ); $('.post-514>header>h4.entry-title').addClass( "wow fadeInLeft" ); $('.post-514>header>h4.entry-title').attr("data-wow-delay", ".5s" ); $('.post-605>header>h4.entry-title').addClass( "wow fadeInRight" ); $('.post-605>header>h4.entry-title').attr("data-wow-delay", ".5s" ); });
July 28, 2016 at 5:10 am #190370Victor FontModeratorNice job. There's one change I recommend. Add the "use strict" directive:
jQuery(document).ready(function($){ "use strict"; $('#text-2').attr("data-wow-duration", "3s" ).attr("data-wow-delay", ".5s" ); $('.post-512>header>h4.entry-title').addClass( "wow fadeInRight" ); $('.post-512>header>h4.entry-title').attr("data-wow-delay", ".5s" ); $('.post-514>header>h4.entry-title').addClass( "wow fadeInLeft" ); $('.post-514>header>h4.entry-title').attr("data-wow-delay", ".5s" ); $('.post-605>header>h4.entry-title').addClass( "wow fadeInRight" ); $('.post-605>header>h4.entry-title').attr("data-wow-delay", ".5s" ); });
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?July 28, 2016 at 6:52 pm #190404kevmonMemberThanks!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.