Let me introduce this hands-on code building lab to you. You and I are going to build this lab together. Our goal is to remove the site footer from your Genesis child theme. We’ll build four (4) different implementations which accomplish virtually the same result. We’ll talk about the pros and cons of each strategy and when to use one over the other. It’s best that you do this lab with me. You will learn more when you actually write the code, explore the Genesis framework with me, and see what happens as you make changes. Instead of just watching […]
Let’s remove the default Genesis site footer on the posts’ page, i.e. the home page. In this hands-on lab, you will walk through four (4) different implementations, each of which removes the site footer. You’ll discover the pros and cons of each of these approaches. From this exercise, you’ll be able to select the best approach for your specific needs.
Okay, now it’s time to talk about the sliding animation. You learned the basics of .slideUp() and .slideDown() in Episode 7 of the Introduction to jQuery lab. Let’s explore the options and see what these constructs do to the inline CSS for the elements.
Whoops, I forgot that we need to attach the user defined font icon choices for show and hide indicators. Why? The jQuery script will need to know what class attributes to change, as the user can define them with the shortcode. How will we do it? Let’s use the HTML5 data attribute. Then we’ll adapt the Q&A HTML markup for the teaser markup. Part of this process will be to search schema.org to find the microdata.
The Q&A HTML markup will not use div elements. Instead, W3 specification says that we should the dl grouping content element for “question and answer” type content. Okay, looking at the specification, you will want the container to be a dl, question to be a dt, and answer to be a dd element. You’ll add the styling class attributes using the BEM standard. You’ll embed the PHP variables and then sanitize them. Next, you’ll add the visual indicator, which will be a Dashicons font icon. Let’s look at the different options and discuss variations to fit your needs. You’ll also […]
Our View files will be our native HTML markup with embedded PHP values to import the dynamic content. In clean quality coding, you separate the concerns. That means the HTML is not embedded into your PHP business logic. Instead, you will use View files. In this episode, you and I will think through and architect the HTML for both the Q&A and Teaser shortcodes.
Let’s get you started building custom (from scratch) WordPress plugins. In Part 1 of this series, you are going to build the basics of the Collapsible Content plugin. As you are building it with Tonya, you’ll learn deeply about custom plugin development, file structures, jQuery, PHP, WordPress core, shortcodes, Gulp, and much more.
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.
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.