Backing Up Your Database

Before upgrading your WordPress software installation, make sure you back up your database. This step isn’t required, of course, but it’s a smart step to take to safeguard your Web site and ensure you have a complete copy of your Web site data in the event that your upgrade goes wrong.

The best way to back up your database is to use the MySQL administration
interface provided to you by your Web hosting provider. (Book II, Chapter 5
takes you through the steps of creating a new database by using the phpMy-
Admin interface.)

cPanel is a Web hosting interface provided by many Web hosts as a Web
hosting account management tool that contains phpMyAdmin as the pre-
ferred tool to use to manage and administer databases. Not all Web hosts
use cPanel or phpMyAdmin, however, so if yours doesn’t, you need to con-
sult the user documentation for the tools that your Web host provides. The
instructions in this chapter are provided by using cPanel and phpMyAdmin.

The following takes you through the steps of creating a database backup, using the same phpMyAdmin interface:

Read More

Backup your database and files

The second link, Please Update Now, takes you to another page in the

WordPress Dashboard — the WordPress Updates page, as shown in Figure 6-3.

Important: before updating, please backup your database and files. For help with updates, visit the Updating WordPress Codex page

At the very top of the WordPress Updates page is another important message for you:

 

 

Both links in the message take you to pages in the WordPress Codex that
contain helpful information on creating backups and updating WordPress.

Book II, Chapter 7 has extensive information on how to back up your WordPress Web site, content, and files.

The WordPress Updates page tells you that an update version of WordPress is available. You can update two ways:

 

✦ Automatically, by using the built-in WordPress updater

✦ Manually, by downloading the files and installing them on your server These ways to update are discussed later in the chapter.

Read More

Getting Notified of an Available Upgrade

Say you have WordPress installed and you’ve been happily publishing content to your Web site with it for several weeks, maybe even months, then one day you log in to your Dashboard and see a message at the top of your screen you’ve never seen before that reads, “WordPress X.X.X is available! Please update now.” (Figure 6-2 shows the message and a small black circle, or notification bubble, on the left side of the page.)

 

Both the message at the top of the page and the notification bubble in the

Dashboard menu are visual indicators that you’re using an outdated version of WordPress and that you can (and need to) upgrade the software.

The message at the top of your Dashboard includes two links that you can
click for more information. (Refer to Figure 6-2.) The first is a link called
WordPress 3.0.1. Clicking this link takes you to the WordPress Codex page
titled Version 3.0.1, which is filled with information about the version
upgrade, including

 

✦ Installation/upgrade information

✦ Summary of the development cycle for this version ✦ List of files that have been revised

 

Read More

Getting Notified of an Available Upgrade

After you install WordPress and log in for the first time, you can see the version number at the bottom-right corner of the WordPress Dashboard, as shown in Fig

its platform roughly once every 120 days (or every 4 months). That chapter also explains why you need to keep your WordPress software up-to-date by using the most recent version for security purposes, mostly, but also to make sure you’re taking advantage of all the latest features the WordPress developers pack within every major new release.
In this chapter, you discover the WordPress upgrade notification system
and find out what to do when WordPress notifies you that a new version
is available. This chapter also covers the best practices to upgrade the
WordPress platform on your site to ensure the best possible outcome
(that is, how not to break your Web site after a WordPress upgrade).

ure 6-1. Therefore, if anyone asks what version you’re using, you know exactly where to look to find out.

Read More

Upgrading WordPress

The schedule of WordPress development and release cycles shows you that WordPress releases a new version (upgrade) of

its platform roughly once every 120 days (or every 4 months). That chapter also explains why you need to keep your WordPress software up-to-date by using the most recent version for security purposes, mostly, but also to make sure you’re taking advantage of all the latest features the WordPress developers pack within every major new release.

In this chapter, you discover the WordPress upgrade notification system
and find out what to do when WordPress notifies you that a new version
is available. This chapter also covers the best practices to upgrade the
WordPress platform on your site to ensure the best possible outcome
(that is, how not to break your Web site after a WordPress upgrade).

Read More

BrowserCam

BrowserCam (www.browsercam.com) is another online

cross-browser compatibility-testing tool that captures your Web site and
takes a picture of it in different browsers. BrowserCam even has a tool
that allows you to access its computers remotely so you can see your
Web site in a live browser environment, instead of just getting a screen-
shot of your Web site. This service isn’t free; the cost starts at $39.95
per month.

Read More

Browsershots.org

This is an online, browser-based tool. Visit the

