Chapter 1

Exploring Web Design with WordPress

In This Chapter

arrow Comparing blogs and Web sites

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 Web sitebuilding 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 run small businesses and needed to add other features on their Web sites, 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 Web site–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 Web sites.

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!)

warning_4c.eps This book deals only with the self-hosted version of WordPress that you download from the official WordPress Web site (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 get them confused, 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 wrong version of WordPress.

Delving Into the Differences between Blogs and Web Sites

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 — and these people are referred to as bloggers, because they blog; and 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 in one column, and navigation links and menu items in a smaller column to the side.

Blogs have predictable features that you can assume exist, such as

check.png A chronological listing of blog posts

check.png Blog posts archived by date, category, author, and tags (micro-categories)

check.png A commenting feature that invites readers to leave comments on blog posts

check.png RSS (Really Simple Syndication) feeds for posts and comments that get syndicated in RSS Feed Readers like Google Reader

A Web site can be built with WordPress as well; however, it encompasses so much more than just having a blog on your domain. Many Web sites that are built with WordPress, such as business or corporate sites, don’t even have a blog. Other Web sites have blogs, but they’re not the main focus of the site. Several types of sites, such as business sites, have much more content and features than just blog posts to offer visitors, and WordPress allows you to have both a blog and a full-blown Web site.

tip_4c.eps When designing a Web site, 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!

9780470935033-fg0101.tif

Figure 1-1: My personal blog.

My business Web site, E.Webscapes, is a good example of using WordPress as a content management system (CMS) to design and create a small business Web site. For instance, in Figure 1-2, you see that the front page of my business Web site doesn’t look anything like a traditional blog; however, if you look near the top, you see a link to the blog.

You can manage and maintain several sections of your Web site 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 Web site, but it is secondary to the other content I display there, including:

check.png A front-page portal that displays content from several sections of my internal Web site pages

check.png A design portfolio of work (http://ewebscapes.com/browse/design-portfolio)

check.png Frequently asked questions that readers can browse to get more information on my design services

check.png A page of client testimonials

check.png Specific pages that outline the company’s services, terms, and privacy statements

check.png An e-mail contact form that allows readers to get in touch

check.png An order form that gives visitors the chance to submit a request for services

tip_4c.eps 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 of this book provides solid information about design concepts like CSS and HTML that will help you put your entire WordPress theme together for your own, unique Web site design.

My business site, shown in Figure 1-2, is just one example of a type of Web site 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 Web site, and this book concentrates on Web site design, overall, not just blog design (although, all concepts presented in the chapters in this book can be applied to both).

9780470935033-fg0102.tif

Figure 1-2: My business Web site powered by WordPress at http://ewebscapes.com.

Using WordPress as a Content Management System

A term that you will hear regularly in the WordPress community is the term CMS, which stands for content management system. Whether you run a blog, a Web site, 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 different content types to the Web with very little technical ability or skill. Because WordPress gets installed on your Web server, and you access the back-end controls — the Dashboard — via a Web address, it is considered a Web-based content management system.

You may be asking yourself how does a blogging platform, which allows you to publish content on the Web, differ from a Web-based content management system? The two seem to be interchangeable, and some say it’s just a matter of semantics. You will find that in the WordPress community, the use of the term 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 Web site that includes different content types, including (but not limited to):

check.png E-commerce: Host a store, or marketplace, to sell your products and services directly on your Web site. Figure 1-3 shows a Web site called Icon Dock (http://icondock.com), which is a great example of WordPress being used as an e-commerce online store.

check.png Photo gallery or portfolio: Create and publish photo galleries or an online portfolio of design work, creative pieces, or photography, for example.

check.png Discussion forum: Host a forum on your Web site where visitors can create new and respond to existing threads of conversation with other site visitors, based around topics of shared interest.

check.png Social community: Create an integrated social community on your WordPress site that allows visitors to create profiles, groups, and forums, enabling them to interact with other visitors on your domain.

check.png Small business: Create an entire Web site for your business that includes static pages for content that doesn’t change all that often (FAQ pages, terms of service, and sales pages, for example). You can decide to have a blog on your business site, or no blog at all — WordPress lets you do both.

9780470935033-fg0103.tif

Figure 1-3: Icon Dock is a Web site that uses WordPress to power its online storefront.

check.png Forms: Create and include forms on your Web site to allow your visitors to get in touch with you directly from the pages on your domain. You can use forms as an e-mail communication tool or sales tool, or to conduct surveys to gather feedback from your readers and/or clients.

check.png Social media integration: Gather the content that you publish in other networks like Facebook or Twitter and integrate it into your Web site using different techniques and plugins available for WordPress.

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 Web sites that use WordPress as a CMS.

In order to include these different content types on your Web site, 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 15 and 16 give you some great ideas for techniques and plugins you can use to create different features and content types on your WordPress-powered Web site.

Discovering the World of WordPress Themes

WordPress themes are simply a group of files, called templates, that determine the look and basic function of your site. There are literally thousands upon thousands of free WordPress themes available for you to choose from. WordPress has an official Free Themes Directory on its Web site at http://wordpress.org/extend/themes (shown in Figure 1-4).

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 Themes Directory are also accessible to you within your Dashboard by choosing AppearanceThemes and then clicking the Install Themes tab, as shown in Figure 1-5. (See Chapter 9 for the lowdown on installing themes.)

9780470935033-fg0104.tif

Figure 1-4: The Official WordPress Free Themes Directory.

9780470935033-fg0105.tif

Figure 1-5: Browse thousands of free WordPress themes from your Dashboard.

technicalstuff_4c.eps

remember_4c.eps WordPress themes that appear in the official directory are fully checked out, vetted, and approved for listing by WordPress. With this theme review in place, you can feel comfortable knowing that the theme you’re using meets the guidelines that WordPress has put in place for quality control.

It is possible that you will find exactly what you’re looking for in a theme using one from the Free Themes Directory; however, you and I haven’t even met, and there is something that I know about you based on the fact that you are 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.

Normally, it would be a big no-no to tell you to go ahead and copy work from another person; however, that is exactly the spirit of the WordPress community, and the spirit of open source and the GPL licensing that WordPress (and its themes and plugins) is released under (see the “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 Ten, and Chapter 11 dissects the template files. Chapters 12 and 14 take you through template tags, and how to customize the look and design of them with CSS and HTML coding.

Checking Out Premium WordPress Themes and Frameworks

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, are not always free, as in price. Several years ago, a premium theme market emerged within the WordPress community by developers and designers who put out high-quality themes and provide ongoing support for the use of those themes for a price point that ranges anywhere from $50–$300 each, depending on which theme you use.

Many of the premium theme providers put out special themes that they have termed to be a framework. Frameworks are essentially WordPress themes with all the built-in features and functionality, and 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 amount 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 for now, knowing that you will 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 Web site quickly using WordPress for a lower cost than it would take to hire someone to design and build a custom theme for you. Premium themes have their limitations, as well, however; 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 additional features, it may mean digging into the code of the template files and making some adjustments. (Later in the book, you find information on what you need to know to tweak existing themes.)

tip_4c.eps 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 methods and ways 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 Web site, listed at http://wordpress.org/extend/themes/commercial. Here are some popular theme frameworks on the market today:

check.png iThemes Builder: http://ithemes.com/purchase/builder-theme

check.png StudioPress Genesis: www.studiopress.com/themes/genesis

check.png Hybrid: http://wordpress.org/extend/themes/hybrid

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.217.68.197