Here’s my presentation for the Atlanta WordPress Users Group to continuing their discussion on theming. The meetup gives you a first hand look at modifying your Theme’s look and feel. We’ll be showing you how to make typical changes to existing themes. We will not be showing you how to create your own theme from scratch, though we will have a meetup later in the year to do that.
During this meetup we discussed:
• What is CSS and why do we use it?
• What are ‘typical’ modifications to themes and how to make them
• Using ‘inspect element’ and/or ‘firebug’ to find and test
• Correct way to change Fonts
• Simple color theory and design
Here’s the slide deck for the presentation
The presentation overviews the internet, teaches us how to spell HTML and other web programming “languages” that come together to form a WordPress website, like HTML, CSS & PHP. We even discussed web development tools like FTP clients and which text editors to use. We went over what makes up a wordpress theme and then the concept of child themes. Discussed the process of creating your own child theme with just a couple files and that you can create a child theme for any theme out there. We demoed how to view source and dissect any website, but more importantly, how to inspect elements on your site and live-edit the css for any element. Then to write these CSS rules to our theme to lock in the edits in your child theme.
If you have any further questions that you would specifically like reviewed, leave them in the comments below and I’ll respond.
We created a child theme for twentysixteen
We created our own child theme and discussed the benefit to creating a child theme over other ways to modify a WP theme. Our twentysixteen child theme did wonders for the look:
We explored the code to create our own WordPress child theme
Here are the code snippets for review
I have been using foundation and bootstrap on sites and have struggled with the best way to add a button class to this button since I wanted it to inherit the frameworks styles for a button. I’ve seen a few ways to go about doing this, like using javascript (ug), or adding an extra button and hiding the original button with css (meh). But now it’s a simple little filter to add to comment_form_defaults. Just add your desired class value to ‘class_submit’ in the args. I’ve put it into a simple little gist to add a ‘button’ class to my input type equals submit:
