Monday 22 July 2013

Notepad++ (Windows)

Notepad++ is a text editor for Windows users and is often referred to as

“Notepad on steroids.” The interface of Notepad++ looks a lot like the regu-
lar Notepad but that’s where the similarities end. Notepad++ is a text editor
with advanced features, such as color-coded syntax (see the nearby sidebar,
“Code syntax highlighting,” for information on syntax highlighting), code
indentation, and line numbering, which make it an extremely useful and
helpful application for writing and editing code. Figure 5-5 demonstrates
the color-coded syntax where the functions of the code are represented
by colors, making it easier for you (or the programmer) to pick different
sections of the code (such as functions or HTML).

Notepad++ supports many programming languages, including the main ones
you use for this book: CSS, HTML, and PHP. Notepad++ is free and open
source software; you can download it to your Windows computer from its
Website at http://notepad-plus-plus.org.

Notepad (Windows)

Notepad, by default, saves files with a .txt extension. With WordPress tem-
plates and theme files, you typically save files with a .php or .css exten-
sion, so you want to take care and make sure that you save files correctly.
To save as a .php or .css extension with Notepad, follow these quick steps:

1. Open Notepad by clicking the Start button and then choosing
Programs➪Accessories➪Notepad.

2. Create your CSS or PHP document.

Check out  the  minibook for a simple PHP document you can create.

3. Choose File➪Save As and then select the location to save the docu-
ment in the Save In drop-down list in the dialog box that appears.

4. Type the name of the file, including the extension, in the File
Name field.

In Figure 5-4, the name of the file is header.php. If you’re saving a
CSS document, the extension is .css (for example: style.css).

5. Choose All Files in the Save as Type drop-down list.

By default, Notepad wants to save it as a text document (.txt).

6. Leave ANSI selected in the Encoding field and then click the
Save button.

Notepad (Windows)

Notepad is a basic plain-text editor that you can use to write code without the fuss and worry of text formatting; it doesn’t support any special document formatting or characters at all, which is what makes it great for writing code and Web documents.

Notepad is the go-to text editor for most Windows users because it’s a

Microsoft product packaged in every Windows operating system. Notepad
is typically used for viewing and editing text files with the .txt extension,
but many people, including myself, use it to create basic CSS and HTML
files as well.

Choosing the text editor that’s right for you

In this post, you dig into WordPress themes, work with CSS and HTML, and

type template tags and a bit of PHP; this chapter arms you with the tools you need to gather to prepare for a smooth and efficient experience later.

Next to good ol’ pen and paper, nothing beats a good, solid text editor. We
admit, we’re a little old school, so for things like grocery lists and jotting
down ideas, we stick with a pad of paper and a pen. Unfortunately, writ-
ing code is difficult with a pen and paper, and it doesn’t translate very well
when we need to publish it to the Internet. That’s when a basic text editor
program comes in very handy — we always have one open on the computer
(usually several instances of a favored text editor, actually) and use it daily
for writing CSS and HTML, and for coding WordPress templates and themes.

Make sure that you use a text editor and not a word processor, such as

Microsoft Word, to write any code. A word processing program automati-
cally inserts formatting, characters, and hidden spaces because it assumes
that you want the document formatted. When you’re writing code, this sort
of formatting is the last thing you want — so stick with a basic text editor.

The text editors listed and described in this section are programs that are installed on your computer. Some of them are available only for Windows, some only for Mac users — we specify this in their descriptions.

Editing Files and Testing Performance with WordPress Tools



Over the course of Lisa’s journey with WordPress, which began in 2003,

she’s learned a lot of lessons from editing WordPress files, building themes,


and using different browsers and browser tools to help her view, test, and diagnose certain problems (such as speed, error messages, and CSS rendering) on her Web site.

One important thing she’s learned is that when she sits at the computer to begin to work on any WordPress project, large or small, it’s vital that she have the right tools readily available. Having the right tools makes a world of difference in the quality, efficiency, and overall experience in designing and developing a Web site for her or a client.

This section of the chapter introduces you to tools for things like editing

