If the customizations offered by the theme customizer weren't enough for you, you have virtually endless customization possibilities when you work within the WordPress editor. The customizer allowed you to handle many image, organization, and color related tweaks, but the editor will let you get down to the CSS level to change spacing, sizing, and more. The editor is accessed from the left hand menu of our page as usual: Appearance > Editor.
The theme's stylesheet will be open by default, which is called styles.css. You can see all available files to edit on the right-hand side. You don't need to worry about all the PHP files you see if backend code isn't really your thing; there's a lot you can accomplish just in CSS within this first file!
The first thing I recommend doing from the editor screen is to copy the contents ofstyles.css and paste them within a text editor. I use Sublime Text, but you can also use Atom or another editor of your choice. Save this file assydney_default_styles.css somewhere on your computer. This way you have a copy of the theme's default styles and can reset any changes you make.
I propose increasing the size of the big slider text for practice. This change will help you see how to locate a particular style rule and modify the right line of CSS!
Identifying elements
Here are several quick introductory tidbits you'll use in your hunt to find certain CSS within a theme's stylesheet.
CSS comments
Theme developers often leave comments within their code to help users understand how it works. A code comment, no matter the language, is text that does not have functionality beyond just being a human-readable note. A CSS comment starts with/* and ends with*/. For example, within the Sydney theme stylesheet, we see a comment like this:
/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/The theme's developers left this comment to introduce the style rules for the theme's header. Feel free to remove comments if you don't find them useful, or add and modify your own!
Inspect elements
Most HTML elements within a theme are identified with a class or ID. CSS rules then target these classes and IDs, so the right rules are applied to the right elements!
You'll need to know how to find the class, ID, or general element type of something on your page so you can then hunt down the relevant style rules. In most browsers, right-click on an element and select "Inspect" or "Inspect element" from the menu that appears.
Within these developer tools, you'll see all the HTML associated with a particular element. You could search the stylesheet for entry-title now to find the associated styles with this element.
Increase slider text size
If this text isn't large enough for our design purposes, we should find the CSS line that defines the font size. The first step is to identify the element in order to find it within the stylesheet. By inspecting the element, you see it's an h2 element with the class maintitle. Simply using the find command (cmd-F on Mac, ctrl-F on Windows) within the theme editor pulls up the styles associated with the class!
The two relevant rules for adjusting the font size will be the following two lines:
font-size: 57px;
line-height: 67px;Let's not pick new font sizes willy-nilly. Instead, we'll make sure we're sticking with a good ratio. I'm a fan of the 3:4 ratio (font sizes 5, 7, 9, 12, 16, 21, 28, 37, 50, 67, and 83) so will change the font-size to 67px and the line-height to 83px. You can, of course, always pick your own values based on your preferences or content needs! My CSS goes from this:
.text-slider .maintitle {
position: relative;
display: inline-block;
font-size: 50px;
line-height: 67px;
font-weight: 700;
padding-bottom: 10px;
}to this:
.text-slider .maintitle {
position: relative;
display: inline-block;
font-size: 67px;
line-height: 83px;
font-weight: 700;
padding-bottom: 10px;
}Click Update file to save your changes. Here's the before and after of our font size modification within the editor. Now the title pops!
Using this same method:
Identify an element in the page
Modify the CSS associated with that element in the theme stylesheet.
You can modify text styles (font-size,color...), element spacing (padding,margin...), arrangement (float,position), and more.
Install a plugin
You've customized your site appearance on a number of levels. You can also extend your site's functionality by tapping into the universe of plugins that other WordPress developers have made available to you. For example, my band would like to have a contact form on their Contact page that sends user messages by email.
Since this is a common functionality, you can assume that someone else has already made it available as a plugin! Click Plugins on the left-side Dashboard menu and Add new. From there, you can search "contact" or whatever other functionality you seek.
I'll select "Contact Form Clean and Simple," since that's exactly the functionality I seek! Clicking "Install Now" will install the plugin, and after installing any plugin you need to also click Activate on the next screen.
This new plugin now appears within my list of all plugins, and I'll click Settings in order to customize the plugin for my needs. I can decide whether to require users to do a reCAPTCHA before submitting a message, which email address the messages should be sent to, and more.
You may also notice the line,
Please Note: To add the contact form to your page please add the text [cscf-contact-form] to your post or page.
This is how you'll actually make the form show up on one of the pages! I'll navigate over to Pages > Contact, which is the contact page I set up in a previous chapter.
Now I can go to my live contact page to check out my snazzy contact form!
There are so many ways to customize WordPress, from pages, beautiful themes, personal theme customization, and plugins. Let WordPress help you build the exact site you need, however you need it!
