Because you could use theoretically any theme for this course, and you're creating new data sets, you need to make sure they look nice when you display them with the rest of your theme. In this video, add a bit of CSS based on the CSS classes you added earlier to make sure that don’t look out of place on the front-end of your website.
- [Instructor] With our custom fields properly displaying, … let's add a bit of CSS to make them look nice. … We're going to talk through the CSS … which you can find in the style.css in the Exercise Files. … So we'll go ahead and copy this … and paste it into our child CSS file. … You'll notice that we're targeting classes that we've added, … so we want to style our location … by giving it a border, … increasing the font-size, … and adding some margin and padding. … We're doing the same thing … with our profile-friends unordered list. … We are removing the list-style-type … so bullets don't show up, … and we're using flexbox to display friends in a nice grid. … You'll also notice that we don't have specific stylings … for the profile-description. … Again, because that is a WYSIWYG editor, … all of the formatting can be done … right from the WordPress dashboard. … Let's go ahead and save this file, … and then, if we go back to the front end and refresh, … you'll notice our location is bigger. …
- What are custom fields?
- Creating field groups
- Adding content to fields
- Displaying fields on a child theme
- Creating and displaying repeater fields
- Creating a submission form
- Creating a Gutenberg block with PHP only
- Writing rules for field display
- Organizing fields
- Exporting field groups
Skill Level Advanced
1. Getting Started with ACF
2. Creating Field Groups with ACF
Field types overview3m 48s
3. Displaying Your Fields
4. Working with Data in ACF
5. Creating a Gutenberg Block
6. Cleaning Up the Admin
Next steps1m 13s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.