HTML, CSS, and PHP, as well as using various Web browser platforms, such as Internet Explorer and Mozilla Firefox. For example, we include different tools and add-ons that you can add to the browser to make it work better for your Web site and be easier for you to maintain it.

In some cases, the tools we mention here aren’t necessarily required — however, you’ll be very thankful when you find tools that make your Web site managing a lot easier!

Using plugins to make caching easier

We recommend these two plugins, which provide you with the best and easi-

est ways to make sure that your WordPress site has a caching system in place:

✦ W3 Total Cache: Install this plugin to easily optimize your Web site

and user experience with page, browser, database, and object caching.
W3 Total Cache also includes features like HTML, CSS, and JavaScript
minify, as well as CDN configurations to improve your Web site’s speed
and performance (http://wordpress.org/extend/plugins/
w3-total-cache).

✦ WP Super Cache: This plugin generates static HTML files from your
dynamic WordPress blog posts and pages. The static HTML files are
then served to your Web site visitors instead of the dynamically gener-
ated PHP files, without affecting the look or function of your site. This
reduces the load on your server and increases the speed of your Web
site. Unlike the W3 Total Cache plugin, WP Super Cache (http://
wordpress.org/extend/plugins/wp-super-cache) doesn’t
have minify or CDN configurations.

Editing Files and Testing Performance with WordPress Tools



✦ CacheFly: www.cachefly.com


✦ PEER 1: www.peer1.com/managed/content_delivery_network.php
✦ MaxCDN: www.maxcdn.com

The benefits of running a content delivery network include the following: ✦ Improved speed of your Web site

✦ Improved visitor experience

✦ Improved scalability for your Web site and database data delivery

✦ Resistant to Web site crashes during times of high traffic volumes                        Book II

Chapter 5

In the next section of this chapter, we give you a couple of plugins that provide a user interface to help you set up a CDN on your Web site. Just remember that CDN services aren’t free, and the costs vary depending on the service provider that you use.

Using a content delivery network

A content delivery network (CDN) stores your Web site data within different points on a network and can deliver that data to Web site visitors with a decreased amount of bandwidth. A CDN can choose to deliver this data from the nearest geographical location, making the transfer faster. Because of this, visitors don’t access the data from the same place at the same time, which lightens the load on your server significantly.

To use a CDN, you need to sign up for a service that provides a network
and a series of computers to store and serve your data on your Web site.
The CDN can include items like images and CSS, JavaScript, and media files.
Using a CDN reduces the load on your server because the files are delivered
through the CDN, not through your Web server. This is especially helpful if
you use a significant amount of bandwidth on your current hosting account.

CDN services are relatively inexpensive, particularly if you don’t have a lot of media files, images, and data to store on their servers. A few popular CDN providers include

✦ Amazon Web Services: http://aws.amazon.com
✦ Akamai: www.akamai.com

Minifying JavaScript, CSS, and HTML files reduces the overall file size,



Minifying JavaScript, CSS, and HTML files reduces the overall file size,

making them load faster on your Web site. Obviously, adjusting each of the
existing files on your site to make them smaller would take quite a lot of time
and programming skills that you may or may not possess. Therefore, you
may prefer to use a plugin or program to adjust these files. A good plugin or
program used to minify files can reduce the file to 30-40 percent of its origi-


nal size, which greatly improves the response time of your Web site.


 The HTML source code from Lisa’s Web site in its regular state, and Figure 5-3 displays it in a minified state. You can see how minifying shrinks the size of the overall file by removing spaces and line breaks, and shortening the characters used.


