Out-of-the-box, WordPress does not provide the editor or a means to render the contents from the page that is assigned to the Posts Page. Adding a blog introduction before all of the posts are rendered improves the user experience, allowing your … [Read more...]
Search Results for: Genesis
Labs - Hands-on code building projects
Genesis Version – Ensure Your Latest Changes Go Out to the Browser
Every time you make a change in an asset, such as the stylesheet or JavaScript file, you need to change your version. Why? Because browsers can cache a local copy of those files to help speed up the page loading on subsequent visits to a web page. … [Read more...]
Overview of the Genesis Framework – Developer’s Guide to Customizing Genesis
In this hands-on lab, you will be introduced to the Genesis framework, its file structure, codebase, and developer-friendly customization features. You'll walk through its source code and be introduced to the Genesis-way. You'll learn about why the … [Read more...]
Header Components – Developer’s Guide to Customizing Genesis
This lab is Part 3 of the Developer's Guide to Customizing Genesis series. In this lab, you will be learning how to customize the header component within the Genesis framework, which includes site header, logo/title area, header right, and … [Read more...]
The Loop – Developer’s Guide to Customizing Genesis
The Loop is a vital component in WordPress, as it handles building and rendering out the content onto the page. The Genesis framework handles the loop for you, as well as providing you with the hooks you need to customize each theme for your client. … [Read more...]
Markup & Wraps – Developer’s Guide to Customizing Genesis
This lab is Part 2 of the Developer's Guide to Customizing Genesis series. Before you can dig into the components, first you need to understand how Genesis handles the HTML markup attributes, switching between HTML5 and pre-HTML5, and structural … [Read more...]
Adding Google Fonts to Your WordPress Website
Adding Google Fonts into your WordPress website is a two-step process, which requires you to add CSS and PHP to your theme or plugin. Many people forget to do one of the steps. In this hands-on lab, you will write the code while I walk you through … [Read more...]
Customizing the Genesis Site Header
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. This lab is Part 4 of the … [Read more...]
Customizing the Read More Link in Genesis
The Genesis framework defaults to a standard read more link which looks like [Read more...]. But what if you want to read Continue reading, Learn more, or whatever? What if you want it to be on a separate line in its own paragraph? What if you want … [Read more...]
Adding and Removing Structural Wraps in Genesis
In the Genesis framework, structural wraps give you further styling control and containment of your content, as it wraps your content in a <div class="wrap"></div>. You are able to specify where you want these structural wraps by … [Read more...]
Reordering Hook Not Working on the First Post – Problem Solving Lab
In this Problem Solving lab, your website is broken, as the first post in the loop is exhibiting unexpected behavior. You want to reposition the post info (i.e. date and author's name) above the title. It works on all of the posts except the first … [Read more...]
The Loop Part 2 – Developer’s Guide to Customizing Genesis
This is the second part of the Loop. In this lab, you will explore how the remaining portion of the loop in Genesis works as well as how to customize it. You will dig into the entry content, footer, and after entry … [Read more...]
Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme
The de facto for theme files is to put the bulk of the customization into the functions.php file. That strategy makes customization less readable and maintainable. Building software packages, including themes, into modules, means you are splitting … [Read more...]
Part 2a – Modular CSS Using Sass – Developer’s Genesis Starter Child Theme
Stylesheets by their very nature do not comply with clean, quality principles as everything is one gigantic file that is filled with redundancies. It's inefficient and error-prone to work with a stylesheet. But just like what you learned in Part 1, … [Read more...]
Part 2b – Navigation Sass Module – Developer’s Genesis Starter Child Theme
In Part 2b, you will finish the Navigation Modules by migrating the media queries into the appropriate partial, continue refactoring, assigning variables, and more. You will also begin using Bourbon.io functions and mixins to streamline tasks such … [Read more...]
Part 2c – Header Sass Module – Developer’s Genesis Starter Child Theme
In Part 2c, you will finalize the Header Sass module, which encompasses the site-header area including the site title, site description, and, if configured, the header right area. You'll migrate in the media queries, assign variables to make it easy … [Read more...]
Part 2d – Footer Sass Module – Developer’s Genesis Starter Child Theme
In Part 2d, you will finalize the Footer Sass Module, which includes the footer widgets and site footer components. Just like with the other Part 2 labs, you'll migrate in the media queries, assign variables to make it easy to customize, and refactor … [Read more...]
Part 2e – Entry Content Sass Module – Developer’s Genesis Starter Child Theme
In Part 2e, you will finalize the Entry Content Sass module, which includes the entry title, entry header, entry meta, entry content, and entry footer. You'll think through all the components and then break up the partials to fit those components. … [Read more...]
Part 2f – Comments Sass Module – Developer’s Genesis Starter Child Theme
In Part 2f, you will finalize the Comments Sass module, which includes respond form, the list of comments, and then the components with the comments itself. You'll think through all the components and then break up the partials. Next, you'll migrate … [Read more...]
Part 2g – Widgets Sass Module – Developer’s Genesis Starter Child Theme
Let's first give you a pep talk to reinforce why you are doing this series and how it will make you more moola. Then in Part 2g, you will finish up the Widgets Sass module. by refactoring all of the widgets. Then you'll commit the changes to your … [Read more...]
Part 2h – Plugins Sass Module – Developer’s Genesis Starter Child Theme
In Part 2h, you will finish up the Plugins Sass module by refactoring, using the techniques you've acquired throughout this entire series. You will also add the plugins that you normally work with in your projects. Let's get your codebase ready for … [Read more...]
Part 2i – Layouts Sass Module – Developer’s Genesis Starter Child Theme
The layouts specify the overall widths of the site and the main containers such as site inner, wrap, content, and sidebars. In this lab, you will explore strategies to calculate these widths and then have each automatically generate based upon the … [Read more...]
Part 2j – Base & Common Classes Sass Modules – Developer’s Genesis Starter Child Theme
It's time to finalize the base and common classes. The common classes will be migrated into the appropriate module, while the Base Sass Module will be finalized. You'll be learning about different strategies and alternatives to setup your codebase … [Read more...]
Part 2k – Finish Up the Sass Modules – Developer’s Genesis Starter Child Theme
You will learn about the BEM naming methodology and then you'll refactor your variables to comply with its naming convention. Then you'll refactor the colors to remove the redundancies. Then you'll learn about different media query breakpoint … [Read more...]
Part 3a – Automating Tasks with Gulp
Sass requires compilation to convert it into native CSS. You use a task runner, such as Grunt or Gulp, to automate the task for you. In this lab, you will learn about and build your task runner using Gulp. To learn more about this series and … [Read more...]
Part 3b – Doing More with Gulp
It's time to do more with gulp. While gulp is awesome at processing Sass, you can do more tasks such as sourcemaps, minifying, error handling, notifications, linting (error checking), and even more time-saving shortcut modules within Sass itself. … [Read more...]
Enqueue the Stylesheet Resource
Lab: Adding Google Fonts to Your WordPress Website
Step 2 is to enqueue the stylesheet resource. Google Fonts gives you what to enqueue. Where do you put this into your WordPress website? You will use the WordPress function wp_enqueue_style. Let's talk about what this function does. … [Read more...]
Add a New Post Type Feature
Lab: WordPress Built-in Post Type Basics
WordPress gives you the ability to add post type features to existing (registered) post types. You can add any of the built-in features as well as create your own. Why? Why would you want to do this? Maybe your project needs to add one of the … [Read more...]
Wrap it Up
Lab: WordPress Built-in Post Type Basics
Way to go! You learned about the different post types and features that are built into WordPress Core. You saw how to check, add, and remove post type features. You saw an example with Genesis of how to add a new post type feature, one that is not … [Read more...]
Locating Where to Insert the Content in Your Theme
Lab: Let’s Build a Blog Intro Custom Plugin
Let's figure out where we can hook into the theme to add the content from the editor. Each theme will be different. You will need to evaluate your theme in order to determine where you can hook into for rendering out the content. In this … [Read more...]
Genesis Posts Page Archive
Lab: Let’s Build a Blog Intro Custom Plugin
Let's dive deeper into the Genesis framework by StudioPress. You will learn about: the posts page archive rendering Genesis markup and genesis_attr - overview and intent HTML attributes … [Read more...]
Genesis Before Loop Event genesis_before_loop
Lab: Let’s Build a Blog Intro Custom Plugin
From the previous episodes, you identified genesis_before_loop as the event you need to register your callback in the plugin in order to render out the content into the right spot on the page. Let's talk about this event. In this episode, you'll … [Read more...]
Remove Genesis Page Title
Lab: Let’s Build a Blog Intro Custom Plugin
In this episode, you will unregister the Genesis page title. Remember, you need to unregister it after it has been registered. Huh, what does that mean? It means after the theme is called. In this episode, you will learn about how to unregister … [Read more...]
Wrap it Up
Lab: Let’s Build a Blog Intro Custom Plugin
Congratulations! You just built a custom real-world WordPress plugin. You did from scratch. While you can use this plugin for all of your projects and even extend it, this lab gave you so much more. You learned some of these valuable coding … [Read more...]
Gulp Watch
Lab: Part 3a – Automating Tasks with Gulp
A task watcher automatically runs gulp tasks when you save a Sass partial. You can wire it up to any of your gulp tasks to automatically watch for the events which trigger each one. Turn on the watch and let it run as you work. … [Read more...]
Git & Additional Enhancements
Lab: Part 3b – Doing More with Gulp
Let's push our final sample theme to your git hosting. Then let's talk about the more advanced stuff you can do including additional PostCSS, cssnext, and more gulp tasks like SVG, image optimization, and scripts. You can look at what WebDevStudios … [Read more...]
Laying Out the Theme’s Architecture – Part 1
Lab: Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme
In this video episode, you'll start building your new custom Genesis-powered starter theme. You'll be adding the file and folder structures. Don't worry, Tonya will walk you through each step and explain it. … [Read more...]
Laying Out the Theme’s Architecture – Part 2
Lab: Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme
In this episode, you will continue adding files to your new Genesis developer's starter theme. You will be adding in the file PHP DocBlocks including the package name. You'll learn about how to name your packages for the namespacing, which I show … [Read more...]
Slicing Up the Sample Theme’s functions.php
Lab: Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme
Let's walk through the Genesis Sample Theme's functions.php file and group like tasks, as you are preparing to move them into the appropriate files in your new starter theme. … [Read more...]
Initialization Tasks – Theme Constants
Lab: Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme
It's time to splice out the initialization code and load it into our new Genesis starter theme's init.php file. The file loaders will go into the autoload.php file, while the constant declarations go into the init.php file. The typical way of … [Read more...]
Initialization Tasks – Directory Constants
Lab: Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme
Now it's time to declare the directory constants for your theme. I'll walk you through the process and explain why using get_stylesheet_directory() repeatedly is less performant (slower) than using a constant, such as CHILD_THEME_DIR or even the one … [Read more...]
Setup Tasks
Lab: Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme
In this episode, let's move the setup tasks out of the Genesis Sample theme and put them into our new starter theme's setup.php file. You'll see two different strategies of how to load these setups. Plus you will break up each of the setups into … [Read more...]
Refactoring Theme Supports
Lab: Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme
Did you notice that the function add_theme_support() is being called over and over and over again in the setup? And did you notice that this function requires a key and then a value? I mentioned in the last episode that the final version of this … [Read more...]
Refactoring Image Sizes
Lab: Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme
Your homework in the last episode was to refactor the image sizes on your own. In this episode, we'll walk through how to move the image size name and arguments into a configuration variable. Just like the theme supports, calling the image sizes … [Read more...]
Genesis Structural Components
Lab: Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme
In this episode, you will move each of the Genesis structural components into their respective files. You'll be specifying the PHP namespaces and each callback. … [Read more...]
Load Assets (Enqueue)
Lab: Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme
Now, you need to migrate over the scripts and style (assets). In this video episode, you will create a new asset loader file, which will handle the WordPress enqueuing process for the assets. … [Read more...]
Theme Customizer Files
Lab: Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme
Next, you need to move the theme customizer files from the Genesis Sample Theme to your new developer's theme. You'll start by copying the files into your theme. Then you'll start refactoring by applying the PHP namespace and removing the … [Read more...]
Theme Settings Defaults
Lab: Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme
StudioPress includes a file called lib/theme-defaults.php. This file sets the default theme settings which are found in Genesis > Theme Settings. In this episode, you will refactor the redundancies and then add these into the setup of your new … [Read more...]
Autoload Modules
Lab: Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme
Up to this point, you have been building the modules and files for your theme. Now it's time to load each of the files within these modules. In this episode, you will walk through the de facto practice of repeating include() to get all of the files … [Read more...]
Unregister Default Genesis Callbacks
Lab: Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme
NOTE: There is currently NO VIDEO for this episode. At this point, you have the child theme loading before the Genesis framework. When you need to unregister default callbacks, nothing is going to happen. Why? Because Genesis has not loaded yet. … [Read more...]
Test & Wrap it Up
Lab: Part 1 – Introduction to Modularity – Developer’s Genesis Starter Child Theme
First, you and I will finish the migration of the Customizer CSS file, as I failed to finish it in the video. Then we'll activate and test your new modular WordPress Genesis developer's starter theme. Congratulations! You just migrated over all … [Read more...]
The Why of Modular CSS
Lab: Part 2a – Modular CSS Using Sass – Developer’s Genesis Starter Child Theme
Just like we discussed in converting to a modular PHP theme architecture, modularity applies to everything you build in code, including your stylesheets and CSS. What are the benefits to you? Why would you want to write your styles in a modular … [Read more...]
Start Migrating the Stylesheet to Sass
Lab: Part 2a – Modular CSS Using Sass – Developer’s Genesis Starter Child Theme
As I was thinking about the rest of this lab, it dawned on me that starting with the variable declarations is not the best approach to helping you make the leap from working in native CSS to maximizing what you can do in Sass. Therefore, let's adapt … [Read more...]
Wrap it Up
Lab: Part 2a – Modular CSS Using Sass – Developer’s Genesis Starter Child Theme
NOTE: There's no video for this episode. Congratulations! Look at what you just did and learned: Created a modular architecture for your styles You broke up the standard style.css into partials and then modules. You actively refactored … [Read more...]
Lab Introduction
Lab: Customizing the Read More Link in Genesis
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 … [Read more...]
Basic Code Overview
Lab: Customizing the Read More Link in Genesis
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 … [Read more...]
Markup & Code Setup
Lab: Customizing the Read More Link in Genesis
Before you can get started working on customizing the read more link, first you need to look at the actual HTML markup that Genesis generates for you. Then you will begin setting up the new file and loading it into your functions.php file. Don't … [Read more...]
Let’s Look at Genesis’ Code
Lab: Customizing the Read More Link in Genesis
Let's take a look at where Genesis handles building the read more HTML markup. You will go into the Genesis framework code and then relate that to how your child theme is configured. You configure your child theme in Genesis > Theme Settings. You … [Read more...]
Let’s Customize the HTML Markup
Lab: Customizing the Read More Link in Genesis
We want to move the read more link onto its own line. Therefore, the first step is to customize the HTML markup to wrap the read more link with paragraph HTML tags, i.e. p tags. To do this, you need to register your new function as a callback to … [Read more...]
Change “[Read more..]” Text
Lab: Customizing the Read More Link in Genesis
In this episode, let's change the Genesis default text from "[Read more...]" to something else, such as "Continue reading". You can change it to whatever you want. Let's walk through the steps and code. You will learn about: Code … [Read more...]
Get Rid of the Dots Before the “[Read more…]”
Lab: Customizing the Read More Link in Genesis
The read more text default in the Genesis framework includes the three dots are the "Read more" text. What if you don't want those dots? In this hands-on lab episode, you will remove the dots. We'll walk through the process. … [Read more...]
Style Like a Button
Lab: Customizing the Read More Link in Genesis
In this episode, you will style the read more link to look and act like a button. You will be working first in the browser, looking at the actual stylesheet, as well as making changes to see what you want. Then you'll relate what you see in the … [Read more...]
Handling the Read More When There is No Content Limit
Lab: Customizing the Read More Link in Genesis
When you have your child theme setup to use content but there is no content limit set, your client may use the … [Read more...]
Lab Introduction
Lab: Customizing the Genesis Site Header
Let me introduce you to the second half of the Header lab. In this lab, you will get to build some real-world header layouts, layouts that you can use in your projects. This is a hands-on lab to help tie everything together from what you've learned … [Read more...]
Custom Header Layout 1 – Structure
Lab: Customizing the Genesis Site Header
In this layout, you will relocate the primary navigation to below the header right area. You will style these elements while learning about different presentations for different devices. This episode will involve PHP and CSS hands-on work. In … [Read more...]
Custom Header Layout 2 – Styling
Lab: Customizing the Genesis Site Header
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 … [Read more...]
Custom Header Layout 3 – CSS Styling
Lab: Customizing the Genesis Site Header
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 … [Read more...]
Let’s Build a Custom Utility Bar – Structure
Lab: Customizing the Genesis Site Header
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 … [Read more...]
Wrap it Up
Lab: Customizing the Genesis Site Header
Let's review what you did here in this lab before you move on Part 4. … [Read more...]
Lab Introduction
Lab: Overview of the Genesis Framework – Developer’s Guide to Customizing Genesis
Let me introduce the lab to you to what you will be doing. First of all, this lab is meant for the professional developer, the person who wants to know the Genesis codebase, as you will be exploring and reverse engineering the actual source code. … [Read more...]
The Why of the Genesis Framework
Lab: Overview of the Genesis Framework – Developer’s Guide to Customizing Genesis
Genesis is my theming framework of choice because it is built for the developer. It allows you to customize everything without having to rewrite large sections of code or recreate template HTML structures. It is modular and complies, for the most … [Read more...]
Web Page Sequence – in the Code
Lab: Overview of the Genesis Framework – Developer’s Guide to Customizing Genesis
Next, let's go into the actual WordPress Core, Genesis, and the child theme code. You will see the order (or sequence) in which files are loaded. … [Read more...]
WordPress Event (Plugin API) Refresher
Lab: Overview of the Genesis Framework – Developer’s Guide to Customizing Genesis
Genesis gives us the means to fully customize it because it utilizes the event system available from the WordPress Plugin API. Throughout the codebase, you unregister events to remove a component, register your callback to change something, or … [Read more...]
Visual Hook Guide and the HTML – Header
Lab: Overview of the Genesis Framework – Developer’s Guide to Customizing Genesis
It helps you to know the end result of the code when you see it. In this episode, you will use the Genesis Visual Hook Guide plugin to first visualize how Genesis structures the HTML. Then you will look at the actual HTML to see what has been built … [Read more...]
Visual Hook Guide and the HTML – Footer
Lab: Overview of the Genesis Framework – Developer’s Guide to Customizing Genesis
Let's continue exploring the Genesis framework's HTML markup structure in a visual manner. In this episode, you will look at the footer component, which is from the <div class="footer-widget"> (if you have footer widgets configured) to the … [Read more...]
File Architecture
Lab: Overview of the Genesis Framework – Developer’s Guide to Customizing Genesis
Web pages are comprised of various components, such as the header, footer, navigation, content areas, etc. Genesis divides up its architecture into components. In this episode, you will explore the file structure of the framework in order to find … [Read more...]
Codebase Architecture
Lab: Overview of the Genesis Framework – Developer’s Guide to Customizing Genesis
In the previous episode, you explored the file structure. In this one, you will walk through the Genesis framework's codebase. You'll explore the actual code. We will focus on the main structural templating files. Here is the link to the PHP … [Read more...]
Event Naming Convention
Lab: Overview of the Genesis Framework – Developer’s Guide to Customizing Genesis
The events in Genesis are named by a set convention. You will see this naming pattern throughout the framework. Let's talk about this pattern and how you use it to locate the different files, components, and features within Genesis. … [Read more...]
Initialize & Setup Overview
Lab: Overview of the Genesis Framework – Developer’s Guide to Customizing Genesis
Let's walk through the initialization and setup process for the Genesis framework and a child theme. This overview prepares you for the following two videos. We will also discuss what is considered an initialization task versus a setup task. … [Read more...]
Initializing Genesis
Lab: Overview of the Genesis Framework – Developer’s Guide to Customizing Genesis
With all code, you first need to initialize it. Initialization prepares a codebase and environment for operation. It includes tasks such as loading files, constants, and setting default states. Pop Quiz Time After you watch the episode, answer … [Read more...]
Setting Up Genesis
Lab: Overview of the Genesis Framework – Developer’s Guide to Customizing Genesis
The theme needs to be setup and configured before it can begin building and then rendering out the markup to the browser. During this stage, you are defining what you want within the web page, such as adding theme supports, registering new … [Read more...]
Wrap it Up
Lab: Overview of the Genesis Framework – Developer’s Guide to Customizing Genesis
This lab showed you where you can find things within the Genesis framework. It gave you a basic walkthrough of the framework, where components are, and how to find what you're looking for in order to customize it. Knowing where the components are … [Read more...]
Asset Version Control using the Genesis Constant
Lab: Genesis Version – Ensure Your Latest Changes Go Out to the Browser
The Genesis framework provides you with a constant, which you use in the child theme. This constant defines the theme's version. That version is then appended to each asset during the enqueuing process. In this episode, you will take a look at how … [Read more...]
Where does Genesis load the style.css file?
Lab: Genesis Version – Ensure Your Latest Changes Go Out to the Browser
In this episode, you will discover where in the Genesis framework does it load the child theme's stylesheet style.css file. … [Read more...]
Genesis Markup – Overview
Lab: Markup & Wraps – Developer’s Guide to Customizing Genesis
The genesis/functions/markup.php handles all of the HTML5 or pre-HTML markup as well as the attributes. There are multiple key instructions at play in this file including: genesis_parse_attr genesis_attr genesis_markup Let's talk about … [Read more...]
Genesis Markup – genesis_parse_attr
Lab: Markup & Wraps – Developer’s Guide to Customizing Genesis
Ever wonder how the "context" you see in genesis_markup is assigned as a class attribute? This function, genesis_parse_attr, handles that assignment, merging it into the attributes. Then you have further granular control using the filter event: … [Read more...]
Granular Customization with genesis_parse_attr
Lab: Markup & Wraps – Developer’s Guide to Customizing Genesis
Now you know how the function works and what its intent is. Let's go and change the markup for the default contextual areas of the HTML markup, i.e. the default stuff in the Genesis framework. You will be doing the following hands-on, code writing … [Read more...]
Genesis Markup – genesis_attr – Part 1
Lab: Markup & Wraps – Developer’s Guide to Customizing Genesis
Throughout the markup file, Genesis has been building up an array of attributes. This function, genesis_attr, assembles each of the attributes into the proper format as it builds up the HTML attributes markup. When complete, it provides you with a … [Read more...]
Genesis Markup – genesis_attr – Part 2
Lab: Markup & Wraps – Developer’s Guide to Customizing Genesis
Let's continue by reverse engineering genesis_attr to you to know how it takes the array of attributes and then converts it into the HTML string that you saw in the last episode. … [Read more...]
When should you use genesis_markup
?
Lab: Markup & Wraps – Developer’s Guide to Customizing Genesis
Throughout the framework, you will see code like this: Notice how genesis_markup includes configuration for both HTML5 and pre-HTML5 (XHTML). What is the intent (or purpose) of the function genesis_markup? When should you use it in your child … [Read more...]
How does Genesis know to use HTML5?
Lab: Markup & Wraps – Developer’s Guide to Customizing Genesis
If the intent of genesis_markup is to allow for either a HTML5 or pre-HTML5 child theme, then how does Genesis know whether to use HTML5 or XHTML? The child theme is responsible for declaring what it wants. Let's take a closer look in the code. … [Read more...]
Building the HTML5 with genesis_markup
Lab: Markup & Wraps – Developer’s Guide to Customizing Genesis
Let's reverse engineer to know how genesis_markup builds the HTML5 markup that is sent out to the browser. In this episode, you are learning about a lot of PHP including: conditional expressions falsey state ternary operator If you … [Read more...]
Markup Helpers for Empty Class and Accessibility
Lab: Markup & Wraps – Developer’s Guide to Customizing Genesis
Genesis provides a couple of markup helper functions that you can use in your child theme and plugins. One is for removing the class attribute, while the other adds a screen reader class attribute for accessibility. Let's take a look. … [Read more...]
Practical Customization Example – Grid Classes
Lab: Markup & Wraps – Developer’s Guide to Customizing Genesis
Okay, you now know the markup codebase in the Genesis framework as well as how it works, its intent, and how to customize it. Let's do a practical customization example, one that uses the Genesis styling classes, such as one-half and gives you a grid … [Read more...]
Genesis Structural Wrap Overview
Lab: Markup & Wraps – Developer’s Guide to Customizing Genesis
Structural wraps give you further styling control over your content, as they add either an opening <div class="wrap"> or closing </div> HTML elements. But they have to be configured in your child theme for this additional HTML markup to … [Read more...]
Genesis Structural Wrap Code Overview
Lab: Markup & Wraps – Developer’s Guide to Customizing Genesis
Now you've seen what it does. It's time to head into the Genesis framework codebase and reverse engineer the function genesis_structural_wrap. … [Read more...]
Swapping Old Contexts
Lab: Markup & Wraps – Developer’s Guide to Customizing Genesis
In the last episode, you saw that genesis_structural_wrap deals with swapping out old contexts and replaces them with the one versions. How does this code work? In this episode you will learn about PHP array functions and replacing out string … [Read more...]
Refactoring the Swapping Old Contexts Code
Lab: Markup & Wraps – Developer’s Guide to Customizing Genesis
The swapping of the old contexts to the new contexts is another task. A function should do just one thing, but genesis_structural_wrap is doing multiple tasks. In this episode, you will refactor the context swapping code to another function, as part … [Read more...]
Configuring Structural Wraps
Lab: Markup & Wraps – Developer’s Guide to Customizing Genesis
Now you know how Genesis renders out the structural wrap, but how do you configure it up in your child theme? Let's explore how you add_theme_support. You'll add and remove structural wraps from various HTML contextual sections to gain a hands-on … [Read more...]
Wrap it Up
Lab: Markup & Wraps – Developer’s Guide to Customizing Genesis
Let's review what you did here in this lab before you move on Part 3. … [Read more...]