WordPress Development for Noobs is a series exploring how to wield WordPress effectively as a beginner, or how to move into a more professional role developing WordPress sites. I work full-time as a WordPress developer in Minneapolis, and I love the flexibility and functionality of WordPress for developers and clients. This article will go over some things that I think will help someone in their first year of WordPress development like when to use theme options and when to code. We will also look at when to modify a theme and when to use the pre-built functions if you are modifying a premium theme or a theme that has options.
What you will learn in this article:
- What are theme options and how do they work?Skip to It Daddy-O
- When I’m modifying a theme, when should I try to use the pre-built options?Get to It, Sugar
- When I’ve exhausted the options of a theme, how do I get down and dirty to modify the theme. Where do these functions exist in the site?Come on and Give It to Me
What are theme options and how do they work?
Theme options are different from theme to theme in WordPress, but they are places where the original developer of a site tried to give as much functionality at the fingertips of the end user of the site as possible. In theme options at a basic level, you might have access to background colors, the size and colors of heading text and other text, and up to and including how menus show up or whether or not to use a boxed layout or even full-width layout.
Below is an example of what theme options might look like. They could be called simply “Theme Options” or something to that effect.
In the picture above, you can see that so many things are available to give colors and define options so that the website looks more like you want it to to. The theme dynamically pulls this info in via the database where it’s saved and the coding language PHP defines these colors and functions so that the website shows up differently.
Don’t think that utilizing theme options will take you all the way if you have a specific visual design goal in mind:
Likely, you will still have to write custom code and lots of it to really get the look you’re going for if you have a specific end visual look you’d like because theme options can only really bring you so far. Use them, but they really are intended for a non-developer client or someone running a small blog. Thus, most theme modifications take significant diligence to write custom CSS (Cascading Style Sheets – which style the look of a site,) and modify PHP templates heavily.
Utilize a base/simple theme if deeper theme options and structure are getting in your way. Developers often find having a simple but solid theme structure to start can help speed up their development.
The key is that when you start to modify templates so heavily the theme is getting in the way more than helping is when you should consider starting from scratch. If you do go this route, might I suggest Underscores? This base theme with no styles was created by Automattic, the people that who to WordPress as a whole, so it’s well written but also very simple. I will be sharing a version of Underscores, with Bootstrap built in an upcoming post in this series. Sometimes it’s nice to start with something with very few predefined options and structure, because it’s easier to bend to your will. Or it might be worth the investment of time to build your own starter theme that you’re very familiar with so that you can modify it quickly for the task at hand.
When I’m modifying a theme, when should I try to use the pre-built options?
If you are using a theme with deep options like this, use the theme options for as many things as possible before moving to custom code.
If you have chosen a theme that gives you access to all of these things, I think of it as a very smart idea to keep as much of this intact as possible. If you have a theme with deep options like this, coding over these styles when it’s not necessary means you’ll have redundant code, and if someone (like the client, or the client’s buddy) is trying to edit the site later via these options, they will be frustrated. Why not use as many as possible and keep the theme functioning at it’s highest caliber?
Go down the list and reference your visual design, defining as many of the options as possible based on the design:
It’s worth it to go down all of the options in the theme while looking at the visual design and defining all the styles available according to the Photoshop, Illustrator or Sketch document.Check for these options both in a link on the sidebar that says something like “Theme Options” and in the top navigation the theme customizer, under the item “Customize.” This way, once you define every possible option available, you can code the rest of the things with full confidence you’re not overruling styles unnecessarily.
When I’ve exhausted the options of a theme, how do I get down and dirty to modify the theme? Where do these functions exist on the site?
You can access your themes template files by hovering over “Appearance” and choosing “Editor” in the left-side navigation of WordPress.
1. Click “editor” under appearance.
2. Click the template you want to edit.
3. Edit the raw code in the editor.
You can also edit your files by signing into an FTP editor on your site and navigating to the root folder of the site, then go to >wp-content > themes > theme-name, and of course, if you read the last article about WordPress basics, you’ve created a child theme and copied any files you want to modify into it, so you might navigate to the ‘theme-child’ folder. Some of the most important files to start looking at right away are the ‘header.php’, ‘footer.php’, and the ‘functions.php’ templates. The header and footer files are used by every page on your site, so you can edit them once and it changes for every page.
Here is a video showing you how to edit a website’s files via FTP:
You can also edit your code with a couple other methods in the WordPress admin as well. The plugins “WPide” and Jetpack’s Custom CSS, both give you quick ways to edit code:
If you have Jetpack installed, you can go to Appearance > Custom CSS and add custom CSS styles there, which can come in handy if you’ve decided to use your CSS this way. Jetpack saves every version of your CSS, so you can go back to a previous version whenever you want, which is nice. There is also a plugin called “WPide” which allows you to dig into a theme, and actually edit any part of your WordPress site via the WordPress admin, whereas standard WordPress file editor only allows you to edit themes.
Thanks for reading “WordPress Development for Noobs: When to Use Theme Options and When to Code!” If you found this useful, please tweet this so others can check it out too.
I don’t provide excellent web design in Minneapolis or provide these resources because it’s good for my health, I do it because I know it’s something people need and I like being of use. If I can help you with WordPress design and development, let me know, that is my specialty.