Use a WordPress plugin (such as W3 Total Cache (http://wordpress.org/
extend/plugins/w3-total-cache) that has a feature that minifies files,
such as JavaScript, CSS, and HTML, by caching the minified files. This leaves
the original files intact so they are easily readable and editable by you.

Minifying JavaScript, CSS, and HTML

 

You can also improve the speed of your Web site through minifying
making some of the files, like JavaScript, CSS, and HTML, smaller. This
involves taking all the files of your Web site and reducing the size by
doing things like

✦ Removing all line breaks and spaces in the file.
✦ Removing all code comments in the file.
✦ Removing unnecessary characters in the file.

✦ Using code shorthand, where possible, to decrease the amount of
characters in the file.

✦ Combining the files into one file, wherever possible; therefore, instead of
having ten JavaScript files, you could reduce the number to four or five.

 

Using a Caching System for Speed and Performance

✦ Page: Builds and stores (in your Web server memory) all the pages

on your Web site. Page caches generally have an expiration date. In

case you update content on your Web pages, the cache will eventually rebuild itself to capture changes you make.

✦ Database: Reduces Web server overhead by storing and remembering
database tables and queries made by WordPress.

✦ Browser: Stores Web pages on the visitor’s local storage so when she

revisits your site, her browser displays the page from her hard drive

memory, instead of rebuilding it and calling it from your server. Browser
caches have an expiration date, so any changes you make can be cap-
tured again in the future (your site visitors can also set their browser
settings to disable cache — so this may not work for everyone who
visits your site).

✦ Object: Stores data objects or HTML structures, which can increase

server load because, without a caching system, they need to be rebuilt each time the site is loaded in a visitor’s Web browser. Object caching helps the overall caching system by storing complete Web pages and saving them for future loads of your site.

Using a Caching System for Speed and Performance

A good way to improve the speed of your Web site is through caching differ-

ent types of content. Caching content means to store it transparently so that it
can be used for future loads of your Web site. A good caching system for your
Web site collects all the Web pages on your site and copies, stores, and deliv-
ers the files to visitors of your Web site. This significantly reduces the server
load because without it, WordPress creates pages on your Web site dynami-
cally
— each time a visitor loads your Web site, calls are made to the data-

base and code is complied and executed each time to create the page in her
browser. If you use a good caching program, those files are already built and
displayed, so your Web server doesn’t need to rebuild those pages each time.

The following are the different types of caching that can improve your site performance:

Sunday 21 July 2013

Increasing PHP memory limits

To help resolve the PHP memory limit errors, within the wp-config.php,
define the maximum amount of memory that PHP can use by writing one of
these three lines of code, depending on how much memory you allow PHP to
use on your site, and adding it to the wp-config.php file on its own line:

define (‘WP_MEMORY_LIMIT’, ‘64m’); // increase limit to 64M

define (‘WP_MEMORY_LIMIT’, ‘96M’); // increase limit to 96M
define (‘WP_MEMORY_LIMIT’, ‘128M’); // increase limit to 128M

Some hosting providers disable the ability to increase PHP memory limits on

your Web hosting account, so depending on your hosting environment, your
attempts to increase the memory limit may not work. If you discover this is
the case for your particular hosting account, you can contact your host and
ask him to increase the PHP memory limit for your account or switch to a
different hosting provider.

Increasing PHP memory limits

 

Most Web hosting providers limit the amount of memory any one PHP

script or program file can use on the Web server at any given time. PHP is at the core of WordPress (see Book II, Chapter 3), and by default, WordPress attempts to set the PHP memory limit to 32MB. However, if you see PHP memory limit errors on your Web site, such as

 

PHP Fatal error: Allowed memory size of 33554432 bytes exhausted
(tried to allocate 6233929 bytes) …

 

The PHP memory limit needs to be increased to run the PHP script or file. That memory limit error tells you that the PHP script was attempting to allocate 64MB of memory; however, the allowed memory size set by the server is limited to 32MB, which is the reason for the error.

Template and stylesheet path

Once again, you can significantly reduce the number of calls to the database
for the template and stylesheet directories by directly defining them in your
wp-config.php file. To do so, add these two lines of code (replace absolute/
path/ with your own server path and replace /themefolder with the name
of the theme folder you use currently) on their own separate lines:

 

define(‘TEMPLATEPATH’, ‘/absolute/path/to/wp-content/themes/themefolder’);
define(‘STYLESHEETPATH, ‘/absolute/path/to/wp-content/themes/themefolder’);

 

As with the site URL in the preceding section, having these two lines of code
in your wp-config.php file defines the file path within the file structure
in the wp-config.php file, so that WordPress doesn’t need to make an

additional call to the database to discover what the absolute and stylesheet             Book II

paths are.