WordPress® Web Design For Dummies®, 2nd Edition

Published by: John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, www.wiley.com

Copyright © 2013 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 Automattic, Inc. 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: 2013942776

ISBN 978-1-118-54661-1 (pbk); ISBN 978-1-118-54637-6 (ebk); ISBN 978-1-118-54663-5 (ebk); ISBN 978-1-118-54654-3 (ebk)

Manufactured in the United States of America

10 9 8 7 6 5 4 3 2 1

WordPress® Web Design For Dummies®

Table of Contents

To access the cheat sheet specifically for this book, go to www.dummies.com/cheatsheet/wordpresswebdesign.

Introduction

About This Book

Foolish Assumptions

Icons Used in This Book

Beyond the Book

Part I: Establishing a WordPress Foundation

Chapter 1: Exploring Web Design with WordPress

Delving Into the Differences between Blogs and Websites

Using WordPress as a Content Management System

Discovering the World of WordPress Themes

Checking Out Premium WordPress Themes and Frameworks

Getting Your Site Up and Running

Chapter 2: Understanding WordPress Requirements

Establishing Your Domain

Understanding domain name extensions

Considering the cost of a domain name

Registering your domain name

Finding a Home for Your Website

Examining what services web hosts offer

Finding a host that provides WordPress features

Planning for future needs

Being cautious about offers of unlimited space and bandwidth

Chapter 3: Installing WordPress on Your Web Server

Installing WordPress

Setting up the MySQL database

Uploading the WordPress files

Running the install script

Discovering WordPress Release Cycles

Understanding why you need to upgrade regularly

Examining release cycles

Keeping Track of WordPress Development

Chapter 4: Managing Content with WordPress

Archiving Content with WordPress

Building categories

Changing the name of a category

Creating new categories

Using static page parents and children

Customizing Permalinks

Making your post links pretty

Customizing your permalinks

Making sure that your permalinks work with your server

Syndicating Your Content with RSS Feeds

Introducing feed readers

Discovering the many WordPress RSS options

Using your RSS feeds with your social media accounts

Part II: Choosing the Right Tools

Chapter 5: Exploring Editors, Browsers, and FTP

Choosing the Right Text Editor for You

Notepad (Windows)

Notepad++ (Windows)

TextMate (Mac)

Understanding and Choosing a Web Browser

Discovering browsers and tools

Understanding cross-browser compatibility

Introducing File Transfer Protocol (FTP)

Setting Up FTP on Your Hosting Account

Transferring Files with an FTP Client

Connecting to the web server via FTP

Transferring files from point A to point B

Editing files by using FTP

Changing file permissions

Chapter 6: Choosing Graphics and Software Resources

Exploring Image Types and Formats

Comparing raster and vector images

Looking at image file formats

Exploring Graphic Design Software

Using raster-based software

Using vector-based software

Using Online Image-Optimization Tools

Finding Online Image Libraries

Chapter 7: Choosing Colors and Fonts

Understanding Color

Checking out the color wheel

Examining the RGB and hex color models

Creating Color Schemes with Helpful Tools

Exploring different color combinations

Finding RGB and hex codes

Understanding Typography Essentials

Exploring font styles

Discovering web-safe fonts for content

Finding and Using Fonts for Graphic Design

Finding the right fonts for your project

Installing fonts on your computer

Chapter 8: Planning Your Design Strategy

Choosing the Width of Your Website

Designing with a fixed width

Designing with a fluid width

Designing a responsive layout

Choosing the Number of Columns

Determining Website Navigation

Understanding Content Display Options

Testing Your Design in a Sandbox Environment

Creating a sandbox environment

Using a plugin to back up and transfer from your sandbox

Part III: Working with WordPress Themes

Chapter 9: Finding and Installing a WordPress Theme

Finding and Installing a Theme from the Themes Directory

Deciding to Use a Premium Theme

Chapter 10: Working with the Default Theme: Twenty Thirteen

Exploring the Layout and Structure

Customizing the Header Image

Selecting one of the available header images

Uploading your own header image

Including Custom Navigation Menus

Enhancing Your Website with Widgets

Understanding how widgets work

Adding widgets to your sidebar or footer

Using the Text widget

Adding the RSS widget

Chapter 11: Dissecting Themes and Templates

Understanding How PHP and MySQL Work Together

Exploring PHP Basics

Examining the makeup of a template tag

Trying out a little PHP

Managing Your MySQL Database

Viewing the Template Files in a WordPress Theme

Examining the Templates That Make Up a WordPress Theme

The stylesheet

The Main Index and The Loop

The Header template

The Sidebar template

The Footer template

Other template files

Exploring Template Tags, Values, and Parameters

Customizing Your Blog Posts with Template Tags

Putting It All Together

Connecting the templates

Using additional stylesheets

Chapter 12: Displaying Content with Widgets and Template Tags

Exploring Common Template Tags

Calendar

List pages

Post archives

Categories

Content types (WP_Query tag)

Miscellaneous but useful template tags

Adding New Widget Areas to Your Theme

Registering your widget areas

Adding widget areas to your template files

Using Template Files

Creating named templates

Creating and using template parts

Exploring content-specific standard templates

Using Page templates

Adding Theme Support for Built-In Features

Adding support for custom navigation menus

Adding support for custom post types

Adding support for post formats

Adding support for post thumbnails

