In this episode, you will walk through the code for this lab. I’ll provide a quick explanation of how the code works. A more thorough explanation, as well as looking into both the Genesis framework and WordPress Core, discussions on clean, quality coding, and why the code works is provided in the Pro version videos below.
Let me introduce the lab to you to what you will be building. Out-of-the-box, the Genesis framework uses a read more link which is inline with the content (at the end of it) and has the following text: [Read more…]. In this lab, you will be doing multiple tasks to show you how to customize the read more link for what your project needs. You will be doing: Move the read more link to a separate line by wrapping it in p tags Change the text from [Read more…] to Continue reading (or whatever you want) Style it to be […]
Let’s put what you learned in Part 3 into action. In this lab, you build multiple custom site header layouts and a utility bar in order to see how easy it is to create child themes with the Genesis framework.
Let’s review what you did here in this lab before you move on Part 4.
Let’s finish up the styling in this episode. You’ll be doing things such as adding a slash between the menu items using the CSS property ::after.
Before we get to styling, let’s add a menu and then some social links into the new Utility Bar widget area. Then you’ll start styling the Utility Bar and its components. Some of the CSS properties that you are using are: display float ::after You will also add in (enqueue it) the Font Awesome library.
Let’s add a utility bar above the site’s title area. In this episode, you and I will build a utility bar. But it’s more than just that, as you can go over to Carrie Dils’ site and get the code. We’ll talk about things like how to think about code construction, where do you register the callback, how is the widget area built, modular code, where to build the code, and more.
Now the HTML structure is correct and the components are in the right order. Let’s start working on the styling. We are going to do something different. Instead of styling in the Genesis Sample child theme, let’s go through the Modern Studio Pro child theme demo that StudioPress provides for you. Don’t worry, as I’ll explain everything. You’ll learn about these CSS properties: background-size background-position background-color margin-top margin Remember with margin and padding, think about the rotation of a clock. You specify the values in a clockwise fashion from the top. Therefore, it’s top to right to bottom to left.
In this layout, let’s keep the logo centered but wrap the primary and secondary navigation around it, i.e. on either side. You’ll write the code to accomplish both the placements in PHP and CSS for styling.
Now the HTML structure is correct and the components are in the right order. Let’s start working on the styling. This time, you will style in the browser but then move those changes into the stylesheet. You’ll learn about how to structure your stylesheet to achieve clean, quality code by keeping it lean and DRY (Don’t Repeat Yourself).