THEMATIC MASTERY
Advance to the next level of WordPress design
WORDPRESS SERVER
Any reputable web host will do, or you can host it yourself on your own server.
SO FAR IN THIS SERIES, we’ve helped you set up your own self-hosted WordPress website, populate it with pages and posts, and protect it in the form of added security and automated backups. With these nuts and bolts in place, it’s time to look at your site’s appearance.
Content may be king, but if your site isn’t easy to read or—sad to say—attractive to look at, you’ll put off potential readers. Thankfully, changing the look and feel of your site to match its content is a relatively straightforward task thanks to WordPress’s support for themes.
Each WordPress theme is a customizable template of design elements, spanning everything from your page header and menu-bar navigation system to the order your posts are displayed. WordPress provides easy access to thousands of different themes to cover most people’s needs. You can install more than one theme at a time, allowing you to try out different themes before settling on one. It’s a good idea to read reviews of themes, and look out for themes that are free to install but lock many of their settings behind a paid-for upgrade. –NICK PEERS
1 SWITCH THEMES
Log into your WordPress installation and head to “Appearance > Themes.” You’ll see a list of themes installed as standard with new WordPress installations: 2015 up to 2020. Each has a thumbnail giving you an idea of how that theme looks in action.
>> The theme in current use is marked “Active,” and you’ll see a “Customize” button next to it—more on that shortly. You can preview another theme by rolling the mouse over it and clicking the “Live Preview” button [ Image A]. A live preview of your site will be displayed using the theme in question—look for buttons at the bottom to switch between desktop, tablet, and phone view, so you can see how the theme performs on different devices. If you like what you see, switch to that theme by clicking “Activate.”
2 FIND YOUR PERFECT THEME
To see what other themes are available, click “Add New.” You’ll see a selection of featured themes appear. Roll your mouse over one and click “Details and Preview” to read a description and view a basic preview of a dummy post. If you’re happy, click “Install” to add it to your collection, or use < and > to compare it against other themes in the current selection.
>> With thousands of themes to choose from, make use of WordPress’s search and filtering tools. Start with the keyword search tool: Try words related to your site’s content to see if anything interesting comes up. The “Popular” and “Latest” filters are self-explanatory, but the most useful option is “Feature Filter”—click this to apply up to three different filters: Subject, Features, and Layout [ Image B]. Click “Apply Filters” to view all sites that meet your selected criteria.
>> You’ll also see a “Favorites” option—if you sign up for a free wordpress.org account and then browse themes through the https://wordpress.org/themes/ page, you’ll be able to mark them so they show up here. Once you’ve installed a theme, it’ll appear alongside other themes you’ve installed, ready for a live preview of your site.
3 CUSTOMIZE YOUR THEME
Once your chosen theme activates, navigate to “Appearance > Customize.” You’ll see the same screen appear as when live-previewing a new theme, complete with a series of options on the left, plus shortcuts to customizable fields displayed on the live preview (look for the blue pencil logo).
>> As you apply changes, you should find that the live preview updates instantly to show you the effects of your alterations. Note that no changes will be applied until you click the “Publish” button at the top of the page.
>> Start with the “Site Identity” section—this is where you can change your site’s title and tagline, which appears in the main header. You may also see an option to display a site logo over the header image, plus a site icon to appear on browser tabs and in bookmarks. Other sections focus on different parts of the site’s design within the current theme and will vary according to the theme you’ve chosen.
Most are relatively straightforward and self-explanatory—for example, “Colors” is where you can set a light, dark or custom color scheme for the site, while “Header Media” is where you upload your own image for your site’s header [ Image C].
4 BUILD A NAVIGATION SYSTEM
WordPress provides menus as a means of navigating your website. Menus can be a simple list of items for those occasions where you only have a handful of links to share, or you can nest them inside categories to create drop-down menus.
>> If you’re currently in Customize view, select “Menus” in the left-hand menu to get started (you can also create and manage menus via the “Appearance > Menus” section). Click “Create New Menu” and give your new menu a suitably descriptive name. Choose where to place your navigation—Top Menu is usually the best spot—and click “Next.” Add individual posts, pages, categories, tags, formats or custom URLs via the “Add Item” button, or tick “Automatically add new top-level pages to this menu” to create a menu from any static pages you’ve created.
5 SET UP DROP-DOWN MENUS
By default, a single-level menu is created, so all items are displayed as individual links at once. This can get quite cramped, so organize your links into individual drop-down menus by “nesting” items inside another. We recommend using categories or tags for your parent item. Add this first, then add the items you wish to include in the drop-down menu. By default, they’ll appear alongside the main item, but by clicking and dragging each item on top of the top-level item, you’ll see them “nest” inside [ Image D]. You’ll also see a drop-down arrow appear next to the main menu item on the live preview —roll your mouse over this to see the nested items inside, ready for selecting. Once happy with your menu, click “Publish.”
6 EDIT THE CSS DIRECTLY
If you can’t customize your chosen theme to quite how you’d like it to be, and you’re reasonably proficient in CSS, then you can change just about any aspect of your site’s design. There are several risky ways to do this, but thankfully the customizer tool allows you to incorporate your own CSS styles without breaking your current theme. To do this, head over to “Appearance > Customize > Additional CSS.”
>> You’ll see a box in which you can enter your CSS styles—it offers both auto-suggestions as you type and syntax highlighting to help you enter your code correctly. Anything entered here overrides the theme’s default settings, and you can see the results of your changes through the live preview [ Image E]. If something goes wrong, remove the code to restore the original settings.
>> Any code you enter here may get lost if you switch themes, so we recommend copying and pasting it into a text editor to store as a backup. To find out more about the basics of editing CSS, visit www.w3schools.com/css/ for a comprehensive set of tutorials and reference guides.