Chapter 13: Understanding Parent and Child Themes

Customizing Theme Style with Child Themes

Creating a child theme

Loading a parent theme’s style

Customizing the parent theme’s styling

Using images in child theme designs

Modifying Theme Structure with Child Themes

Overriding parent template files

Adding new template files

Removing template files

Modifying the theme functions file

Preparing a Parent Theme

Part IV: Building Your Custom Website

Chapter 14: Using Basic CSS and HTML to Customize Your Site Design

Styling with CSS: The Basics

Introducing CSS

CSS selectors

Classes and IDs

CSS properties and values

Changing the Background Image or Color Used in Your Theme

Adding the custom background feature to a theme

Customizing the background

Changing the background using CSS

Defining and Positioning Your Header Image with CSS

Defining a background image to use as a header

Positioning, repeating, or scrolling your background image

Changing Basic Elements to Create a Unique Look for Your Site

Adding background colors and image effects

Choosing a font family, color, and size

Using borders in your design

Understanding Basic HTML Techniques to Use on Your Site

Inserting images

Inserting hyperlinks

Inserting lists

Chapter 15: Designing for WordPress as a CMS

Creating the Front Page of Your Website

Creating a static page

Assigning a static page as the front page

Tweaking the page to look like a website rather than a blog

Adding a Blog to Your Website

Creating a blank page for the blog

Assigning the new page as a blog

Creating Custom Page Templates to Achieve Different Layouts and Styles

Viewing the default Page template (page.php)

Creating a new category Page template

Comparing two Page templates

Creating Different Sidebar and Footer Templates for Your Pages

Creating Custom Styles for Sticky, Category, and Tag Posts

Chapter 16: Enhancing Your Website with Plugins

Installing WordPress Plugins via the Dashboard

Finding free plugins

Installing and activating a plugin

Installing Plugins Manually

Exploring E-Commerce Plugins to Use on Your Site

Understanding what you can do with e-commerce plugins

Examining some recommended plugins

Creating Photo Galleries or Portfolios

Inserting images into your page or post

Adding image styles to your stylesheet

Inserting a photo gallery

Creating Web Forms for Your Site with Plugins

Exploring different types of forms you can use on your site

Helpful plugins to create forms

Building a Social Community with BuddyPress

Using Plugins to Integrate Popular Social Networks with Your Blog

Integrating Twitter with Twitter Tools

Integrating Facebook with Wordbooker

Part V: The Part of Tens

Chapter 17: Ten Powerful Plugins for WordPress

All in One SEO Pack

BackupBuddy

WP-Print

PluginBuddy Mobile

ShareThis

Subscribe to Comments

WordPress.com Stats

WP Security Scan

WP Super Cache

WPMU Premium

Chapter 18: Ten Well-Designed Sites That Use WordPress as a CMS

IconDock

Kate Rusby

Katy Perry

LIVESTRONG

Mozilla Labs

MSNBC

Time Healthland

WebDevStudios

WeGraphics

WordPress.org

About the Author

Cheat Sheet

Connect with Dummies

Introduction

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, 2nd 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.

About This Book

This book starts by walking you through the basics of understanding and setting up WordPress so that you can

Understand the fundamental difference between a blog and a website.

Define what a content management system (CMS) is.

Explore different ways that websites use WordPress.

Get to know WordPress basic requirements.

Explore web- hosting recommendations.

Install WordPress on your web server.

Discover ways to publish and manage your content.

In this book, you also discover the right tools to use for publishing and designing with WordPress, including tools that help you

Write and edit code.

Transfer files from your computer to your web server.

Create, edit, and design graphics.

Choose colors schemes and fonts.

Plan your design strategy.

WordPress Web Design For Dummies, 2nd 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.

Foolish Assumptions

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, 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 http://wordpress.org. The other version of WordPress, the hosted service at http://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 http://wordpress.com is not covered in this book.

Other assumptions I make about you include these:

You’re interested in finding out how to tweak and/or build a WordPress theme. This includes aspects of graphic design, CSS, and HTML.

You have a domain name and a hosting account, or you will set them up very soon, as described in Chapter 2. (You can’t use the hosted WordPress.com service to accomplish everything I present in this book.)

You’re a savvy Internet user, and you can use the Internet to search for information, download files, and browse websites and blogs.

You have a basic understanding of what blogs are and how people use them to communicate their thoughts and content on the web.

Icons Used in This Book

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.

Beyond the Book

To supplement the content in this book, you can find extra content online. Go online to find the following items:

Cheat Sheet: At 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.

Dummies.com online articles: At www.dummies.com/extras/wordpresswebdesign, you'll discover great add-on web design tools for the popular Firefox browser, explore the commercial WordPress theme offerings available on the web today, learn how to optimize your WordPress website for search engines, and discover ten great free themes that you can start using on your WordPress website today!

Updates: Occasionally, Wiley's technology books are updated. If this book has technical updates, they'll be posted at www.dummies.com/extras/wordpresswebdesign.

Part I

Establishing a WordPress Foundation

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.

1

Exploring Web Design with WordPress

In This Chapter

arrow Comparing blogs and websites

arrow Introducing WordPress as a content management system (CMS)

arrow Understanding ways to publish content with WordPress

arrow 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 light bulb 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 (http://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 (http://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.

Delving Into the Differences between Blogs and Websites

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.

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!