Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Images are an important part of what makes WordPress so great. If you go check out the markup image alignment post inside the theme unit test data, you'll see examples of how you can add images in different ways inside a WordPress theme and you'll see just why. Images in Word Press are so fun to work with because out of the box, Word Press allows you to add images anywhere you want in your content and enables you to align the images in the way that you want and also add captions to the images and you can even add image galleries.
When you look at this post, you'll realize that underscores actually does pretty much all the work for you, right out of the box. The image alignments were great. Here we have a central line image, we have the left aligned image, which we also messed with a little bit in the previous movie. We used to have a no alignment image down here but then I changed it to a left-aligned image, and we have a right-aligned image. But if you scroll further down, you also get another type of image and these are the images that have captions on them. And you see that underscores styles the captions for the images in a very plain way.
An image with a caption has a box around it and then the caption appears below the image in the middle. Here you see I have a captioned imaged, and then when you scroll down, you have another one. And this is when you start seeing that there's an issue with the boxed captioning because this captioning is using percentage widths. So you see that, although the captioning box looks great on this large image, it looks really strange on the smaller one, and you'll also see that the caption text spans all the way to the edge. We need to do some work.
Now, if you're used to working with WordPress or you've tried to experiment with the captioning for images previously, you may have been really frustrated because it was impossibly to get rid of this border around here unless you went in and made big changes to the overall code and created a custom function. Well that's no longer the case, as of WordPress 3.9, the captioning no longer has that forced padding around it. So you don't have to deal with that any more. You can simply go in and style captioning just like you would with any other element.
If we go to the style.css file and search for caption. You'll find the section where we have the captioning. And here we have the default caption styling that comes with underscores. So we have a border around the image with a caption on it. And then you see that the max width of the image is set to 98% of the border, so the image is basically squished in to make room for that border around and this also that percentage width that causes the problem I was talking about. What I want to do instead is I want the captioning to be flushed with the width of the image and I want it to be a dark bar that just appears underneath the image because that's a design I like.
I want to specifically show you this so that you get the idea that this is something you can do because it was previously almost impossible. If you go to the code snippets for this movie, you'll see here I have redefined some of the rules that apply to captioning. I've basically stripped off the border that goes around the images, and also removed that variable margin around the images and I've added a new style down here, called .WP caption. WP caption text that has a dark background, sets the font family to Lato and also adds some padding so we never have a situation where the texts spans all the way to the edges.
So now I'm going to copy out this stack of styles here and I'll replace .WP caption text all the way up to just WP caption. So what we're doing here is making some very subtle changes to the existing styling, mainly down here in WP caption text. I can save this now and go back to my browser and when I reload, you'll see we now have a completely different style of captioning for our images. The captioning spans to full width of the image, but there is no border around it and it has a subtle gray background and then we have a text in a different color.
And this is something that from a design perspective, I think is really important. If you're going to add captioning, it needs to be visually different from the rest of the content on the page, and that's exactly what we've done here. So now that you've seen how easy it is to work with the captioning, and you've seen that you can now make these full bleed, edge to edge captions that don't require borders around, I want you to experiment with the captioning of the images and see what happens when you make changes to the styles I provided to you.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.