Browsershots.org Web site (http://browsershots.org), enter your
desired URL in the Enter URL Here field at the top of the site, and then
choose your desired browsers and operating systems. Browsershots.
org takes a screenshot of your Web site in each of the browsers that you
indicated so you can see what your Web site looks like in each. From
there, you can fix any problems and retest again, if needed.

Read More

Layout Engines, Browser Types, and CSS Version Support

Layout Engine         Browser System                  Supports CSS Version

Gecko                   Mozilla Firefox                    CSS v1, v2, v3 (partially) *

Presto                    Opera                              CSS v1, v2, v3 (partially) *

Trident                  Internet Explorer              CSS v1, v2, v3 (slightly) *

WebKit                   Google Chrome, Safari         CSS v1, v2, v3 (partially) *

*Partially and slightly indicate that the layout engines listed don’t fully support CSS v3, at this time. Partial support indicates that the layout engine understands CSS v3 properties, but they aren’t supported entirely. Slight support indicates that the layout engine is understood by the browser, but support is incomplete, and at times, buggy.

 The absolute best way to test your Web site across the various browser sys-

tems is to download the browser to your computer and then load your Web
site in it, checking for correct rendering as you go. However, if you only have
a Windows computer, you can’t really test your Web site on a Mac, and vice
versa. Don’t fret, though, because here are two alternatives for you:

Read More

Understanding cross-browser compatibility

Cross-browser compatibility is the practice of testing designs across all major browser systems and is important in Web design because you don’t just design Web sites for yourself, but for an entire audience on the Web. Because you have no idea which browser your audience uses, it’s essential that you test your designs in all the different systems to ensure that all the visitors to your Web site have the same experience.
The problem that Web designers run into with Web browsers is that each
browser system uses a different layout engine that renders CSS differently.
The difference in CSS rendering can sometimes make adjusting your CSS
styling to account for the different layout engines a challenge. Additionally,
not every layout engine supports all versions of CSS. Table 5-1 illustrates the
different layout engines, the browsers, and the CSS version it supports to

give you an idea of what you’re dealing with when it comes to the different
browser systems. More information on CSS versions, support, and validation
is in Book VI.

Read More

Safari

Safari (www.apple.com/safari) is installed on every Mac

operating system from the large iMacs to MacBook laptops to iPads and
iPhones. In short, Safari is an Apple product; however, Safari can be
installed on a Windows operating system. Rather than a bunch of add-
ons or extensions that you can download and install for Web develop-

 

ment, Safari has built-in Web developer tools, including

• A Developer toolbar with tools used for Web site manipulation,
testing, and debugging

• A Web Inspector with a wealth of Web development tools, including
an Elements pane where you can inspect CSS and HTML markup

• A Resources pane that displays Web site resources by date, size,
and speed

• A JavaScript debugger

• A Timeline pane that analyzes a Web site’s behavior over time

• A JavaScript Profiler that lists the performance characteristics of
scripts that run on a Web site

• A Console pane for debugging

• A Snippet Editor to test HTML markup

Read More

Opera

The Opera browser (www.opera.com) is available for Windows,
Mac, and Linux operating systems and markets itself as being fast,
secure, and completely in line with open Web standards, including
cutting edge development languages like HTML5 and CSS3. Opera has
add-ons available as well, which you can find on its Web site here: www.
opera.com/addons.

Read More

Google Chrome

✦ Google Chrome: Google developed and released this Web browser
(www.google.com/chrome). You can download this browser only for
Windows operating systems, at this time. Chrome has a smaller devel-
opment community and has add-ons, dubbed extensions, that you can
download and install, just like Firefox — although not as many . . . yet.
You can find Web development extensions for Google Chrome on the
Web site here: https://chrome.google.com/extensions/
featured/Web_dev.

Read More

Editing Files and Testing Performance with WordPress Tools

✦ Firebug: Firebug (https://addons.mozilla.org/firefox/

addon/1843) is an add-on that integrates into the Firefox browser and
provides you with a host of tools for Web development, including the
ability to edit, debug, and monitor the behaviors of CSS, HTML, and
JavaScript live for any Web page you view. We can’t live without this
tool mainly because of the CSS editing capabilities. We can open a Web
page in Firefox, activate the CSS editing tool in Firebug, and do live CSS
editing, which makes our Web site development go much faster.

✦ YSlow: To use YSlow (https://addons.mozilla.org/en-US/

firefox/addon/5369), you have to install the Firebug add-on. YSlow
analyzes Web pages and makes suggestions as to how you can improve
the speed and load time of your Web site by incorporating things like
image size optimization, JavaScript, or CSS, or by reducing the over-
all size of your Web page. We use this tool every time we deploy a
WordPress site to get recommendations on how to improve the site
loading time.

✦ Web Developer: Web Developer (https://addons.mozilla.org/
firefox/addon/60) adds a very helpful toolbar in your Firefox
browser that gives you access to several types of Web development
tools, such as CSS viewing, CSS editing, image information, browser
resizing, HTML and CSS validation tools, HTML viewing and editing,
and more. We use the Web Developer toolbar on a constant basis to
help us develop, test, and debug Web sites that we create.

 

As much as we prefer the Mozilla Firefox browser, many users consider it

somewhat of a resource/memory hog. We’ve experienced this as well, but it
isn’t enough to make us stop using it. However, we have to shut down and
restart the Mozilla Firefox browser at least two times during a normal work-
day to prevent it from crashing our system with its resource use

Read More

Mozilla Firefox

One of the main reasons why Firefox is our personal browser of choice is

because it’s an open source software project with a development community
that releases very helpful add-ons and tools to extend its capabilities beyond
a Web browser, turning it into a Web development tool, in many cases.

You can find Firefox add-ons at https://addons.mozilla.org/firefox.
You can find add-ons for just about everything from the appearance of your
Firefox browser to browser-based games. At the time of writing, Mozilla
reports that 2,139,478,273 add-ons have been downloaded from its Web site.

Obviously, we can’t cover all the add-ons available for Firefox in this chapter
because this is a book, not an encyclopedia. However, here are three add-
ons for Firefox that we use on a daily basis to make our days as full-time
Web designers and developers easier, more efficient, and just more fun:

Read More

Mozilla Firefox

Firefox,  is the second most popular browser on the Web and has emerged over the years to be a solid competitor for IE. Designers and developers tend to prefer Firefox to Internet Explorer because Mozilla (the makers of Firefox) use a solid layout engine that adheres closely to

open Web standards and supports and renders CSS better.

Firefox is available for download and usage on Windows, Mac, and Linux
operating systems in 76 languages. You can download it from the official
Mozilla Web site at http://mozilla.com.

Read More