WordPress® Web Design For Dummies®, 3rd Edition
Published by: John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, www.wiley.com
Copyright © 2016 by John Wiley & Sons, Inc., Hoboken, New Jersey
Published simultaneously in Canada
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without the prior written permission of the Publisher. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions.
Trademarks: Wiley, For Dummies, the Dummies Man logo, Dummies.com, Making Everything Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and may not be used without written permission. WordPress is a registered trademark of WordPress Foundation. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book.
LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.
For general information on our other products and services, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002. For technical support, please visit www.wiley.com/techsupport.
Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com.
Library of Congress Control Number: 2015951790
ISBN 978-1-119-08864-6 (pbk); 9781119088462 (ebk); 9781119088608 (ebk)
WordPress is the most popular content management system (CMS) on the web. Users of the WordPress platform can easily publish their content on the Internet because of its intuitive user interface. A large segment of the WordPress user community wants to delve a bit deeper into the platform so that they can not only publish content, but also make their websites look fantastic by designing, customizing, and manipulating their WordPress themes. In fact, as a WordPress designer and consultant myself, two of the most frequent questions I hear from my clients are “How can I design my own theme for WordPress?” and “How can I design and build my entire website with WordPress?”
WordPress Web Design For Dummies, 3rd Edition, answers those questions and unlocks the mysteries of designing websites with the WordPress content management system. If you have ever tried to tweak an existing WordPress theme file, or even design your own WordPress theme from scratch, and have found it to be intimidating or too difficult to understand, this book breaks it down for you in a friendly and easy-to-understand manner.
This book starts by walking you through the basics of understanding and setting up WordPress so that you can
In this book, you also discover the right tools to use for publishing and designing with WordPress, including tools that help you
WordPress Web Design For Dummies, 3rd Edition, also addresses issues related to web design by walking you through some basic design skills, such as understanding and designing with Cascading Style Sheets (CSS) and HyperText Markup Language (HTML). You also explore basic design concepts, such as color, typography, and layouts.
Finally, this book wouldn’t be complete without in-depth information on using the WordPress technology to create dynamic websites. I introduce templates and themes and explain how to use WordPress template tags to create great features. I show how to use WordPress to build all sorts of websites, such as small business sites, e-commerce sites, photo galleries and portfolios, real-estate sites, social communities and discussion forums, and more.
I made a few small assumptions, and one very large one, about you while I wrote this book. I want to get the large one out of the way immediately: You already know how to use WordPress.
Yes, that’s right — this book doesn’t show you how to use the WordPress software to publish posts, create categories, or use the Dashboard, for example. I assume you have that knowledge already and you’ve been working with WordPress for at least a few weeks. My other book, WordPress For Dummies (now in its seventh edition), is a fantastic companion to this one because it takes you, starting with step 1, through all the steps you need to know to use WordPress. If you feel you may need a review or a solid introduction to the WordPress software, pick up a copy of that book, too.
I also assume you use the self-hosted version of WordPress that you downloaded from the official WordPress website at https://wordpress.org. The other version of WordPress, the hosted service at https://wordpress.com, is not compatible with the extensive theme customizations and plugin usage and installations discussed in this book. In fact, the hosted service that WordPress offers at https://wordpress.com is not covered in this book.
Other assumptions I make about you include these:
Icons are those little pictures in the margins of this book that emphasize information that I think you may find helpful, that may be a danger to be aware of, that’s aimed for techies, or that’s a point to remember. Those points are illustrated as follows:
Tips are little bits of information that you may find useful — procedures that aren't necessarily obvious to the casual user or beginner.
When your mother warned you, “Don’t touch that pan — it’s hot!” but you touched it anyway, you discovered the meaning of the word “Ouch!” I use this icon for situations like that.
You don’t need to possess a PhD in computer programming to understand how to build websites using WordPress; however, occasionally the information presented in this book can inch a little more into the geeky side. That’s when I use this icon.
This icon is self-explanatory — I use it next to information I want you to remember and possibly come back to later.
To supplement the content in this book, you can find extra content online. Go online to find the following items:
www.dummies.com/cheatsheet/wordpresswebdesign, you’ll discover WordPress tools and resources, how to use HTML and CSS to customize your theme, how to select image-editing programs for your web design projects, and how to find several resources for WordPress themes.www.dummies.com/extras/wordpresswebdesign, you’ll learn how to find a web host for your WordPress website, explore image types and formats, find out how to use the WP_Query Class to display content on your WordPress site, and enjoy an additional Part of Tens article.www.dummies.com/extras/wordpresswebdesign.This book is a veritable smorgasbord of information, ideas, concepts, tools, resources, and instruction about WordPress web design. Some of it will apply directly to what you want to do with your WordPress blog. Other parts deal with topics that you’re only mildly curious about, so you may want to skim those pages.
I don’t intend for you to read this book from cover to cover (unless you’re my mother — then I won’t forgive you if you don’t). Rather, scan the Table of Contents and the Index of this book to find the information you need.
If you already have WordPress installed on your web server, you can skip Chapter 3. If you have a good understanding of text editors and FTP, you can skip Chapter 5. If don’t want to find out how to apply CSS or HTML to enhance your design, you can skip Chapter 14.
Long story short: Take what you need and leave the rest.
Part I
Visit www.dummies.com for more great For Dummies content online.
In this part …
Get an overview of the concepts of WordPress web design, including the basic requirements needed to design with WordPress.
Discover how to install WordPress on your web server.
Explore the different types of content that can be published with WordPress.
Build a solid starting point for designing your website with WordPress.
Chapter 1
In This Chapter
Comparing blogs and websites
Introducing WordPress as a content management system (CMS)
Understanding ways to publish content with WordPress
Discovering WordPress free and premium theme options
When you discover that you can build and design more than just a blog with WordPress, you begin to realize the potential of the software and how you can apply it to your website-building efforts. For me, the lightbulb went off in 2005 when my clients came to me wanting more than a blog on their sites. Many of them ran small businesses and needed to add other features to their websites, aside from the chronological display of the blog posts they’d been publishing.
This chapter introduces you to the concept of using WordPress as a content management system (CMS). You find out what CMS really means and see how you can apply it to your own website-designing efforts. You also discover what types of content you can publish with WordPress software and how you can leverage that content to build dynamic websites.
Additionally, this chapter introduces you to the world of WordPress themes — what’s currently available for you to use right away, what you can tweak to your own liking, and what you can research and dig through to discover more about WordPress design and theme building. You find out which themes are free for the taking and which themes cost you money to use. (Hint: The free ones are the best ones to practice with because there’s no cost to you!)
This book deals only with the self-hosted version of WordPress that you download from the official WordPress website (https://wordpress.org). You can’t fully customize and use WordPress as a CMS, as described throughout this book, if you use the hosted service at WordPress.com (https://wordpress.com). The names (and domains) are so close that it’s easy to confuse them, so the basic rule of thumb is this: If you did not install the software on a web-hosting account for your own domain, you’re using the incorrect version of WordPress.
If you read the introduction to this book, you know that I assume you already know how to use WordPress to publish content on the web. Therefore, you’re likely already aware of what a blog is and can recognize one when you encounter it on the Internet.
But just in case, a blog is typically a chronological listing of blog posts (or articles) that you (as a blogger) have published on the web. Often, having only a blog on a domain suits many people just fine — these people are referred to as bloggers, because they blog; that is pretty much all they do on their domain.
Figure 1-1 shows you what a typical blog looks like with the chronological display of blog posts with categories, publish dates, and comments.
Figure 1-1: My business blog at http://webdevstudios.com/blog.
Blogs have predictable features that you can assume exist, including
http://feedly.com)You can build a website with WordPress as well; however, it encompasses so much more than just having a blog on your domain. Many websites built with WordPress, such as business or corporate sites, don’t even have a blog. Other websites have blogs, but they’re not the main focus of the site. Several types of sites, such as business sites, have more content and features than just blog posts to offer visitors, and WordPress allows you to have both a blog and a full-blown website.
When designing a website, you need to sit down and map out which of the many WordPress features you’re going to use, as well as decide how and where you’re going to use them on the site. Chapter 8 takes you through planning your design strategy — don’t miss it!
My business website, WebDevStudios (http://webdevstudios.com), is a good example of using WordPress as a content management system (CMS) to design and create a small business website. For instance, in Figure 1-2, you see that the front page of my business website doesn’t look anything like a traditional blog; however, if you look near the top, you see a link to the blog.
Figure 1-2: My business website is powered by WordPress.
You can manage and maintain several sections of your website through the use of one installation of the WordPress software on your web-hosting account, and create the visual look and design/layout of the site through manipulation of the WordPress theme templates. (I introduce themes later in this chapter.)
I have a blog on my business website, but it’s secondary to the other content I display there, including
http://webdevstudios.com/portfolio) The chapters in Part III of this book give you the information you need to work with and create WordPress theme templates, and Part IV provides solid information about design concepts like CSS and HTML that help you put your entire WordPress theme together for your own unique website design.
My business site, shown in Figure 1-2, is just one example of a type of website that can be built with the WordPress software, with or without a blog. Figures 1-1 and 1-2 illustrate some basic differences between a blog and a website. This book concentrates on website design overall, not just blog design (although all concepts presented in the chapters in this book can be applied to both).
A term that you’ll hear regularly in the WordPress community is CMS, which stands for content management system. Whether you run a blog, a website, or both, you use WordPress to manage your content by publishing and editing it regularly.
When WordPress was first released in 2003, it became well known worldwide as the most popular blogging platform available on the web. That is still the case; however, as WordPress development has evolved over the years, it has grown from a blogging platform into a full-featured content management system that allows you to publish all sorts of content types to the web with very little technical ability or skill. Because you install WordPress on your web server and you access the back-end controls — the Dashboard — via a web address, it’s considered a web-based content management system.
You may be asking yourself how a blogging platform, which allows you to publish content on the web, differs from a web-based content management system. The two seem to be interchangeable, and some say it’s just a matter of semantics. You’ll find that in the WordPress community, content management system refers to the ability to easily publish different types of content using one installation of WordPress. More than just a blog, you can build and design a website that includes different content types, including (but not limited to)
http://icondock.com), which is a great example of WordPress being used as an e-commerce online store.
Figure 1-3: IconDock is a website that uses WordPress to power its online storefront.
The preceding list is just a sampling of the different types of content that you can publish and manage using WordPress as a CMS rather than as a blogging platform only. Be sure to check out Chapter 18 for some other real-life examples of websites that use WordPress as a CMS.
To include these different content types on your website, in some cases — such as with e-commerce and social communities — you need to install special plugins, or scripts, that extend the feature set of the WordPress software. And in certain cases like discussion forums and photo galleries, you need to account for these different content types in your WordPress theme design as well, through the use of template tags, CSS, and HTML. Part III of this book (Chapters 9 through 13) takes you through what you need to know for creating WordPress themes and templates, and Chapters 16 and 17 give you some great ideas for techniques and plugins you can use to create different features and content types on your WordPress–powered website.
WordPress themes are simply a group of files, called templates, which determine the look and basic function of your site. Literally thousands upon thousands of free WordPress themes are available for you to choose from. WordPress has an official Theme Directory on its website at https://wordpress.org/themes (shown in Figure 1-4).
Figure 1-4: The official WordPress Theme Directory.
Additionally, you can browse, download, and install free WordPress themes from the comfort of your own WordPress Dashboard. All the themes that you find in the official free Theme Directory are also accessible within your Dashboard by choosing Appearance ⇒ Themes and then clicking Upload Theme (see Figure 1-5). (See Chapter 9 for the lowdown on installing themes.)
Figure 1-5: Browse thousands of free WordPress themes from your Dashboard.
WordPress themes that appear in the official directory are fully checked out, vetted, and approved for listing by WordPress. With this theme review, you can feel comfortable knowing that the theme you’re using meets the guidelines that WordPress has put in place for quality control.
It’s possible that you’ll find exactly what you’re looking for in a theme using one from the free Theme Directory; however, you and I haven’t even met, but I know something about you based on the fact that you’re reading this book. You want to learn how to tweak, customize, and create your own WordPress theme by learning and applying the skills necessary to do that. Free WordPress themes are a great place to start, especially themes from the official WordPress free Theme Directory. The free themes from the directory contain all the standard features that users expect from themes, so they make an excellent starting point in your learning process. That’s right, I said it! Open up one of those themes from the free directory and start reading, learning, and applying the code you find there to themes that you create for yourself, your friends, or your clients.
Typically, it would be a big no-no to tell you to copy work from another person; however, that is exactly the spirit of the WordPress community, and the spirit of open source and the GPL (General Public License) that WordPress (and its themes and plugins) is released under (see the earlier “Open source and the GPL” sidebar). In fact, Chapters 10 and 11 take you through the steps of doing just that; Chapter 10 walks you through the (free) default WordPress theme called Twenty Fifteen, and Chapter 11 dissects the template files. Chapters 12 and 14 take you through template tags, and how to customize their look and design with CSS and HTML coding.
Not all WordPress themes are created equal; that is to say, not every WordPress theme you encounter is free. GPL-licensed software, like WordPress and related plugins and themes, is not always free, as in price. Several years ago, a premium theme market emerged within the WordPress community by developers and designers who offer high-quality themes and provide ongoing support for the use of those themes for a price that ranges anywhere from $50–$300 each, depending on which theme you use.
Many of the premium-theme providers offer special themes that they’ve termed frameworks. Frameworks are essentially WordPress themes with all the built-in features and functionality, and they are optimized and coded to act as a parent theme, making WordPress theme development quicker and allowing you to use it to create an unlimited number of child themes. I cover parent and child themes in depth in Chapter 13; you can head there now to read more about those topics, or file the terms “parent/child themes” in the back of your mind, knowing that you revisit those concepts later in this book.
Premium themes and frameworks offer you an easy way to help yourself, your friends, and your clients design a nice-looking website quickly, using WordPress for a lower cost than it would take to hire someone to design and build a custom theme for you. However, premium themes have their limitations as well; because someone else built the theme, you are limited to the features and functions that the developer/designer of the theme included. If you want to add more features, it may mean digging into the code of the template files and making some adjustments. (In Chapters 10–12, you find information on how to tweak existing themes.)
Sometimes it’s better to code your own theme from scratch, simply because it’s easier for you to know your own code than it is to get to know someone else’s way of doing things. After you become comfortable designing your own theme, the choice is yours to make.
You can find a very nice selection of premium themes on the WordPress website, listed at https://wordpress.org/themes/commercial/. Here are a few popular theme frameworks on the market today:
https://ithemes.com/purchase/builder-themewww.studiopress.com/https://wordpress.org/extend/themes/hybridBefore you can even think about building themes and designing with WordPress, you have to lay the foundation. Doing so doesn’t take very long, but it involves setting up the right environment and gathering some essential tools to get the job done right. Setting up WordPress correctly the first time is important because having to set it up all over again after you’ve already begun using it is quite a hassle. In the first part of this book, you’ll find the steps to get WordPress up and running, including:
Then after you’re up and running, be sure to check out Chapter 4 for the lowdown on managing content and Chapter 5 for more about FTP and different web browsers.
Chapter 2
In This Chapter
Registering a domain name
Exploring web-hosting environments
Understanding bandwidth and hard drive space needs
This chapter introduces you to the basic requirements that need to be in place before you can install WordPress on a web server (as described in Chapter 3). I take you through the mechanics of registering a domain name, exploring web-hosting environments, and determining a plan for different WordPress projects in terms of bandwidth needs and hard drive space options.
If you design WordPress websites for several clients, each client has unique needs for web hosting, depending on the type, scope, and breadth of the website it runs. This chapter helps you take all those factors into consideration to determine the type of hosting environment needed for the job.
You’ve read the hype. You’ve heard the rumors. You’ve seen the flashy websites powered by WordPress. But where do you start?
The first steps toward installing and setting up a WordPress website are deciding on a domain name and then purchasing the registration of that name through a domain registrar, a company that sells and administers domain names. A domain name is the unique web address that you type in a web browser’s address bar to visit a website — for example, wordpress.org and google.com.
I emphasize unique because no two domain names can be the same. If someone else has registered the domain name you want, you can’t have it. With that in mind, you may need to take a bit of time to find a domain that isn’t already in use.
When registering a domain name, consider the extension that you want. The .com, .net, .org, .info, .tv (for video), .fm (for audio), .co, or .biz extension that you see tagged on to the end of any domain name is the top-level domain (TLD) extension. A top-level domain is the main domain name of a website, whereas a second level is a subdomain, or subdirectory, within the main domain. For example the main, top-level domain for Wiley is wiley.com; whereas Wiley’s Online Library is located on a second-level domain: onlinelibrary.wiley.com. When you register your domain name, you also choose the extension you want for your domain (as long as it’s available, that is).
A word to the wise here: Just because you register your domain as a .com doesn’t mean that someone else doesn’t, or can’t, own the very same domain name with a .net. So if you register MyDogHasFleas.com and it becomes a hugely popular site among readers with dogs that have fleas, someone else can come along and register MyDogHasFleas.net — and run a similar site in the hope of riding the coattails of your website’s popularity and readership.
You can register your domain name with all available extensions if you want to avert this problem. My personal website, for example, has the domain name http://lisasabin-wilson.com; however, I also own http://lisasabin-wilson.net.
Registering a domain costs you anywhere from $10 to $30 per year, depending on what service you use for a registrar and what options (such as privacy options and search-engine submission services) you apply to your domain name during the registration process.
After you pay the initial domain registration fee, you need to pay another fee when the renewal date comes up again in a year, or two, or five — however many years you choose to register your domain name for. (The length of time you register your domain is up to you, but if it’s a domain you’re planning to use for a long time, most registrars will give you a slight discount on the price if you register it for more than one year.) Most registrars let you sign up for an auto-renew service to automatically renew your domain name and bill the charges to the credit card you have set up on that account. The registrar sends you a reminder a few months in advance telling you it’s time to renew. If you don’t have auto renew set up, you need to log in to your registrar account before it expires and manually renew your domain name.
Domain registrars are certified and approved by the Internet Corporation for Assigned Names and Numbers (ICANN). Although hundreds of domain registrars exist, the ones in the following list are popular because of their longevity in the industry, competitive pricing, and variety of services they offer in addition to domain name registration (such as web hosting and website traffic builders):
https://www.godaddy.com/https://www.name.com/www.networksolutions.com/www.register.com/ At this time, GoDaddy.com, shown in Figure 2-1, is probably the easiest and most cost-efficient way to register a domain name. As of this writing, GoDaddy.com currently has domain name registration starting at $9.99 per year.
Figure 2-1: GoDaddy.com provides an easy, low-cost way to register a domain name.
No matter where you choose to register your domain name, here are the general steps to do so:
Decide on a domain name.
Doing a little planning here is necessary. Many people think of a domain name as a brand — a way to identify their websites or blogs. Think of potential names for your site, then you can proceed with your plan.
Verify the domain name’s availability.
In your web browser, enter the URL of the domain registrar of your choice. Look for the section on the registrar’s website that lets you enter the domain name (typically, a short text field; see Figure 2-1) to see whether it’s available. If the domain name isn’t available as a .com, try .net or .info.
Purchase the domain name.
Follow the domain registrar’s steps to purchase the name using your credit card. After you complete the checkout process, you receive an email confirming your purchase, so be sure to use a valid email address during the registration process.
After completing these steps, you need to obtain a hosting account, which I cover in the next section.
Some of the domain registrars have hosting services that you can sign up for, but you don’t have to use those services. Often, you can find hosting services for a lower cost than most domain registrars offer; it just takes a little research. Check out some of the web-hosting providers I list in the “Finding a host that provides WordPress features” section, later in this chapter.