Establishing a WordPress Foundation
Exploring Web Design with WordPress
Figure 1-1: My personal blog at http://lisasabin-wilson.com/.
When creating a website, it's essential to carefully plan which WordPress features to utilize and determine their placement throughout the site Be sure to refer to Chapter 8 for guidance on developing your design strategy effectively.
My business website, WebDevStudios, effectively demonstrates the use of WordPress as a content management system (CMS) for designing and creating a small business site The homepage is distinct from a conventional blog layout, yet it includes a link to the blog at the top, showcasing the versatility of WordPress in web design.
With a single installation of WordPress on your web hosting account, you can efficiently manage multiple sections of your website Additionally, you can customize the visual appearance and layout of your site by adjusting the WordPress theme templates, which will be discussed further in this chapter.
Figure 1-2: My business website is powered by WordPress.
I have a blog on my business website, but it’s secondary to the other content I display there, including
✓ A front-page portal that displays content from several sections of my internal website pages
✓ A design portfolio of work (http://webdevstudios.com/work- portfolio)
✓ Frequently asked questions that readers can browse to get more infor- mation on my design services ✓ A page of client testimonials
✓ Specific pages that outline the company’s services, terms, and privacy statements ✓ An e-mail contact form that allows readers to get in touch
✓ An order form that gives visitors the chance to submit a request for services
Chapter 1: Exploring Web Design with WordPress
Part III of this book offers essential guidance on working with and creating WordPress theme templates, while Part IV delves into crucial design concepts such as CSS and HTML, equipping you to assemble a distinctive website design for your WordPress theme.
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 the term
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.
Since its launch in 2003, WordPress has established itself as the leading blogging platform globally Over the years, it has transformed from a simple blogging tool into a comprehensive content management system (CMS), enabling users to publish various content types online with minimal technical expertise As a web-based CMS, WordPress is installed on a web server, allowing users to manage their content through the Dashboard accessed via a web address.
A blogging platform and a web-based content management system (CMS) may seem similar, but they serve distinct purposes In the WordPress community, a CMS is defined by its capability to publish various content types through a single WordPress installation Beyond just blogging, WordPress allows users to create and design comprehensive websites that incorporate multiple content formats.
E-commerce allows you to host a store or marketplace on your website, enabling direct sales of products and services A notable example of this is IconDock, which effectively utilizes WordPress as an e-commerce platform.
Figure 1-3: IconDock is a website that uses WordPress to power its online storefront.
✓ Photo gallery or portfolio: Create and publish photo galleries or an online portfolio of design work, creative pieces, or photography, for example.
✓ Discussion forum: Host a forum on your website where visitors can create new and respond to existing threads of conversation with other site visitors, based around topics of shared interest.
✓ 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.
For small businesses, it's essential to build a comprehensive website featuring static pages for content that remains relatively unchanged, such as FAQ pages, terms of service, and sales pages Additionally, you have the flexibility to include a blog on your site or opt out, as WordPress accommodates both options.
Incorporate forms on your website to enable direct communication with visitors, serving as tools for email correspondence, sales, or surveys to collect valuable feedback from your audience.
Integrate your social media content from platforms like Facebook and Twitter into your website by utilizing various techniques and plugins available for WordPress.
Chapter 1: Exploring Web Design with WordPress
WordPress is not just a blogging platform; it serves as a versatile content management system (CMS) that allows you to publish and manage various types of content For more real-life examples of websites utilizing WordPress as a CMS, refer to Chapter 18.
To enhance your website with various content types, particularly for e-commerce and social communities, it's essential to install specific plugins or scripts that expand the functionality of WordPress.
When designing your WordPress theme, it's essential to consider various content types, such as discussion forums and photo galleries, by utilizing template tags, CSS, and HTML This is further elaborated in Part III of this book.
Chapters 9 to 13 provide essential insights for developing WordPress themes and templates, while Chapters 15 and 16 offer innovative techniques and plugin suggestions to enhance features and content types on your WordPress website.
Discovering the World of WordPress Themes
WordPress themes are collections of template files that define the appearance and fundamental functionality of your website There are thousands of free WordPress themes available for selection, and you can explore them in the official Themes Directory at http://wordpress.org/extend/themes.
Understanding WordPress Requirements
Considering the cost of a domain name
Registering a domain typically ranges from $10 to $30 annually, depending on the registrar you choose and any additional options, such as privacy features and search-engine submission services, that you select during the registration process.
After paying the initial domain registration fee, you will need to pay a renewal fee after one, two, or five years, depending on your chosen registration period If you plan to use your domain long-term, many registrars offer discounts for multi-year registrations Most registrars also provide an auto-renew service, which automatically renews your domain and charges your credit card Additionally, they send a reminder a few months before the renewal date.
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 officially recognized by the Internet Corporation for Assigned Names and Numbers (ICANN) While there are numerous registrars available, the following list highlights popular options known for their industry longevity, competitive pricing, and a wide range of additional services, including web hosting and website traffic enhancement.
✓ GoDaddy.com: http://godaddy.com
✓ Register.com: http://register.com
✓ Network Solutions: http://networksolutions.com
✓ NamesDirect.com/Dotster: http://namesdirect.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 At the time of this writing,
GoDaddy.com currently has domain name registration starting at $9.99 per year.
Enter domain name to check availability.
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:
Effective planning is essential when choosing a domain name, as it serves as a key element of your brand identity for your website or blog Consider various potential names for your site to ensure a strong foundation for your online presence.
2 Verify the domain name’s availability.
To check the availability of a domain name, visit the website of your preferred domain registrar and locate the section where you can input the domain name, usually found in a short text field.
Chapter 2: Understanding WordPress Requirements whether it’s available If the domain name isn’t available as a com, try net or info.
To purchase a domain name, follow the steps provided by the domain registrar and complete the checkout process using your credit card After your purchase, you will receive a confirmation email, so it's essential to use a valid email address during registration.
After completing these steps, you need to obtain a hosting account, which I cover in the next section.
Many domain registrars offer hosting services, but you are not obligated to use them With some research, you can often find more affordable hosting options than those provided by registrars For recommendations on web-hosting providers that support WordPress features, refer to the section titled “Finding a host that provides WordPress features” later in this chapter.
Finding a Home for Your Website
After you register your domain, you need to find a place for it to live — a web host — before you begin working with WordPress.
This article explores the various features typically included with basic web hosting accounts and provides recommendations for hosting providers that support the WordPress platform.
Additionally, I provide you with some suggestions on how you can determine how much hard drive space and bandwidth you may need for your website.
Examining what services web hosts offer
A web host is an entity that offers website owners space on a web server and bandwidth for transferring files Typically, these hosting services require a monthly or annual payment, unless you have a connection that can provide server space and bandwidth at no cost.
Quality web hosting services can be found for as low as $3 to $10 per month, depending on the provider For a curated list of recommended hosts that specialize in WordPress, refer to the next section of this chapter.
Your web host functions like a garage for your website, offering essential services such as hard-drive space for storage and bandwidth for data transfer While the host provides the infrastructure, they typically do not support third-party applications like WordPress unless you opt for additional services.
Hard drive space refers to the storage capacity of your computer's hard drive, which determines how much data it can hold For instance, an 80GB hard drive can store up to 80GB of files Similarly, your web hosting account has a specific limit on hard drive space; for example, if your host offers 10GB, that is the maximum amount of data you can store To increase your storage capacity, you will need to upgrade your plan, and most web hosts provide options for such upgrades.
For a self-hosted WordPress website, a storage space of 3–5GB is typically sufficient If you require more space later on, you can easily reach out to your hosting provider for an upgrade.
Websites that host large files like videos, audio, or images require more hard drive space than those that do not It's essential to consider this when selecting your hosting account, as proper planning can prevent future complications.
Bandwidth refers to the volume of data transmitted from one point to another within a specific timeframe, typically measured in seconds To illustrate, consider a rural home that relies on a private well for water supply The pipes connecting the well to the house facilitate a continuous flow of water, allowing residents to enjoy amenities like long, hot showers while managing household chores simultaneously.
Installing WordPress on Your Web Server
Setting up the MySQL database
WordPress is a powerful personal publishing system built on a PHP/MySQL platform, enabling users to create and manage their own websites effortlessly, without any coding knowledge It dynamically stores all content, including options, posts, and comments, in a MySQL database within your hosting account.
When visitors access your website, their requests are sent to your server, where the PHP programming language processes them It retrieves the necessary information from the MySQL database and displays it to users via their web browsers.
Web hosts vary in how they allow you to access and manage your MySQL databases This section focuses on cPanel, a widely used hosting interface While the specific setup may differ depending on your host's interface, the fundamental steps for managing your databases remain consistent across platforms.
To set up the MySQL database for your WordPress site with cPanel, follow these steps:
1 Log in to your hosting account administration interface with the user- name and password assigned to you by your web host.
I use the cPanel administration interface, but your host may provide NetAdmin or Plesk, for example.
2 Locate the MySQL Database Administration icon in your cPanel.
In cPanel, click the MySQL Databases icon.
The MySQL Databases page appears, as shown in Figure 3-1.
3 Enter a name for your database in the New Database text box.
Be sure to make note of the database name because you need it when installing WordPress.
When creating a MySQL database, it's important to choose a recognizable name, especially if you manage multiple databases Naming the database something like "WordPress" or "wpblog" ensures that you can easily identify it later, making it simpler to access and make configuration changes when needed.
4 Click the Create Database button.
A message appears, confirming that the database has been created.
Figure 3-1: The MySQL Databases page in cPanel.
5 Click the Go Back link or the Back button on your browser toolbar.
This returns you to the MySQL Databases page where your newly cre- ated database is listed under Current Databases.
6 Scroll down the page to the Add New User area, enter a username and password for your database, and then click the Create User button.
A confirmation message appears, stating that the username was created with the password you specified.
To enhance security, ensure your password is not easily guessable by hackers cPanel offers a useful tool during the database creation process that generates a highly secure password, combining numbers, letters, and symbols to make it nearly impossible to crack.
Chapter 3: Installing WordPress on Your Web Server
Ensure you record the database name, username, and password created in step 3, as you will need this information for the next section before installing WordPress on your web server Write it down or save it in a text editor to keep it accessible.
7 Click the Go Back link or the Back button on your browser toolbar.
This returns you to the MySQL Databases page.
8 In the Add Users to Database section, choose the user you just set up from the User drop-down list and then choose the database from the Database drop-down list.
The MySQL Account Maintenance, Manage User Privileges page appears.
9 Select the All Privileges check box to assign user privileges.
Because you’re the administrator (owner) of this database, make sure you assign all privileges to the new user you just created.
10 Click the Make Changes button.
A page opens with a confirmation message that you’ve added the selected user to the selected database.
11 Click the Go Back link to return to the MySQL Databases page to see your new MySQL database and user listed on the MySQL Databases page.
To upload WordPress files to your host, navigate to the folder on your computer where you extracted the downloaded WordPress software The left side of Figure 3-2 shows the WordPress files on my local computer, while the right side displays the same files on my web server.
To upload files to your web server, connect using your FTP client and transfer all files to the root directory of your hosting account, as detailed in Chapter 5.
To identify your root directory, reach out to your hosting provider, as setups vary between providers For instance, my web server's root directory is the public_html folder, while some clients have theirs in the httpdocs folder The specific location depends on your hosting provider's configuration, so when uncertain, don't hesitate to ask for clarification.
Figure 3-2: Using an FTP client makes file transfers easy.
Here are a few things to keep in mind when you upload your files:
To install WordPress, upload the contents of the /wordpress folder to your web server, ensuring you do not upload the folder itself Most FTP client software allows you to select all files and easily drag and drop them to your server, while other programs require you to highlight the files and click a Transfer button.
When transferring files via FTP for your WordPress installation, it's crucial to select the appropriate transfer mode, which can be either ASCII or binary Most FTP clients automatically detect the transfer mode, but understanding the differences is essential for troubleshooting potential issues in the future.
• Binary transfer mode is how images (such as JPG, GIF, BMP, and PNG files) are transferred via FTP.
• ASCII transfer mode is for everything else (text files, PHP files, JavaScript, and so on).
Setting your FTP client to auto-detect transfer mode is generally reliable; however, if you encounter problems with file loading on your site, consider retransferring the files using the correct transfer mode.
Chapter 3: Installing WordPress on Your Web Server
You can install WordPress in a folder other than the root directory of your web server It is not necessary to move files to the root; instead, you can set up WordPress in a subdomain or a specific folder For instance, if you prefer your blog to be accessible at http://yourdomain.com/blog, simply upload the WordPress files to a /blog directory.
To ensure proper handling of files on your server, it is essential to set the correct file permissions Generally, PHP files should have a permission setting of 666, while file folders require a permission setting of 755.
Managing Content with WordPress
Content organized by category, known as a Magazine Theme, presents information by topic instead of a straightforward chronological order An example of this is the Modern Blogger theme by StartBox, which can be viewed at [this link](http://demo.wpstartbox.com/?theme=modern-blogger).
Learn how to create your own WordPress theme by exploring Part III of this book, and don't miss Chapter 12 for insights on using template tags to showcase category-specific content.
Tagging your posts with micro-keywords enhances search engine optimization (SEO) by organizing related content, making it easier for readers to navigate and discover relevant information on your site For a deeper understanding of how tags differ from categories, refer to the sidebar “What are tags, and how/why do you use them?” later in this chapter.
Figure 4-2: An example of a Magazine Theme created with WordPress.
✓ Date based: Your content is automatically archived by date based on the day, month, year, and time you published it.
An author archive is automatically generated based on the contributions of each author to a post or page, making it a valuable feature for websites with multiple content creators.
WordPress features a built-in search function that enables both you and your readers to easily search for keywords, providing an archive listing of content relevant to the selected keyword.
✓ Custom post types: You can build custom post types based on the kind of content your site offers — you can find more information on this topic in Chapter 12.
WordPress features a comprehensive media library that allows users to upload various media files, including photos, documents, videos, and audio files This functionality enables the creation of organized archives, such as photo galleries, e-book collections in PDF format, and video galleries.
In WordPress, a category is what you determine to be the main topic of a blog post Through categories, you can file your blog posts into topics by subject
Enhance your blog's user experience by utilizing WordPress to categorize your posts effectively This allows visitors to easily click on their preferred categories and access relevant content Be aware that the categories you create can be showcased in various locations on your blog, improving navigation and engagement.
In many WordPress themes, posts feature a title followed by a statement like “Filed In: Category 1, Category 2,” allowing readers to click on category names to view all related posts Additionally, a single post can be assigned to multiple categories.
You can enhance your blog's sidebar by adding a comprehensive list of category titles using the Categories widget available in your WordPress installation This feature allows readers to easily navigate to a dedicated page that displays all posts related to a specific category.
Subcategories enhance the main category by detailing specific topics related to it In the WordPress Dashboard, you can find subcategories listed directly beneath the main category on the Manage Categories page (navigate to Posts ➪ Categories).
Chapter 4: Managing Content with WordPress
Changing the name of a category
After installing WordPress, you'll notice a default category called "Uncategorized" on the Categories page This generic name should be replaced with a more specific category that reflects your content better.
(On my blog, I changed it to Life in General Although that name’s still a bit on the generic side, it doesn’t sound quite so well, uncategorized.)
Figure 4-3: The Categories page in the Dashboard of a brand-new blog shows the default
The default category acts as a fail-safe in WordPress, automatically assigning any unclassified posts to it, regardless of the category name chosen.
So how do you change the name of that default category? When you’re logged in to your WordPress Dashboard, just follow these steps:
The Categories page opens, containing all the tools you need to set up and edit category titles for your blog.
2 Click the title of the category you want to edit.
For example, if you want to change the Uncategorized category, click the Uncategorized link The Edit Category page appears, as shown in Figure 4-4.
3 Type the new name for the category in the Name text box and then type the new slug in the Slug text box.
Slug refers to the word(s) used in the web address for the specific category For example, the Books category has a web address of http://yourdomain.com/category/books
If you change the slug to Books I Like, the web address is http://yourdomain.com/category/books-i-like
What are tags, and how/why do you use them?
Tags are distinct from categories, yet many people often confuse the two Tags are clickable, comma-separated keywords that allow for microcategorization of a post by specifying its topics Unlike WordPress categories, tags do not follow a hierarchical structure, meaning there are no parent or child tags For instance, if you write a post about your dog, you can categorize it under Pets while also adding specific tags like poodle or small dogs When visitors click on the poodle tag, they can access all posts associated with that tag.
Another reason to use tags: When they crawl your site, search-engine spiders harvest tags, so tags help other people find your site when they search for specific keywords.
You can manage your tags in the WordPress Dashboard by choosing Posts➪Tags The Tags page opens where you can view, edit, delete, and add new tags.
Chapter 4: Managing Content with WordPress
Figure 4-4: Edit a category in WordPress on the Edit Category page.
WordPress automatically inserts a dash between the slug words in the web address.
4 Choose a parent category from the Parent drop-down list.
If you want this category to be a main category, not a subcategory, choose None.
5 (Optional) Type a description of the category in the Description text box.
Use this description to remind yourself what your category is about
Certain WordPress themes showcase the category description on your website, enhancing the user experience for visitors You can determine if your theme supports this feature by checking if the category description appears on your category pages For more details on themes, refer to Part III of this book.
The information you just edited is saved, and the Categories page reloads, showing your new category name.
As your blog evolves over time, you will consistently introduce new categories to better organize and archive your posts There is no restriction on the number of categories and subcategories you can establish, allowing for comprehensive content management.
Creating a new category is as easy as following these steps:
The Categories page opens The left side of the Categories page displays the Add New Category section, shown in Figure 4-5.
2 Type the name of your new category in the Name text box.
Suppose that you want to create a category in which you file all your posts about the books you read In the Name text box, type something like Books I Enjoy.
Figure 4-5: Create a new category on your blog.
Chapter 4: Managing Content with WordPress
3 Type a name in the Slug text box.