Looking for a simple way to add a custom CSS image class to WordPress thumbnails without adding another <div> or wrapper around them? Maybe you have multiple WordPress loops on one page and you want to be able to style your images separately in each loop. Maybe you just like complete control over your naming conventions.
Follow this simple step and be on your way to customized images in your WordPress loop.
When you add the thumbnail to your loop using the the_post_thumbnail() function, use the #attr parameter as below:
*/ Adding the class "custom-class-name" to the <img> tag /*
the_post_thumbnail( 'small', array('class' => 'custom-class-name' ) );
the_post_thumbnail(#size, #attr) has two parameters available.
This is optional and sets the size of the thumbnail based off of previously defined image sizes in your WordPress functions.php file.
This is where you can add additional data to the <img> tag for the thumbnail. This is not limited to just adding the CSS class, you can add any additional attributes you like to the <img> tag at this point.
Leave a comment and let me know how this works for you or if you have other ideas!
Her content ranks really well in a lot of Google searches. Almost always the images of her mouthwatering food show up in the search results. If I do a “Site Search” of the Google index for her website site:wholemadeliving.com it would return pages and pages of her indexed content along with the little images next to the results.
Her Website Images Disappeared From Search Results
One day, out of the blue I noticed this all changed. Suddenly there were no more images at all for her search results in google. I needed to quickly get to the bottom of this and figure out what happened.
As a parent of three young boys, I have learned the hard way that LEGO’s can be a parent’s worst nightmare. I spend hours picking up LEGO’s and sound like the proverbial TV dad yelling at his kids to pick up their LEGO’s. I have also seen the important lessons that LEGO’s can teach kids.
I have watched all of my boys build unique and imaginative creations for hours and then I watch them cry in horror as their poorly engineered structure comes tumbling down. Then I watch them rebuild it again, maybe a little better next time and so on. All three of them now build very creative LEGO structures and creatures.
We took my oldest son, who was in kindergarten to his school’s science fair, we walked around and looked at all of the cool things the kids had built. On the way out, there was a table set up by the schools LEGO robotics club. We stopped and he watched all of the robots absolutely mesmerized with what he saw.
One of the more important decisions you will make when starting your own blog or website is deciding which web-host you will be using. You have many choices but like anything else in this world, results may vary.
All I can do is give you my opinion on companies that I have used myself and you can follow your own gut on which web-host to pick.
One decision you need to make right now at the beginning is do you want to start out small and then expand in the future or do you just want to go for the gusto and go big from the start?
A WordPress child theme is something absolutely marvelous that you really might want to think about implementing! Do you like to play around with the style of your WordPress site? A WordPress child theme is just the thing for you.
What Is A WordPress Child Theme?
In simple terms, it’s basically a sandbox where you can make all the changes you want without changing the code of the original theme. The original theme is the parent and the new theme is the child.
A child theme is super simple to make and I’ll show you how to get started.
There is a lot of commotion lately about LED’s, they seem to be appearing pretty much everywhere. This is most likely due to the fact that they are very useful, cheap and most importantly to me, just plain fun to work with! I thought I would take a few minutes to explain the difference between a couple different types of LED’s.
Non-Addressable(Cool) VS. Addressable(Very Cool)
There are a lot of options when it comes to buying LED’s and you want to make sure you have the right ones for your project to fulfill the grand vision you had in mind. Let’s start out talking about the way you control the LED’s.
On a recent project for DIY Under Bed LED Lighting I found myself in a bit of a power conundrum. I had a strip of 5V LED lights that required around 7 amps to run at full brightness. I didn’t want two separate power supplies powering the lights and the Arduino UNO and I didn’t want the Arduino powered by a battery and I didn’t want to add a DC to DC converter to boost the voltage. I know, I seem pretty picky here!
Since the Arduino UNO’s absolute minimum input voltage (per the specs) is 6V, how will I get this thing powered off of one single 5V power supply in the simplest way possible?
It seems everyone is jumping on the LED light bandwagon these days so I figured I might as well do it also. I have a few projects that I want to accomplish with LED’s so I am going to document them here. These projects are a work in progress varying from initial concept to in-work and I will update them as I make progress.
My first project is an under-bed LED project for my kid’s loft beds. Earlier this year, I made each of my three kids loft beds with stairs. While these beds are pretty cool, I think they need a little extra zing to make them really really cool! I plan on using an Arduino to control several strips of individually addressable RGB LED lights. Is this overkill? Definitely. Is this more fun than flipping them on with a switch? Definitely.
Project Status: Phase I Complete. Prototype built and beginning to program
My second project is for my wife. She has a blog about food and life at www.WholeMadeLiving.com (feel free to head on over and check it out…I’ll wait….). This site requires lots of photo’s of yummy food which I happily get to eat after the photo sessions. She always tries for natural lighting for the photographs but that doesn’t always work out. She currently has some portable studio fluorescent lights that she uses that get the job done but just don’t do it as well as could be. My goal with this project is to build her some insanely bright (but dimmable) DIY LED photo light panels.
*This project is currently in work and the post is a work in progress. Feel free to check back to see the project as it moves along.
A Great DIY Project For My Kids
This project came to mind after making three pretty darn cool loft beds for my three boys. Click here for the plans I used to build them. I mentioned to the 6 year old that maybe someday we would put some LED lights under them. Well, to a 6 year old someday is the next day. He kept asking and asking so I figured I would make a project for us out of it.
Now an easy way to do it would be to buy an LED strip light kit with a built in controller, stick it up there and voila you are done. The downside of that is that it takes all the fun out of creating something cool and special. I have this project pictured in my mind as an under loft bed lighting project to trump all other under bed lighting projects!
I plan on this being a multi-phase project. Phase one will just be getting the LED’s installed, hooked up to the Arduino and working properly. I will have a simple control panel to allow dimming and a limited number of effects.
With that out of the way, let’s just jump right in and begin!
Get your tools and supplies together
We will be needing quite a few parts and supplies to get this project complete so I’ll go ahead and make a list. This list is what I’m using for one bed, not all three. I am using the first bed as a prototype and then will replicate for the other two beds.
I will be using a few different sources to get the materials. I will typically default to my favorite which is Amazon but also will be using AliExpress for a couple of the parts.
The last thing I want to do is get these all installed and have a Clark Griswold type of moment when I try to turn it on. I will be prototyping this before I attach everything to the bed.
I have measured where I want my lights to go and decided to run four separate 33 inch LED strips. Is this overkill? Absolutely! Since my lights come in a roll of 5 meters or 16.4 feet for us here in the USA, I will have to cut the light strips down to fit.
Luckily, these are designed for this and even have a little picture of scissors to tell you where to cut. Just use a sharp pair of scissors to cut at the cut line between the LED segments. Since the lights I bought have 30 LED’s per meter, this leaves me with 25 LED’s for each 33 inch section.
I plan on running these in parallel as four separate LED strips, each operating from their own digital pin on the Arduino. I think this will give me more control but I will have to find out for sure as I proceed.
WS2812B RGB LED Flexible Strip
The type of flexible LED strip that I’m using has the WS2812B chip, this little chip includes the RGB LED’s as well as the control circuit all in one component. The WS2812B is the chip you see in the photo below with the four soldered contacts. The rest of the flexible light strip is customized around the chip by the manufacturers but they are fairly standard.
The cut lines in the photo above divide the light strip into individually usable pieces. You are cutting between solder-able contact pads that you will use to hook up your project.
Now it’s time to break out the soldering iron and get it warmed up! I will be soldering the wires directly to the end of the LED light strips. Each strip of lights will get three wires soldered to it going to the contacts as listed in the table below.
5 Volts DC (Yours might be 12V if you are using 12 Volts DC)
Digital Input from the Arduino
Digital Output to the next LED in the string
Arduino Proto Shield
I have left plenty of wire to get back to my Arduino once it is mounted on the bed. I will be using a prototype shield to make all of my connections. This is basically a solder-able breadboard that mounts on top of your Arduino. The Arduino can be removed as needed for other projects or to program it.
Many proto shield’s or prototype boards come un-assembled, this means you have to solder the header pins, reset switch and other components on yourself. If you don’t mind spending a few extra dollars you can get one pre-assembled. I prefer to solder them myself, saves money and helps to improve my soldering skills.
Connecting To Your Arduino
For this project, I will be connecting the Digital Input (DI) contacts of the four LED strips to pins 5, 6, 10 and 11 of the Arduino. Why such strange and random pins? I’m glad you asked… There are only 6 pins on the Arduino UNO that use Pulse Width Modulation (PWM) and they did not put these in order.
Everything needs to be powered, the Arduino plus the LED’s. One reason I chose the 5 volt LED’s is because I could use the same power source as the Arduino. Keep in mind that you DO NOT want to power the LED’s directly from the Arduino’s 5V power pin. Even though it’s 5 volts just like you need, the amperage draw of the LED’s would overwhelm the Arduino and you would end up tripping the self resetting fuse.
To remedy this, we will be wiring the 5 volt power supply directly to the prototyping board and then splitting it off from there to the Arduino and to the LED’s.
You want to connect the positive and negative leads of your 5V power supply to your proto board. Make sure you have these separated from each other with enough room to connect additional wires to the adjacent through holes.
Connect the GND wire from each LED strip to a contact on your proto board and make sure that they are either jumpered or there is a soldier bridge connecting them with the GND from your power supply.
Connect the +5V wire from each LED strip to a contact on your proto board and also make sure that they are either jumpered or there is a solder bridge connecting them with the +5V from your power supply.
Now you want to connect the wires coming from the DI on the LED’s to the proper digital pins on the Arduino. I am using pins 5, 6, 10 and 11 for my project. On the proto shield solder them in the through holes adjacent to their pins on the header.
LED Power Requirements
Now to do a little calculating for the amperage requirements… I know from the specifications of my LED’s that they consume about 1.8 Amps per meter when the LED’s are at full brightness. Since I’m using about 3.6 Meters of LED’s I will go ahead and round it up to 4 meters just to give a little bit of cushion.
This means that I will require a total of 7.2 Amps to run all of the LED’s at full brightness. The Arduino itself draws a minimal amperage in the milliamps so I won’t even concern myself with that since I have a decent cushion built in. So, with all that said I will need a 5 volt DC 8 amp power supply.
Powering Your Arduino with 5 Volts DC
Since your Arduino has a 5V and 3.3V output, you might be thinking that you can just supply 5V to the power plug and you will be all ready to roll. Unfortunately this is not correct. The Arduino Uno has a recommended input voltage range between 7-12V and an input voltage limit between 6-20V. Since I will be powering with 5V only, how can this work?