Lesson 3: WordPress Themes: Bringing Your Website to Life

Transcription

1 Lesson 3: WordPress Themes: Bringing Your Website to Life Chapter 1: Introduction Welcome back! You've already accomplished a lot in this course. Let's see, you've: Registered a domain name Lined up a hosting company Learned how to use a control panel Uploaded WordPress to your server Toured the administrative area Configured some basic settings Organized your site's structure Now it's time to start working on the actual website, beginning with the theme. When people started building websites in the late 90s, designing was a tedious chore that involved adding text, color, and pictures to an invisible table. It often took several weeks to produce a usable design.

2 Apple website, circa 1997 Today's Web designs are far more attractive and functional. Recent Apple home page And themes help you to achieve the desirable combination of usability and good looks. Simply described, a WordPress theme is a skin for your website. You can literally plug in a WordPress theme and give your site a unified style and feel in a few seconds. Don't like the way it looks or behaves? It takes only a couple more mouse clicks to activate a different theme, and you don't have to worry about losing your site's content when you switch. And perhaps the best part is that you can go on to customize WP themes to your heart's content. WordPress includes a few default themes in its basic installation, and WP's open source community has created thousands more that you can download at no charge from WordPress.org and hundreds of other websites.

3 The latest WordPress.org default theme In addition, there's a growing industry of designers offering "premium themes" at prices ranging from $20 each up to $100 or more. This lesson will cover every aspect of WordPress themes how they work, where to find them, what to look for, and how to install them. We'll also discuss the theme for our class project website. Ready to get started? Join me in Chapter 2! Chapter 2: A WordPress Theme's Backbone Template files form the core of each WordPress theme. Each template controls a website element, like the header, footer, and sidebars. Templates are written in a combination of two coding languages, PHP and HTML.

4 HTML and PHP code in the WordPress header template All WordPress sites require at least two theme files: An index.php file, which spells out the basic layout. A style.css file (known as the style sheet), which controls what the website's elements will look like. Most theme folders have additional templates to structure individual website components. These formatting templates, the style sheet, and perhaps some images are packed into a folder and stored in the /wp-content directory of your WordPress installation. Choosing a Theme If you're fluent in PHP, it's possible to design your own themes, but let's get started by using one of the thousands of themes you can download for free from WordPress.org or from many independent sites that also feature them. Because the theme plays such an important role in your website's presentation, choosing the best one for your needs is a major decision. For some people, it can take as much time as any other part of the development process. When you're picking a theme, here are a few things you'll want to keep in mind: Overall layout

5 Responsive themes Popularity of the theme Purpose of the website Special features Hidden links Page templates Let's look at these one at a time! What is the overall layout? Here's a wireframe of the most traditional website layout: Traditional website layout If this tried-and-true layout (or a variation) will satisfy your needs, go with it. If not, sketch out your own blueprint and compare it to what's available. For example, you may need an extra sidebar on the left or right of the main content, or above the footer. If you want to show a lot of articles on the home page, look for a magazine-style format. Or if you're an artist or photographer, a graphics-oriented portfolio theme might work best. Because the overall layout is one of the most difficult elements to change, make sure you're satisfied with the way your theme is set up. Use a responsive theme. There are so many ways people can access your website from a smartphone screen all the way up to a 40-inch desktop monitor. And it's even possible to display Web pages on 70-inch HDTV sets.

6 When a theme is responsive, it's designed to look good on any size screen. Designers make a theme responsive by sizing the elements in proportion to one another. In other words, they might use percents, specifying that a headline should be 300% larger than the body text. (As opposed to using a fixed size, such as one inch for a headline.) If you make a headline three times the size of the body text, then no matter what size monitor we're using, the headline will remain three times the size of the text. Responsive themes will also move sections of the site (like the menu) to different locations based on the screen size. Not all responsive themes work as advertised. You might find out-of-proportion fonts or misplaced menus on occasion. Still, I recommend you choose a theme that's responsive over one that's not. Example of magazine style layout How many others are using the same theme? If you're like me, you won't be happy if you go online and see a website that looks just like yours. You can avoid this by steering clear of the WordPress default themes like Twenty Thirteen and Twenty Fourteen and by modifying a theme to make your version distinctive. We'll talk about how to customize your site later in the course. What's the purpose of the website? If you're planning an e-commerce site, for example, you'll have different design needs than someone who's putting out a family blog. In addition to general purpose designs, there are plenty of WordPress themes for specific uses.

7 E-commerce theme Do you need special features? Sliders rotating home page pictures are all the rage these days. And while it's possible to get a plugin to add this feature (or indeed any other), it might be easier to choose a theme with those special bells and whistles built in. Do you mind hidden links? You'll sometimes run across an unusual-looking link in the footer or sidebar of a free WordPress theme. Clicking it takes you to a commercial website that has some sort of financial arrangement with the theme's developer. This is a hidden link and while there are people who are critical about their usage, it is a form of support for the designer who's giving you a theme at no charge. I don't have any objection to hidden links, as long as they don't force you to do something you don't want to do. But if you dislike the concept, avoid themes with hidden links. Consider using a theme with more page templates. Themes that have more templates will give you more page formatting options. And that does it. So now that you know what to look for, let's discuss where to find it. Focusing Your Search WordPress themes are all over the Internet. Search for "free WordPress themes," and you'll find hundreds of websites where you can download them. I've posted links to a few of my favorite

