Presented by Kerry Carron on 07/24/2015 9:00am
This is not the beginning of this series. If you'd like to go back to the beginning, start here:
- Read ABC Summer School Preview, and view the ABC Summer School Preview Webinar.
- Session 1: Put together the local development area and start the child theme for the summer school project.
- Prepare for Session 2: Created a sub-domain to use for live development.
During Session 2, Kerry Carron (Builder Gal) will be guiding the class with the play by play instructions. Arelthia Phillips (Teach) is moving the summer school project to a live development area and adding some style to the child theme modules right in front of your eyes.
Before class, we visited iThemes Builder demos to find some Builder module elements that we could use to add to our own custom child theme. We decided to use elements from Summit, Anderson and Jackson. In this webinar, we’ll use the navigation module style and functionality from Summit, and add it to our custom child theme.
NOTES: The handout includes ALL the code snips we will use for the entire project – it has been cleaned up, with excess code removed and additional commented information added. It will not be the same as what you see Arelthia or Kerry add during the webinars, but is rather what the code will look like when they are done adding everything needed and removing what is not needed.
When adding code to your custom site files, it is important to know what each line of code is for. The bottom line is that we do not want to have any code that we do not need and we do not want to duplicate, or repeat, code if we don’t have to. There are two ways to accomplish this.
- You can copy and paste original sections and then go back and delete what you don’t need (Kerry’s preferred technique). This method was demonstrated when adding the navigation module CSS to our child theme style.css during the webinar. We did not have time to actually go back and remove what was not needed so we have included a example file cleanup process with images below.
- Your other option is select and paste only the code you need (Arelthia’s technique). This was demonstrated when Arelthia determined what information to add to our child theme functions.php file in order to render the navigation module functionality.
Example File Cleanup Process
Around 40 minutes into Session, we grabbed ALL of the Summit theme navigation information and pasted it into our child theme style.css. Although not in the recording, we need to delete any CSS that we will not need for the navigation module.
Here is a section of the original CSS we copied from the Summit theme to use within our child theme that still contains some CSS we don’t need. It is NOT all of the code we copied, just the section, for demonstration purposes, that contains the selectors we do not need:
And here is the same CSS as above but this time we added comments as an explanation as to how we will change the CSS in our child theme. Carefully read the commented (green) areas.
And finally, here is the same section of CSS cleaned up, comment removed and reflecting only the parts that we need for our new child theme.
Once again, this is NOT all of the code we copied, just the section that used to contain the selectors we did not need. You can find the final code for our child theme navigation module within the style.css for Let’s Go Theme found in the handout.
Presenter Bio: Kerry Carron
Kerry Carron is a loving wife and mother of three grown boys. As a freelancer, Kerry has built hundreds of WordPress websites and assisted other freelancers and small agencies with WordPress support and business development. She is the founder of OwnWP, a production of Ultimate Solution, LLC.
Kerry specializes in processes and creating systems. She is passionate about helping others find their path to success and her aspiration with OwnWP is to encourage other freelancers in finding and using the right combination of tools and skills they need to do more than merely survive!