Every now and then, I have a need to target a specific text widget or image widget in a WordPress sidebar. For example, I have a site that uses a text widget to display some html code at the top of the sidebar and I need to give it a certain background color.
By default, WordPress gives each text widget its own id, but the problem is that if you accidentally delete the widget, the id will change. So, targeting by id is out.
There are a couple of other ways to target the widget. I could use CSS pseudo selectors like “first-child” and “nth-child”, but, of course, then I run into IE8 issues with my behind-the-times friends.
So, I use jQuery’s eq() method.
Here is how the code looks:
$('#myID .text-widget').eq(0).addClass('first-child-of-myID'); $('#myID .text-widget').eq(1).addClass('second-child-of-myID');
I know that you CSS purists are cringing, and that’s okay. 😉
More posts from themightymo.com
GoDaddy owns ManageWP, and, strangely, they make it very difficult to add GoDaddy-managed WordPress sites to their ManageWP service. Thankfully, there’s a quick workaround: Visit https://yoursite.com/wp-admin/plugins.php?showWorker=1 — This will make the ManageWP “Worker” plugin visible. Copy the connection info from the ManageWP Worker plugin. Add the site per-normal on ManageWP. That’s it! I hope this…
I realized this morning that my TMM Maintenance Mode WordPress plugin had a bug that was causing the wp-login.php page to be inaccessible. The solution was to write a simple function that checks whether or not we’re currently on a login page, and then add a call to that function in my code. Here’s the…
Today I updated a WooCommerce site, and everything worked fine, except for the images on product pages – they were not displaying at all. After a lot of trial & error, I realized that WP Rocket was to blame. I’m not sure exactly what the issue was (though my hunch is that it had to…