8 free theme sites in the Supplementary Material section. But before you try those places, first visit the official WordPress Theme Directory. WordPress Themes Directory (

9

10 The WordPress themes collection Though it has less than 6,000 of the many thousands available, WordPress volunteers have vetted these themes to make sure they meet WP standards. The directory also contains a link to a filter that will help narrow your choices. But don't confine your theme hunting to the WordPress.org site. It s easy to look for themes directly from your WP installation. Here's how: 1. Open the administrative area, and click Appearance in the left column menu.

11 Your website's Themes screen The Themes screen will open to show you the themes that WordPress preloaded for your review. The latest default theme is designated as the active theme. 2. To see a complete description, put your cursor over the theme's thumbnail, and click the Theme Details button in the center. In the lower right corner of every theme's thumbnail is a button that lets you make some changes to the theme. It's labeled Customize on the active theme and Live Preview on the others. To see this button on the others, hover your mouse cursor over the thumbnail. 3. Click this button (Customize or Live Preview) to take a theme for a test drive. In the preview screen's column, WordPress lets you customize the header, the colors, any sidebar features known as widgets, and in some cases, additional elements such as images and the menu. You'll see the changes immediately in the main column theme view. 4. If you like what you see, click the Save and Activate button at the top of the left column. It's as easy as that to change themes!

12 To find many (but not all) themes in the WP directory, click the Add New button at the top of the Appearance > Themes screen. And you can now open the feature filter I mentioned earlier. Search for themes by feature 5. Click the Feature Filter button, and then check the box next to every option you want. 6. Click the Apply Filters button, and WordPress will show you a themes matching your criteria. Next up, we'll talk about premium themes. See you in Chapter 3!

13 Chapter 3: Premium and Parent-Child Themes In this chapter, we'll take a close look at premium themes and parent-child themes. Let's begin with premium themes. Wondering what these are? Well, if you're willing to spend anywhere from $20 to $150, you can buy a premium WordPress theme from an ever-expanding group of commercial designers. Please note that in this context, premium means only that the theme isn t free it doesn't refer to any quality standard. Despite that, there is a difference between most premium WordPress themes and those that are free after all, you should expect to get something extra for your money! Premium themes often come with their own options panels installed in the WP back end. You can enable these optional features with a mouse click, so even if you don't know the markup and styling languages, you can easily make changes to your site's layout and appearance. Here are a few of the most common options in premium themes: Layout control: Select from a variety of page layouts. (You can also override this feature on a page-by-page basis.) Color schemes: Match your font colors and backgrounds to your existing company's or organization's palette. Navigation: Decide whether to include a secondary menu, fancy drop-down effects, breadcrumbs (secondary links that show visitors exactly where they are on a website), and more. Custom logo: Upload it to replace the default title. Fields for adding elements: If you need to add your advertising or Google Analytics identification, you can paste it into the theme options page instead of the WordPress script. Home page slider: Insert and control an image carousel on the front page.

14 Frameworks and Parent-Child Themes The concept of creating a basic framework for a website and adding customizable layers is one of the newest and most exciting WordPress trends. And premium theme developers are leading the charge. To get a handle on this concept, think about creating a website the same way that a builder would construct a house: The framework represents the foundation and outer walls; the parent theme corresponds to the interior floor plan and utilities; and the child theme includes cosmetic additions, like painting, decorating, and flooring. StudioPress Genesis framework and one of its child themes This framework-parent-child structure makes it possible to change the way your website looks (the child theme) without touching the elements that make the site work (the parent) or the basic structure (the framework). In Web design, this lets the developer make improvements and updates to the framework and parent theme without forcing a change in the way the child site looks. Premium theme designers will sell you frameworks and parent themes to use for the basic website structure. Then, if you wish you can buy child themes from them to further customize your site's look and feel.

15 Preserving Changes to the Theme There's another important reason to use child themes: You can create your own child themes to protect your custom style changes from being overwritten. (Updating WordPress itself won't affect your customization, but when you upload a revised theme, you'll lose any changes you've made to the style sheet.) In a later lesson, you'll find out how to use an alternative to a child theme Jetpack's Additional CSS feature. (Jetpack is a package of WordPress.com plugins that you can install on your WordPress.org site. We'll discuss this later in the course.) The Additional CSS feature works just like a child theme: It's loaded after the theme's original style sheet and preserves all the changes you've made. Other Benefits And there s more! Here are two more reasons to consider purchasing a premium theme: support and documentation. Free theme developers don't often create manuals or videos, but premium themes almost always come with plenty of how-to information. And premium theme publishers usually include reliable support systems featuring designers and programmers who can answer specific questions from customers. True, many free theme developers also host forums where users can ask and answer questions, but they're often not as personalized or efficient. The Bottom Line on Premium Themes Basically, it's up to you to decide whether using a premium theme is worth the money. The best way to determine that is to visit some premium sites and demo the themes. Here are some well-respected premium theme developers. You'll want to set aside some time to browse through these sites there's a lot to look at and absorb! StudioPress Elegant Themes (Here you ll find the Divi theme, which they say is the most popular premium WordPress theme in the world.) WooThemes

16 Theme Forest Okay, so you now know all about themes. What theme will we use for our class project? Join me in Chapter 4, where I'll unveil the selection. Chapter 4: And the Winner Is... To find the best theme for our Building a Backyard Water Garden website, I looked at more than a thousand WordPress themes and found nothing that met all my needs. Here's a look at my criteria (and you'll want to keep these in mind as you consider a theme for your own website): Topic Cost Commercial appearance Blog included Attractive Information The theme must be free. I didn't want you to spend any money on the project. It must have a commercial flavor, because we'll be selling and advertising (fictitious) products. It should be structured like a traditional website with a static home page, but it must integrate a blog section that looks like fits in visually with the rest of the site. It should be reasonably attractive and configurable, with a theme options page that lets us control aspects of the look and feel without diving into the underlying code. I ruled out many possibilities because they looked and behaved too much like run-of-the-mill blogs. They were either too narrow for all we'll need to include, too oriented to displaying posts (as opposed to pages), or offered few customization tools. The ultimate theme choice didn't come from the WordPress.org theme collection, but rather from a developer who offers many of his themes on his own website at no cost.

17 The theme is called Marina. It's released by a company called Web2Feel and created by Jinson Abraham, a talented designer. Like many premium themes, his themes are attractive, loaded with features, and user-friendly and this one is free! Marina theme I also chose Marina because it includes a few of the extras you'll find in premium themes: a home page slider, the option to add thumbnail images to post previews, and a theme options page where you can easily control many of its features without having to tinker with the underlying code. Marina will also let you put multiple articles on the home page, and its design (featuring water bubbles on a blue-gray background) is appropriate for a website about water gardens. Drawbacks? Nothing s perfect. I don't really like the overly large slider and some duplication of content on the default home page. Also, there s a hidden link in the theme's footer. But that link is almost unnoticeable, and it opens a fairly innocuous sales page about Las Vegas condos. Marina isn't a responsive theme, but nonetheless it does look good when viewed on a mobile screen. And if need be, we could always install a plugin so that its elements display logically on any size screen.

18 Despite the negatives, Marina came closest to what I was looking for. We'll change some of the elements when I show you how to customize themes. Ready? We'll begin by installing Marina! Installing the Marina Theme Since Marina isn't part of the WordPress collection, you'll need to download the theme folder to your computer from this link: 1. Click the black Theme Download button, and save the folder to your hard drive. If you've created a folder for your site, put it there... or else download it to your Desktop or a memory stick, so you can find it easily. Reminder You'll need to upload the zip folder to WordPress, so do not unzip it! (If you're using the Safari browser, go to Safari Preferences and make sure there's no check in the box next to "Open safe files after downloading.") The next step is to send the zip folder to your host server. 2. If you're not already there, go to Appearance > Themes in the WordPress back end. 3. Click the Add New button on the top of the page to open the Add Themes screen. Installing a theme from your hard drive

19 4. Click the Upload Theme link near the top of the page. 5. Click the Choose File button. A new window opens, displaying your hard drive directory. 6. Navigate to the directory where you saved the downloaded theme, and when you've found the Marina folder, click the Open button in your hard drive window (or double-click Marina.zip). 7. Click Install Now. You'll receive a message that WP has installed the theme successfully. 8. Click the Activate link. Marina, ready to be activated Great! Now take a peek at what the Marina theme looks like before we add content. You can do this by clicking the title Build a Backyard Water Garden next to the WordPress logo at the top of the page. It's pretty bare, isn't it? You'll take care of that in the next lesson, when you begin to include articles, photos, features, and more. For now, let's meet in Chapter 5 for a quick review! Chapter 5: Summary

20 Summary Wow we started this lesson with a blank slate and ended it with the framework for a website! You learned that a WordPress theme is what turns a site's basic structure into readable, clickable Web pages. Themes contain at least one CSS style sheet and one or more templates, which format pages and posts, sidebars, headers, and footers. You also learned what to look for when picking out a theme by paying close attention to its layout, design, level of support, and special features. While you can find both free and premium WordPress themes all over the Internet, you should look first within the WordPress.org site, where volunteers review the themes before including them. I found an appropriate theme, named Marina, outside the official site. And you learned how to install it from within the WordPress back end. Next time, our subject will be content. We'll discuss how to create pages and posts and how to include images, videos, and documents. But before you join me in Lesson 4, stop by the Discussion Area if you have any questions or comments. And don't forget to visit the FAQs and Supplementary Materials section. You'll need that information to complete your assignment for this lesson!