WordPress Support

WordPress Configuration and Core Plugins

This chapter demonstrates how to set up and work with WordPress, including creating posts and pages and the basic editing of .php theme template fles. It offers strategies for configuring WordPress and ways to extend the admin tools via plugins. By the end, the user will be able to effectively use WordPress as a CMS (content management system) and in conjunction with Flash.

In this chapter, we cover WP configuration and settings:

► Inputting content in the Visual Editor

► Extending the Visual Editor with plugins

► Inputting content in the HTML editor

► Editing template files in the Theme editor

► Configuring WP for maximum SEO

► Using the XML sitemap SEO plugin

► Using the custom titles, SEO plugin

► Using Google Analytics in WordPress

► Using the breadcrumb navigation SEO plugin

► Backing up your site

Introduction

In Chapter 1, we outlined a strategy for using WordPress based on the relative strengths and weaknesses of WP and Flash. Boiling down the advantages of WP, we find that it's easy to update and (when used strategically) can help you get indexed in the major search engines for your targeted keywords and phrases. Flash is limitless with regards to design (though it takes time to become proficient with animation software), but a Flash site is not as well understood by robots and search engines. We introduced the use of two "views" in the WP dashboard-Visual Editor or HTML. Now, we look under the hood for more detail. It is not our intention to provide here a comprehensive guide to using WP, but instead to share some of our favorite tips and tricks for setting up WP as a CMS and for working with Flash. Also, we want to demonstrate ways of working with your site—both the content (posts and pages) and theme files. We review a number of plugins that extend the WordPress core to help you work smarter. We'll also show you how to create and implement a SEO strategy in WP to complement your use of Flash in WP.

Inputting content in the Visual Editor

Getting ready

In case you aren't clear on the difference yet, here is a screenshot showing how to navigate between the Visual or HTML editor for posts and pages:

Edit Post Hello world!

Permalink: http://www,wordpressandflash,com/hello-world/ Edit View Post

Flash inserted via Kimili:

[toUOiishembed movie -'http://www.wordpressandflash.com/wp-content /themes/default/swfobject_test.swf width="320" height="240" /]

Flash manually inserted:

Path:

Word count: 12 Last edited by admin on January 1, 2010 at 9:21 pm

If you intend to work primarily in the WordPress Visual Editor, there are a few points to keep in mind.

WP can create XHTML on the fly, making it nearly as easy to update a web page as it is to type an email. Making website administration available to people who don't know XHTML is a great leap forward for usability on the Web.

Unfortunately, such auto-generated code can have many undesired formatting issues. Ultimately, there is no substitute for a basic understanding of the structure and syntax of XHTML.

Even if you plan on primarily using the Visual Editor, there may be times when it is necessary to take a look at the raw code. One of the most common errors is the accidental inclusion of unnecessary styles. If the Visual Editor is acting strangely, checking the code for extraneous tags is the first place to start. See Learning XHTML, at the end of this section, for helpful resources.

Type text directly into WordPress for consistency. It is often preferable to use the Full Screen mode (a square screen icon to the right of the spell check button; PC: Alt-Shift-G). If you copy and paste text from a word processor or browser into WP, you may be surprised to see that you get more than just the text. The font styles (font family, colors, spacing, and so on) and URLs are included. This may seem convenient, but often ends up creating more trouble than it is worth, since it can lead to stylistic inconsistencies.

Copy and paste into HTML view or into a text editor to remove all formatting. Then, re-style as appropriate.

After entering your text, insert images. Next, apply styles in this order: URLs, bold, unordered list (bullets), blockquote, indent, heading 2 or heading 3. This will help you to avoid the unintended application of styles.

Open up the Kitchen Sink (PC: Alt-Shift-G) to access additional Visual Editor tools. One important Visual Editor tool is the pull-down menu that allows you to easily apply headings. Look for the left-most button in the second row that appears when the Kitchen Sink button is clicked. Following is a screenshot highlighting the Full Screen Mode and the Kitchen Sink buttons.

When you input and style content using the Visual Editor, you are not seeing the whole picture. Keep in mind that additional styles may be applied to your content based on one or more CSS stylesheets. Inline styles are formatting that get applied before (instead of) the rules from the CSS stylesheet. When you copy text from a word processor or browser, the content gets inline styles that will be prioritized. This can create chaos. A site looks best when it has unity of design—dissimilar fonts or colors can distract your users and detract from your message.

Most of your styling should be taken care of by CSS. A CSS stylesheet is a library of the special formatting styles used in your theme. CSS style sheets control the formatting of your content, and allow for site-wide changes by modifying this library of styles. CSS is most effectively applied externally—separate from your XHTML. External styles are referenced in between the <head> and </head> tags (normally, in a file called header.php) in the following manner:

<link rel="style sheet" type="text/css" href="example.css" />

The best strategy and technique is to use the Visual Editor in conjunction with your CSS stylesheet, and to mark up content for SEO purposes—to highlight what your content is about. This means using bold, links, and the h2 and h3 tags to denote emphasis.

Extending the Visual Editor with plugins

Depending on your operating system and browser, there is a chance that you or a client may not be able to use the WordPress Visual Editor. In other cases, you may want more control over the tools to format web content. In either case, it is possible to extend or replace the WP WYSIWYG with third-party plugins to achieve your goals.

Getting ready

The Visual Editor can be replaced or extended via plugins to give you more control. There were problems with earlier versions of the Visual Editor in the older versions of Safari that might also require the use of a third-party plugin.

In early versions of Safari, the visual rich editor would cause the browser to crash immediately upon loading the Write interface. This was due to a bug in Safari, not WordPress. Since the WordPress developers had no way of correcting this, they chose to disable the visual rich editor for Safari users.

From:http://codex.wordpress.org/FAQ_Troubleshooting

Use Safari 3.0.4+ with WordPress 2.3+ to avoid this problem. Or, use the free open-source browser FireFox (available here: http://www.getfirefox.com/). Alternatively, use the plugin Dean's FCKEditor For Wordpress to replace the WP Visual Editor.

http://wordpress.org/extend/plug-ins/deans-fckeditor-for-wordpress-plug-in/

TinyMCE Advanced is another plugin that extends the Visual Editor, adding additional formatting options and allowing you to rearrange the buttons in the order you prefer. TinyMCE Advanced preserves additional buttons (such as the Kimili Flash Embed) added to the WP Visual Editor, while FCKEditor has its own built-in Flash uploader. If you're using the FCKEditor, you do not need the Kimili plugin.

How to use Dean's FCKEditor (version 2.5.0)

1. Click on Plugins | Add New and search for "FCKEditor".

2. Click Install and Activate.

3. Configuration can be found in the dashboard sidebar, under Settings | FCKEditor.

If you are most often linking to content that is off-site, one suggestion is to set the Default link Target to New Window (_blank).

This ensures that visitors do not leave your site when visiting another URL, but instead open another window, as demonstrated below:

Enable PostPreview:0

Enable tile Firefox built-in spellchecker:0

enablf .lisatilt Lhe Firefox built-in spelluhecker while typing. Even if wond suggestions will not appear in the FCKeditor context menu, this feature _- useful to quickly dentify misspelled words

Select (tie toolbar to load: Default v c ^Iprt ttip ^k "i tn In^H: npfsult v

Score uploads in this folder:: w p -corite nt/u p I o ads/ Default is vp-contejitAiploads Denied file extension:

php,php2,php3,php4Jphp5,phtnnlJpwnril,in;Iasp,aspx,as Allowed image extensioi jP0J0if.jpeg..Dng Allowed flash extension: swf,fla

Some of the most useful tools available include:

Special Characters, Horizontal Lines, Anchors, Forms, Templates, and Replace.

Another reason to use the FKCEditor is that it allows you to paste from Word—with auto-detection cleanup.

To switch between HTML view or the FCKEditor Visual Editor, click the Source button, as seen in the following image.

To upload Flash using the FCKEditor, simply click the Flash logo. If this is difficult to identify, hover over the buttons for tooltips—look for Insert/Edit Flash.

Dean's FCKEditor 2.5.0

Basic Options

Editor height: 4GG

Select (tie toolbar to load: Default v c ^Iprt ttip ^k "i tn In^H: npfsult v

Edit Post
Hello world!
Permalink: http://w«w.wordprcssfliridflo5h,«>nn/hcllo-ifvorld/ Edit		Roil
Upload/insert |-| yj ~ *
	(gwpü B jam; < % a e * i s v i	' " I * v. I m o
	. Ig k P 13 [H1 01 —' fil :
	u i u we | j |= ;= | ii u |[s s s s	ft <fr ; H0n (— © o	SIR
•	1 SijHm * Fourrit Noirnal ■ Fant	■ 5ie -
Flash inserted via Kimili: [kmlJlashennEiad miwiB^'nitlpiftow.wDrdprBgs iswlbbjertje si \o d1h=-32«r \ m ghfc"?4ü"J] Flash manually inserted		ndflash.eomMp-contenwhBmesitlefauh		A-

Here, we insert our sample Flash animation via Dean's FCKEditor:

A handy chart explaining all the buttons on the toolbar can be found here:

http://docs.fckeditor.net/FCKeditor_2.x/Users_Guide/Quick_Reference

How to use TinyMCE Advanced (version 3.2.4)

1. Click on Plugins | Add New and search for "TinyMCE."

2. Click Install and Activate.

3. Configuration can be found in the dashboard sidebar, under Settings | TinyMCE Advanced.

TincyMCE adds fifteen plugins to the WP Visual Editor. The most useful of these include: Advanced Image, Advanced Link, Context Menu, Layers, and Paste from Word. The TinyMCE Advanced homepage is: http://www.laptoptips.ca/projects/tinymce-advanced/

Dean's FCKEditor is based on the FCKEditor, a fast and lightweight open-source application for creating XHTML 1.0. Dean's FCKEditor is multi-browser compatible, including: IE 5.5+, Safari 3.0, and Firefox 1.0+.

Visit the FCKEditor homepage at: http://www.fckeditor.net/

Extensive documentation for end users and developers is available at:

http://www.docs.fckeditor.net/

TinyMCE uses jQuery to allow you to drag, drop, and arrange buttons on the toolbar. jQuery is a free, open-source software—a JavaScript library for creating interactive web pages. There are many ways that jQuery can be used in WordPress and with Flash. For example, a jQuery plugin exists to embed Flash—this is an alternative to embedding Flash with JavaScript. See: http://jquery.com/ for more information.

TinyMCE also acts as a bridge between inline and external styles.

At the bottom of the configuration menu, there is a checkbox to Import the current theme CSS classes.

Advanced
Import the current theme CSS classes □
	TinyMCE. Only CSS classes will be used, also
div.my-class would not work, but .my-class will.
Stop removing the <p> and <br /> tags when saving and show them in the HTML editor [n]
This will make it possible to use more advanced HTML without the back-end filtering affecting it much. It also preserves empty /> tags.	ew lines in the editor by padding them with <br

This option allows you to format your content by choosing from styles defined in your theme. Earlier in this chapter (in the How it works section of Inputting content in the Visual Editor), we pointed out that the Visual Editor doesn't really show you "what you get" because CSS rules will be applied based on where your content appears. TinyMCE solves this problem by loading the CSS rules into the WP Visual Editor, effectively creating a UI to format content using CSS. Quite an amazing plugin!

It is useful to note the difference between a CSS id and a CSS class, both of which may be found in a given stylesheet. An ID can be used once on a page; a class can be used as many times as you want.

IDs have the following syntax: #example {propety: value;} An example of a CSS ID is: #mystyle {color: "red";} Classes have the following syntax: .example {propety: value;} An example of a CSS class is: .myclass {color: "red";}

Please note that importing the current theme classes does not work for themes that use @import to load CSS. If your theme does use @import, you can add styles manually to tadv-mce.css, which can be found inside the tinymce-advanced folder: tinymce-advanced/css.

Add the class names with empty curly braces (not including the properties) using this format:

.example-class-l{}

To get the drop-down menu of Styles to appear in the Visual Editor, make sure to drag and drop the Styles button onto the toolbar in Settings | TinyMCE Advanced.

Learning XHTML

XHTML basics: http://www.w3schools.com/xhtml/

Inputting content via the HTML Editor

Those comfortable with XHTML will often prefer to use the HTML editor, especially when checking for errors. The HTML editor can also be a convenient way to mark up your content—consider hand coding in combination with the use of quicktags.

If you prefer to work with XHTML directly, WP provides a handy way of marking up code via quicktags. Quicktags are buttons in the HTML editor that provide a shortcut to hand coding XHTML. Simply highlight some text and click the appropriate quicktag button to automatically create XHTML, as seen below:

birri link] b-quote jl éeï II ins ][ irng ][ ulli olll lili code ]( more ][ lookup II close tags

The WordPress codex covers quicktags here:

http://codex.wordpress.org/Write_Post_SubPanel#Quicktags

If you never want to be bothered with the Visual Editor, disable it by going to Users | Your Profile. The first checkbox allows you to Disable the visual editor when writing.

_ • You can use TinyMCE Advanced in conjunction with the HTML

editor to gain access to both quicktags and the TinyMCE tools and customizable toolbar layout.

It is possible to add to the default list of quicktags and even create your own keyboard shortcuts to apply your custom tags. The file that creates the default set of quicktags can be found in the wp-includes folder, named quicktags.js.

Detailed instructions on how to create custom quicktags can be found here:

http://tamba2.org.uk/wordpress/quicktags/

Editing theme template files in the Theme Editor

Working with content is different than editing the files that make up your theme. A theme is a "skin"—since the design is separate from the content, you can switch themes and you'll have a new look, though your content is the same (and you're still using WordPress). The structure of all WordPress themes is similar. A theme is comprised of a set of PHP files that link to CSS stylesheets and contain WordPress template tags (to insert entries from the MySQL database) and XHTML.

Like your content, these files can be modified. Additional PHP templates can be created and uploaded to your theme folder to enhance or customize your theme.

Getting ready

The editing of theme templates (PHP files) can be done in several ways. One way is to directly edit the files live on the server using the WordPress Theme editor. This approach is both fast and convenient, but suggested for those comfortable with hand coding. Editing template files in the Theme editor is a good way to see the immediate effects of your changes. It should be emphasized that creating backups as you customize a theme is absolutely crucial. Backing up your site, at the end of this chapter, reviews how to do so. XHTML is a precise and unforgiving medium—one wrong character can break your entire site.

Also, changes can be made in your favorite text editor. You can download the theme files via FTP, make your changes, and then upload via FTP. This approach is slower, but a bit safer since you can make a backup file with each change.

In the dashboard sidebar, navigate to Apperance | Themes | Editor. You will see a list of the template files on the right-hand side for the active theme, as well as a drop-down menu to select any of the other uploaded themes for editing. Clicking on a template file on the right (such as style.css) loads the file into the editor, as seen below:

Please note that files in subdirectories are not shown. To edit files in a theme subfolder (for example, /includes), you will need to download the files via FTP, edit with a text editor, then upload the modified file via FTP.

Before making a change to any theme template, do yourself a favor and make a backup of the file you are editing. An easy way to do this is to select all (PC: Ctrl-A/Mac: Cmd-A) in the Theme editor, and paste the original code into a text editor.

Proceed with caution—and have fun!

When you make changes to code, the best practice is to comment your code to make a record of the change. You can comment out a section of XHTML or CSS, but not PHP. Doing so means that the code will not be displayed.

A comment within a line is declared with a special <!-- --> tag—which in XHTML means do not display. Use this approach within template files to comment out XHTML.

<!-- Comment: I edited this for a reason. Start or End -->

Comments that take up multiple lines are declared with /* */. Use this approach in the stylesheet to comment out CSS.

/* Optional: section of information. Maybe steps, for example: Step 1. Step 2. */

Template hierarchy

It takes a little time to become familiar with how templates are triggered in WordPress, though the structure is meant to be logical and easy to grasp. Since your WP site serves up dynamic content, different templates are called based on the URL or where a user clicks. For example, home.php gets called before index.php on the homepage. A single post will use single, php, or if this is not available, index.php. If a user clicks on a tag, WP will look for tag.php, then archive.php, then index.php. This flexible structure allows you to create templates as needed.

Visit the WP codex for a complete overview of the WP template hierarchy:

http://codex.wordpress.org/Template_Hierarchy

Configuring WP for maximum SEO

Default WordPress settings provide a reasonable level of SEO utility. Compared to a static tables-based site or a Flash site, even the default settings are substantially more powerful. Configuring these settings maximizes the SEO potential of WP.

Getting ready

Permalinks control the URL structure of the content on your site. The default structure

(http://www.wordpressandflash.com/?p=12 3) should not be used. Instead, configure shorter "pretty" permalinks that describe your content.

To update, configure permalinks that create user friendly SEO URLs. Take the following steps:

1. In the WP dashboard sidebar, click on Settings | Permalinks.

2. Click on Day and name.

3. Click on the Custom Structure field, which will now be loaded with the following:

4. Truncate this to the following: /%postname%/

5. Click Save Changes.

For more information, visit: http://codex.wordpress.org/Using_Permalinks

The preferred hosting environment for WordPress is an Apache server, such as bluehost.com. In this environment, WordPress can automatically update your .htaccess file.

What is a .htaccess file?

r-lTX .htaccess files (or "distributed configuration files") provide a way to make configuration changes on a per-directory basis.

From: http://httpd.apache.org/docs/1.3/howto/htaccess.html

Most simply, and in plain English, a .htaccess file allows you to create redirection rules for individual files or directories, including for an entire site. In a preferred hosting environment, WordPress can automatically update the .htaccess file. This means that each time you update your permalink structure, WordPress will make sure that the old URLs point to the new URLs.

If WP cannot automatically update your .htaccess file, it is most likely due to file permissions. The easiest way to update file permissions is to connect to your server via FTP and click on the file or directory for which you would like to update the permission. Right-click (PC) or Cmd-click (Mac) for the file permissions context menu. Enter or select 777 for read/ write/execute.

A few notes for those of you who would like to work with the .htaccess file directly:

► Your .htaccess file must be located in your site's root directory

► .htaccess files must be uploaded as ASCII—not Binary

► .htaccess is the complete file name—depending on what text editor you are using, it may or may not support saving a file name with no extension. Don't worry—you can save as a text file and rename when you FTP.

Configure WP to automatically ping blog search engines each time you update content. Here are the steps:

1. In the WP dashboard sidebar, click on Settings | Writing.

2. At the bottom of the screen, click on the link to Update Services on the Codex.

3. Scroll down to the XML-RPC Ping Services and highlight and copy the entire list.

4. Click back in your browser to return to the Writing Settings page.

5. In the Update Services field, replace the single entry

(http://rpc.pingomatic.com/) with the full list.

How to create an SEO strategy

► Condense your concept to five words

► Do keyword research to identify allies and competitors. The Google AdWords Keyword Research Tool is a good free option: http://adwords.google.com/ select/KeywordToolExternal

► Revise your SEO strategy: consider adding modifiers to keywords/phrases that are too competitive

► Example: it will be difficult to initially (or ever) rank well for a search term as broad as "organic". Adding the name of your city or neighborhood might be a good idea

► Metatags: keywords and description

► Use keywords in your page titles

► Mark up your content so that your keywords are in hi and h2, in bold and as links

► Analyze the density of keywords on your homepage. A variety of FireFox extensions are available that do this for you. There are also websites services that will do this for free

► Use rel = no follow on links you prefer to not have indexed

See Also

► Chapter 4, FLV Embed (Version 1.2.1), How it works... for instructions on how to set file permissions via FTP.

Using the Google XML Sitemaps plugin

We've already configured WP to automatically notify the major blog search engines each time you update or publish content. Wouldn't it be nice to do the same for the major search engines such as Google, Bing, Ask.com, and Yahoo? The same XML technology can be used to create a sitemap, or a list of pages on your site available to users and crawlers. The good news is that you can leverage a WP plugin to do so with a few clicks. The Google XML Sitemaps plugin is authored by Arne Brachhold <http://www.arnebrachhold.de/>, the homepage is: http://www.arnebrachhold.de/redir/sitemap-home/*

1. To add a new plugin, navigate to: Plugins | Add New.

2. Search for "Google XML".

3. Install and activate: Install | Install Now | Activate Plugin.

4. Visit the plugin configuration panel: Settings | XML-Sitemap.

5. Make sure to click: Click here to build it the first time.

6. The default settings are sufficient for most users.

The XML sitemap is a list of all the content on your site. The name is sitemap.xml and it is located in your root directory.

An XML Sitemap is particularly important for a WordPress site, as discussed on the Wikipedia entry for site maps: http://en.wikipedia.org/wiki/Site_map

Some sites have a large number of dynamic pages that are only available through the use of forms and user entries. The sitemap files can then be used to indicate to a web crawler how such pages can be found.

Remember that WordPress is a form of dynamic publishing, using PHP. There are no static pages—instead, content is dynamically generated each time a page is loaded. The sitemap ensures that crawlers can find all of the content available on your site. All major search engines support and use the XML sitemap format. There is no guarantee that all your pages will be crawled, neither does an XML sitemap guarantee inclusion in any directory, nor a certain page rank. The sitemap is the most contemporary and effective way of communicating with search engines about the content and structure of your site. For this reason, it is highly recommended.

Using the SEO Title Tags plugin (Version 2.3.3)

The following section shows you how to use the SEO Title Tags plugin.

Getting ready

Metatags, like CSS stylesheets, are located in the head of a page—between the <head> and </head> tags. Metatags are supporting information that is not directly displayed, but describes or produces the page. Think of the head like your entry in the card catalog at the library—metatags are entries that define the language, subject, author, and so on. The title tag produces the browser title—text displayed at the top of the window, before the page content.

One important factor for on-site SEO is the <title> tag, a HTML tag.

The title tag has the following structure:

<title>Your title here</title>

Titles should be defined for each page on your site. The default WordPress setting is to display the post title as the title tag. This is less than ideal: your post or page titles are for humans (to describe your content), whereas the title tag is mostly used by search engines (to index a given URL). As Stephan Spencer, the author of the SEO Title Tag plugin notes on the plugin homepage http://www.netconcepts.com/seo-title-tag-plug-in/:

...post titles should be catchy, pithy, and short-and-sweet; whereas title tags should incorporate synonyms and alternate phrases to capture additional search visibility.

The SEO title tag plugin allows you to easily define unique title tags for every post, page, category, and tag. The mass edit layout conveniently displays all the title tags in one page for instant cross referencing and comparison.

1. Click on Plugins | Add New and search for "SEO Title Tag".

2. Click Install and Activate.

3. The first step is to replace the default WordPress titles with the SEO title tag. Navigate to the Theme editor (Appearance | Editor) and click on header.php. Search for the word "title" (PC: Ctrl-F/Mac: Cmd-F). The default title will look something like this:

<title><?php bloginfo('name'); ?></title>

4. Replace the default title tag with this call to the plugin:

<title><?php if (function_exists('seo_title_tag')) { seo_title_ tag(); } else { bloginfo('name'); wp_title();} ?></title>

5. Make sure to save your work by clicking Update File. This code ensures that the SEO title tag will be used, if available. If not, the default WP title will be used.

6. Next, visit the plugin configuration page: Settings | SEO Title Tag. Here, you can specify defaults for the plugin. The preconfigured settings should work for most users. If you have a lot of content, you may want to display more than 20 posts

\per page.

7. Lastly, visit the Title Tag tool: Tools | Title Tags. This is the reason we installed this plugin—to take advantage of the super useful interface allowing you to see and modify all your titles at once. The UI is conveniently broken down by Pages, Posts, Categories, Tags, and URLs.

How it works.

The SEO title tag plugins allows you to mass edit your titles. The brilliance of this plugin is the ability to conceptualize and modify the whole set of titles at once. If you only work on one part of your SEO strategy, filling the title tags with your targeted keywords and phrases would be the area on which to focus.

The plugin adds three tables to your MySQL database:

wp_seo_title_tag_category, wp_seo_title_tag_tag, and wp_seo_title tag_url

Each existing WP category, tag, or URL is paired with a new field—the SEO title tag. When the page loads, the plugin checks the table for a match and outputs the SEO title tag.

Using the Breadcrumb NavXT plugin (Version 3.2.1)

Breadcrumb NavXT homepage: http://mtekk.weblogs.us/code/breadcrumb-navxt/

Breadcrumb navigation is a visual representation of where you are in the site. A common format is: Blog | About.

Your Categories and Pages should be highly related to your keywords. Repeating this info on each page and as a link helps to emphasize to search engines what your site is about. As we've learned, words that are links get extra SEO weight. For these reasons, breadcrumb navigation is a useful SEO strategy. Breadcrumb navigation is also useful for your human users because it helps orient them to the structure of your site and the ability to "drill down" to see content.

1. Click on Plugins | Add New and search for "Breadcrumb".

2. Click Install and Activate.

Identify the location to insert breadcrumb navigation using Firebug. Since search engines give more weight to words at the top of your page, near the top is a common approach. If you insert the code into your header.php, breadcrumb navigation will appear on every page.

Navigate to the Theme editor (Appearance | Editor) and (in most cases) click on header.php.

Insert the following code:

<div class="breadcrumb"> <?php if(function_exists('bcn_display')) {

bcn_display();

For our example (using the default Kubrik theme), we open index.php and place the breadcrumb code immediately after: <div id="content" class="narrowcolumn" role="main">

The end result looks like this:

wordpress and flash
Aist -another WordPress web loo
blog > Archive by category 'Uncetegonzed'
	[ Seardh j

Administration takes place under Settings | Breadcrumb NavXT.

Here, you can control how the breadcrumb titles are formed and displayed. The format is a table, with additional tabs. First entry on the General tab is: Breadcrumb Separator - the default value is: &gt;

This is a special HTML character code, producing the greater than symbol ">." A list of HTML character codes can be found here: http://en.wikipedia.org/wiki/List_of_XML_ and_HTML_character_entity_references

In this example, we use the alternate character code to produce the greater than symbol: &#62;

This is a special HTML character code, producing the greater than symbol ">." A list of HTML character codes can be found here: http://en.wikipedia.org/wiki/List_of_XML_ and_HTML_character_entity_references

You can also set special rules for the homepage breadcrumb. The Home Anchor field sets the tooltip for the link to the homepage—the text that appears when a user hovers over the link. By modifying the Home title and Home Anchor, we get the following effect:

wordpress arid flash

Just another WordPro? weblog wordPrres and Ftash Slog > About frotr htr») About

Rettim to the WcndPress and FlasM

The rest of the tabs allow you to set custom behaviors for breadcrumbs. The Current Item tab allows you to set options for the current page. For example, you could add "(you are here)" for the Current Item Suffix. You can use HTML in these fields—for example, <i>(you are here)</i>.

Also, it is possible to configure special behaviors for Posts & Pages, Categories, Tags, and Date Archives.

Use Google Analytics in WordPress

Our final SEO recommendation is to use Google Analytics (GA). Though the benefit of knowing something about your visitors and how they use your site may be clear, it may not be immediately obvious how this is an SEO practice. The answer is simple: Analytics data is the feedback loop by which you fine tune or revise your SEO strategy. Once your site is designed and launched, we suggest you adjust your SEO practices based on the real-world results.

Google Analyticator (Version 5.1) is our recommended plugin.

1. Click on Plugins | Add New and search for "Analyticator".

2. Click Install and Activate.

You will need to sign up for an Analytics account and associate a URL with it:

http://www.google.com/analytics/

3. You do not need to copy the tracking code that is automatically generated at the completion of the sign-up and website profile creation process. Visit your Analytics homepage and copy the UA number (directly to the right of the website profile name of your WP site).

4. Back at your WP dashboard, click on Settings | Google Analytics.

5. Paste your user-specific code into the Google Analytics UID field.

6. In the Google Analytics logging is: drop-down menu, select Enabled. Click Save Changes, and you are ready to go!

GA provides you with quite a bit of information. You select any range of days for which stats are available, and Graph your data by Day, Week, or Month. In Table view, you can sort your data by clicking on a column heading, as shown below.

In brief, you might want to review the following areas:

Traffic Sources: How users came to visit your site (a search engine, referring site, or entering the URL directly)

Visitors | Map Overlay: A geographical representation of your user base Content | Content By Title: Cross reference your title tags with your statistics

Backing up your site

Backing up your site is absolutely essential, especially for those for those of us who enjoy coding and customizing our site and theme. Here, we outline a strategy to back up your content in three parts: WordPress content in XML format, themes, plugins, uploads, and configuration files via FTP, and SQL backup via plugin.

Getting ready

WP-DBManager (Version 2.50) is our plugin recommendation. This excellent plugin was contributed by veteran WP plugin developer Lester "Gamerz" Chan. In addition to creating database backups, you can also optimize your database and restore an existing backup. You can even repair a database, add or drop tables, or run an SQL query from the WP dashboard.

To back up your content, you will need to download a file in XML format that contains your posts, pages, comments, custom fields, categories, and tags for all authors. Since your content is separate from your design, a backup in this format will allow you to import your data (only) into another WP installation, should you ever have the need.

1. In the WP dashboard sidebar, click: Tools | Export.

2. Then: Download Export File.

4. In the root directory, save copies of your wp-config.php file and the .htaccess file, if you have one.

5. Also, copy the entire /wp-content directory to back up your theme, plugins, and uploads.

Back up your MySQL database with the WP-DBManager plugin:

1. Click on Plugins | Add New and search for "WP-DBManager".

2. Click Install and Activate. Once the plugin is installed and activated, navigate to the Database menu at the bottom of the dashboard sidebar.

3. Click Backup. The default backup location is wp-content/backup-db. This can be changed from Database | DB Options. Here, you can also schedule automatic database backups and optimization, as well as explore more advanced interactions with your MySQL database.

4. Make sure to download a copy of your database to your computer, or have the backup emailed to you by visiting Databse | Manage Backup DB.

Now, you have a copy of your theme and any modifications you've made. This allows you to utilize your design on another WP installation, or roll back your theme to a previous state. The .htaccess and wp-config.php files will allow you to recreate your site in a fresh WP install, should you ever have the need. wp-config.php is your admin key to WP. This file contains your MySQL database, username, and password. Keep it in a secure place. .htaccess is a record of all your permalink redirects—with this file, you ensure that any old bookmarks of extinct URLs will point to the updated content (WP does this automatically).

The /wp-content folder contains your modified theme files, plugins, and uploads.

The backup of your SQL database is like a snapshot in time—it contains everything except the WordPress software and the files you've uploaded (plugins and themes). Restoring a database will overwrite all your data, including the posts, pages, categories and comments. This is useful when moving from one server to another, in the event of hacking or other catastrophes. Restoration is a snap with the WP-DBManager plugin. Click on Database | Manage Backup DB, select the desired backup and click the Restore button.

You can also import the SQL file via PhpMyAdmin. Here is a video showing you how to do this:

http://www.dewahost.com/tutorials/cpanelx/importsqlfile.html

0 0