AskApache » CSS

Advanced WordPress wp-config.php Tweaks

AskApache — Wed, 03 Mar 2010 08:23:37 +0000

The bottom line for this article is that I want to make WordPress as fast, secure, and easy to install, run, and manage because I am using it more and more for client production sites, I will work for days in order to solve an issue so that I never have to spend time on that issue again. Time is money in this industry and that is ultimately (time) what there is to gain by tweaking WordPress.

Note: I spent no time on readability, this is primarily a read the code and figure it out article.. This is for advanced users looking for a reference or discussion and for those of you looking to advance. Feedback would be great if you make it that far..

For a better handle on the way I like to structure web site directories, see Optimize a Website for Speed, Security, and Easy Management but note it is a bit outdated compared to what I’m doing now. I don’t have the luxury of using only one type of server, or hosting provider anymore, so I have been working towards making things even more portable in order to move from host to host from server to server without issues i.e. my portable .bash_profile.

So I’ve been basically experimenting various ways to accomplish that and thought I would share what I am currently doing for my benefit and hopefully get some input. All of my WP installs run the development version, and one main idea with my setups is that upgrading is automated. So I really keep the WordPress install clean and use plugins and wp-config.php to do all the customization.

Portability – Hands-free upgrades and easy to move
Security – Additional security and protection
Speed – Less CPU and Disk I/O
Customization – All my favorite customizations

wp-config.php

These are the main settings I use.. Seriously this is more like an interactive article, because to understand it you will need to do some code grepping. You may want to grab a jolt.

ASKAPACHE_ROOT

The ASKAPACHE_ROOT variable is just a better way for me to be able to include and access all the different files in my site tree. For instance, in my non-wp php files, I can do this:

!defined('ASKAPACHE_ROOT') && require $_SERVER['DOCUMENT_ROOT'] . '/wp-config.php';
include(ASKAPACHE_ROOT . '/includes/custom-download.inc.php');

ASKAPACHE_LOCK

This is one of my all-time favorite hacks, that I think is one of the most useful methods I employ as a web developer. This allows me to use far-future-expire headers for optimum caching, while still forcing browsers to re-validate every day or so automatically, or forcing them to re-validate whenever I change the suffix. This takes advantage of the mod_rewrite trick that I use on EVERY site I run, definately worth learning. Because I practice best-practice web-standards, for every web site I create a single css file and javascript file, which I then add to the template like:

 Settings > General panel.
 */
!defined('WP_SITEURL') && define('WP_SITEURL', 'http://'.$_SERVER['SERVER_NAME']);
 
/**
 * WP_HOME is another wp-config.php option added in WordPress Version 2.2. Similar to WP_SITEURL,
 * WP_HOME overrides the wp_options table value for home but does not change it permanently.
 * home is the address you want people to type in their browser to reach your WordPress blog. It should include the http:// part. Also, do not put a slash "/" at the end.
 */
!defined('WP_HOME') && define('WP_HOME', WP_SITEURL);
 
/** no trailing slash, full paths only */
!defined('WP_CONTENT_DIR') && define( 'WP_CONTENT_DIR', ABSPATH . 'wp-content' );
 
// full url - WP_CONTENT_DIR is defined further up
!defined('WP_CONTENT_URL') && define( 'WP_CONTENT_URL', WP_SITEURL . '/wp-content');
 
/** Allows for the plugins directory to be moved from the default location. @since 2.6.0 */
// full path, no trailing slash
!defined('WP_PLUGIN_DIR') && define( 'WP_PLUGIN_DIR', WP_CONTENT_DIR . '/plugins' );
 
/** Allows for the plugins directory to be moved from the default location. @since 2.6.0 */
// full url, no trailing slash
!defined('WP_PLUGIN_URL') && define( 'WP_PLUGIN_URL', WP_CONTENT_URL . '/plugins' );
 
/** Allows for the plugins directory to be moved from the default location. @since 2.1.0 */
// Relative to ABSPATH.  For back compat.
//!defined('PLUGINDIR') && define( 'PLUGINDIR', 'wp-content/plugins' );
 
/** Number of autosaves to save. TRUE is default and enables post revisions, FALSE disables revisions completely. */
!defined('WP_POST_REVISIONS') && define('WP_POST_REVISIONS', 150);
 
/* ini_set('memory_limit', WP_MEMORY_LIMIT); */
!defined('WP_MEMORY_LIMIT') && define('WP_MEMORY_LIMIT', '64M');
 
/** Only check at this interval for new messages. Default is 5min */
/** @since 2.9  */
!defined('WP_MAIL_INTERVAL') && define('WP_MAIL_INTERVAL', 3600); // 1 hour
 
/** Saves updated post values to post from edit window every x seconds. (default 60)
 * When editing a post, WordPress uses Ajax to auto-save revisions to the post as you edit. You may want to increase this setting for longer delays in between auto-saves, or decrease the setting to make sure you never lose changes.
 * @since 2.5.0 */
!defined( 'AUTOSAVE_INTERVAL' ) && define( 'AUTOSAVE_INTERVAL', 60 );
 
/** @since 2.9.0  */
/** Permanently deletes posts, pages, attachments, and comments which have been in the trash for EMPTY_TRASH_DAYS. */
!defined( 'EMPTY_TRASH_DAYS' ) && define( 'EMPTY_TRASH_DAYS', 300 );

Debugging WordPress

One of my secrets for getting really good at this stuff is to master debugging. There is really not ever a time when I am working on a site that I don’t have color-highlighted logs scrolling automatically in an ssh window. It’s really almost impossible to fix problems with wordpress or do any kind of advanced anything without being able to view debugging info. At first I relied heavily on a custom php.ini being available on the server, but after having to deal with many hosts who don’t allow php.ini files I now rely completely on setting values using ini_set for ultimate portability. Detailed towards the end of this article and is also included in this wp-config.php

/**#@+
 * DEBUGGING STUFF
 */
/** display of notices during development. if false, error_reporting is E_ERROR | E_WARNING | E_PARSE | E_USER_ERROR | E_USER_WARNING | E_RECOVERABLE_ERROR otherwise E_ALL */
!defined('WP_DEBUG') && define('WP_DEBUG', false);
 
/** The SAVEQUERIES definition saves the database queries to a array and that array can be displayed to help analyze those queries.
 *  The information saves each query, what function called it, and how long that query took to execute.  */
!defined('SAVE_QUERIES') && define('SAVE_QUERIES', WP_DEBUG);
 
!defined('ACTION_DEBUG') && define('ACTION_DEBUG', WP_DEBUG);
 
/** This will allow you to edit the scriptname.dev.js files in the wp-includes/js and wp-admin/js directories.  */
!defined('SCRIPT_DEBUG') && define('SCRIPT_DEBUG', WP_DEBUG);

 
/** Add define('WP_DEBUG_LOG', true); to enable php debug logging to WP_CONTENT_DIR/debug.log */
//!defined('WP_DEBUG_LOG') && define('WP_DEBUG_LOG', true);
 
/** This determines whether errors should be printed to the screen as part of the output or if they should be hidden from the user.
 *  Add define('WP_DEBUG_DISPLAY', false); to wp-config.php to use the globally configured setting for display_errors and not force it to On */
!defined('WP_DEBUG_DISPLAY') && define('WP_DEBUG_DISPLAY', false);

Ultimate Security Tweaks

Well, ultimate for WP’s built-in keys and password functions, this is all for wp-config.php keep in mind. This is a very neccessary and recommended step, and is one of the only things I modify for each new installation.

Security KEYS

If like me you are familiar with password-cracking software like John the ripper, rainbow hash tables, l0pht-crack, etc.. then you will like to know that you can specify your own keys and salts for the encryption used by WP. They are AUTH_KEY, AUTH_SALT, SECURE_AUTH_KEY, SECURE_AUTH_SALT, LOGGED_IN_KEY, LOGGED_IN_SALT, NONCE_KEY, NONCE_SALT, SECRET_KEY and SECRET_SALT.

A random and long key gives you better encryption, and exponentially increasing that is using a random and long salt for the encryption. Encryptions with known salts are incredibly easy to decrypt compared to encryptions with secure salts, because the salt + key individually need to be guessed in order to find a matching hash, vs. just the key if the salt is known. See: Locating weak passwords.

A secret key is a hashing salt which makes your site harder to hack and access harder to crack by adding random elements to the password.

In simple terms, a secret key is a password with elements that make it harder to generate enough options to break through your security barriers. A password like “password” or “test” is simple and easily broken. A random, unpredictable password such as “88a7da62429ba6ad3cb3c76a09641fc” takes years to come up with the right combination.

For more information on the technical background and breakdown of secret keys and secure passwords, see:

I like to use the WordPress.org secret-key service 4 times. That’s because for each key and salt I like to do: (1 key from api +random keyboard input+1 key from api).

/**#@+
 * Authentication Unique Keys.
 *
 * Change these to different unique phrases!
 * You can generate these using the {@link https://api.wordpress.org/secret-key/1.1/ WordPress.org secret-key service}
 * You can change these at any point in time to invalidate all existing cookies.
 * This will force all users to have to log in again.
 *
 * @since 2.6.0
 *
 * Get salt to add to hashes to help prevent attacks.
 *
 * The secret key is located in two places: the database in case the secret key
 * isn't defined in the second place, which is in the wp-config.php file. If you
 * are going to set the secret key, then you must do so in the wp-config.php
 * file.
 *
 * The secret key in the database is randomly generated and will be appended to
 * the secret key that is in wp-config.php file in some instances. It is
 * important to have the secret key defined or changed in wp-config.php.
 *
 * If you have installed WordPress 2.5 or later, then you will have the
 * SECRET_KEY defined in the wp-config.php already. You will want to change the
 * value in it because hackers will know what it is. If you have upgraded to
 * WordPress 2.5 or later version from a version before WordPress 2.5, then you
 * should add the constant to your wp-config.php file.
 *
 * Below is an example of how the SECRET_KEY constant is defined with a value.
 * You must not copy the below example and paste into your wp-config.php. If you
 * need an example, then you can have a
 * {@link https://api.wordpress.org/secret-key/1.1/ secret key created} for you.
 *
 * Salting passwords helps against tools which has stored hashed values of
 * common dictionary strings. The added values makes it harder to crack if given
 * salt string is not weak.
 *
 * @since 2.5
 * @link https://api.wordpress.org/secret-key/1.1/ Create a Secret Key for wp-config.php
 *
 * @return string Salt value from either 'SECRET_KEY' or 'secret' option
 */
define('AUTH_KEY',        'jflkhaskljdfhkljasdhflkjashd;flkjhas;djfh;kajshdflkjashdlfkjhasdlkfhal?p[B+GR{@>{Yq`c|LnG;dvq#| %OA_cbBSU6,rICC1o/c)-|');
define('SECURE_AUTH_KEY', 'jflkhaskljdfhkljasdhflkjashd;flkjhas;djfh;kajshdflkjashdlfkjhasdlkfhal?Vp[Bb15baar8&R-r<[T|?(xhJJABGq+Ux+U$)-Hltp/');
define('LOGGED_IN_KEY',   'jflkhaskljdfhkljasdhflkjashd;flkjhas;djfh;kajshdflkjashdlfkjhasdlkfhal?Vp[B<5n6DG|YWnJ9tY2!M1L)`{-$LW~~Ia%.uCbn!P. 41o2$Z$4');
define('NONCE_KEY',       'jflkhaskljdfhkljasdhflkjashd;flkjhas;djfh;kajshdflkjashdlfkjhasdlkfhal?Vp[Bgu+wm 2)bS0Pd_+1rx0brX]ND8|');
define('SECRET_SALT',      '123423190847olqkfhladhfsldshafasdfasdf09a7f-90a87df98adfyapoiyaf9asd8f70a9s8d7f908a7sdf97W4qCdm2<>))U|sty)+4vpWooKls/^[vN');
/**#@-*/

Using SSL for Admin and Login

SSL is kinda required from my point of view, it is just way to easy to sniff data off the wire otherwise. At least with SSL you force them to use tools like burpsuite, paros proxy, webscarab, etc..

/** @since 2.6.0  */
!defined('FORCE_SSL_ADMIN') && define('FORCE_SSL_ADMIN', true);
 
/** @since 2.6.0  */
!defined('FORCE_SSL_LOGIN') && define('FORCE_SSL_LOGIN', true);

Mod_Rewrite to Force SSL

This is pretty cool, it forces non-https for all urls except for /wp-admin and wp-login.php, which both require https. It also checks for the logged_in_cookie, and if that is present in the request then it doesn't force non-https. Kinda confusing if you don't have a mod_rewrite cheatsheet.

RewriteCond %{THE_REQUEST} ^$ [OR]
RewriteCond %{REQUEST_URI} ^/(wp-admin|wp-login\.php).*$ [NC,OR]
RewriteCond %{HTTP_COOKIE} ^.*wp_li_sadfsdfasdf11b361cdsdfasdfasd=.*$ [NC]
RewriteRule .* - [S=1]
 
RewriteCond %{HTTPS} =on [OR]
RewriteCond %{HTTP_HOST} !^www\.askapache\.com$ [NC]
RewriteRule .* http://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]
 
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /(wp-admin/.*|wp-login\.php.*)\ HTTP/ [NC]
RewriteCond %{HTTPS} !=on
RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]

File System Permissions

You can get a basic and solid intro on file permissions by reading: Changing File Permissions, or you can check out some of my file permission research.

/** The permissions as octal number, usually 0644 for files, 0755 for dirs.
 *  http://codex.wordpress.org/Changing_File_Permissions
 *  if ( !$wp_filesystem->mkdir($remote_destination, FS_CHMOD_DIR) )
 */
!defined('FS_CHMOD_DIR') && define('FS_CHMOD_DIR', (0755 & ~ umask()));
!defined('FS_CHMOD_FILE') && define('FS_CHMOD_FILE', (0644 & ~ umask()));
/**#@-*/
 
/** Define the timeouts for the connections. Only available after the construct is called to allow for per-transport overriding of the default. */
//stream_set_timeout( $stream, FS_TIMEOUT );
//!defined('FS_TIMEOUT') && define('FS_TIMEOUT', 30);
 
//$this->link = @ftp_connect($this->options['hostname'], $this->options['port'], FS_CONNECT_TIMEOUT);
//!defined('FS_CONNECT_TIMEOUT') && define('FS_CONNECT_TIMEOUT', 30);
 
// function get_filesystem_method($args = array(), $context = false) {
//  $method = defined('FS_METHOD') ? FS_METHOD : false; //Please ensure that this is either 'direct', 'ssh', 'ftpext' or 'ftpsockets'
//!defined('FS_METHOD') && define('FS_METHOD', 'direct');
 
/** These methods for the WordPress core, plugin, and theme upgrades try to determine the WordPress path, as reported by PHP, but symlink trickery can sometimes
 * 'muck this up' so if you know the paths to the various folders on the server, as seen via your FTP user, you can manually define them in the wp-config.php file.
 * FS_METHOD forces the filesystem method. It should only be "direct", "ssh", "ftpext", or "ftpsockets".
 * FTP_BASE is the full path to the "base" folder of the WordPress installation.
 * FTP_CONTENT_DIR is the full path to the wp-content folder of the WordPress installation.
 * FTP_PLUGIN_DIR is the full path to the plugins folder of the WordPress installation.
 * FTP_PUBKEY is the full path to your SSH public key.
 * FTP_PRIKEY is the full path to your SSH private key.
 * FTP_USER is either user FTP or SSH username. Most likely these are the same, but use the appropriate one for the type of update you wish to do.
 * FTP_PASS is the password for the username entered for FTP_USER. If you are using SSH public key authentication this can be omitted.
 * FTP_HOST is the hostname:port combination for your SSH/FTP server. The standard FTP port is 21 and the standard SSH port is 22.
 */
//define('FS_METHOD', 'ftpext');
//define('FTP_BASE', '/path/to/wordpress/');
//define('FTP_CONTENT_DIR', '/path/to/wordpress/wp-content/');
//define('FTP_PLUGIN_DIR ', '/path/to/wordpress/wp-content/plugins/');
//define('FTP_PUBKEY', '/home/username/.ssh/id_rsa.pub');
//define('FTP_PRIKEY', '/home/username/.ssh/id_rsa');
//define('FTP_USER', 'username');
//define('FTP_PASS', 'password');
//define('FTP_HOST', 'ftp.example.org:21');
 
/**
 * Block requests through the proxy.
 *
 * Those who are behind a proxy and want to prevent access to certain hosts may do so. This will
 * prevent plugins from working and core functionality, if you don't include api.wordpress.org.
 *
 * You block external URL requests by defining WP_HTTP_BLOCK_EXTERNAL in your wp-config.php file
 * and this will only allow localhost and your blog to make requests.
 * The constant WP_ACCESSIBLE_HOSTS will allow additional hosts to go through for requests. The format of the
 * WP_ACCESSIBLE_HOSTS constant is a comma separated list of hostnames to allow.
 *
 * @since 2.8.0
 * @link http://core.trac.wordpress.org/ticket/8927 Allow preventing external requests.
/** @since 2.9  */
//!defined('WP_HTTP_BLOCK_EXTERNAL') && define( 'WP_HTTP_BLOCK_EXTERNAL', false );
 
/*
 * The constant WP_ACCESSIBLE_HOSTS will allow additional hosts to go through for requests. The format of the
 * WP_ACCESSIBLE_HOSTS constant is a comma separated list of hostnames to allow.
 *
 * @since 2.8.0
 * @link http://core.trac.wordpress.org/ticket/8927 Allow preventing external requests.
 * $accessible_hosts = preg_split('|,\s*|', WP_ACCESSIBLE_HOSTS);
 * return !in_array( $check['host'], $accessible_hosts ); //Inverse logic, If its in the array, then we can't access it.
 */
//!defined('WP_ACCESSIBLE_HOSTS') && define( 'WP_ACCESSIBLE_HOSTS', 'askapache.com,askapache.org' );

Cookies!

There’s always a little comfort in having non-default cookies for security (against auto-bots), and using shorter names also means smaller HTTP Packets.

The $cookie_hash is my hack to get around the fact that COOKIEHASH isn’t definable in wp-config.

/**#@+
 * COOKIES
 * Used to guarantee unique hash cookies @since 1.5 */
$cookie_hash=md5(WP_SITEURL);
 
/** Set a cookie now to see if they are supported by the browser.
 * setcookie(TEST_COOKIE, 'WP Cookie check', 0, COOKIEPATH, COOKIE_DOMAIN);
 * @since 2.3.0 */
!defined('TEST_COOKIE') && define('TEST_COOKIE', 'wp_tc');
 
/* @since 2.6.0 */
!defined('LOGGED_IN_COOKIE') && define('LOGGED_IN_COOKIE', 'wp_li_' . $cookie_hash);
 
/* @since 2.6.0 */
!defined('SECURE_AUTH_COOKIE') && define('SECURE_AUTH_COOKIE', 'wp_sa_' . $cookie_hash);
 
/* @since 2.5.0 */
!defined('AUTH_COOKIE') && define('AUTH_COOKIE', 'wp_a_' . $cookie_hash);
 
/* @since 2.0.0 */
!defined('PASS_COOKIE') && define('PASS_COOKIE', 'wp_p_' . $cookie_hash);
 
/* @since 2.0.0 */
!defined('USER_COOKIE') && define('USER_COOKIE', 'wp_u_' . $cookie_hash);
 
/* ok unset this var, its not needed as COOKIEHASH will have this value, but is not definable in wp-config.php */
unset($cookie_hash);
 
/** @since 1.2.0 */
!defined('COOKIEPATH') && define('COOKIEPATH', preg_replace('|https?://[^/]+|i', '', WP_HOME . '/' ) );
 
/** @since 1.5.0 */
!defined('SITECOOKIEPATH') && define('SITECOOKIEPATH', preg_replace('|https?://[^/]+|i', '', WP_SITEURL . '/' ) );
 
/** @since 2.6.0 */
!defined('ADMIN_COOKIE_PATH') && define( 'ADMIN_COOKIE_PATH', SITECOOKIEPATH . 'wp-admin' );
 
/** @since 2.6.0 */
!defined('PLUGINS_COOKIE_PATH') && define( 'PLUGINS_COOKIE_PATH', preg_replace('|https?://[^/]+|i', '', WP_PLUGIN_URL)  );
 
/** @since 2.0.0 */
!defined('COOKIE_DOMAIN') && define('COOKIE_DOMAIN', $_SERVER['SERVER_NAME']);

/**
  * The WP_CACHE setting, if true, includes the wp-content/advanced-cache.php script, when executing wp-settings.php.
  * For an advanced caching plugin to use, static because you would only want one
  * if ( defined('WP_CACHE') )@include WP_CONTENT_DIR . '/advanced-cache.php';
  */
!defined('WP_CACHE') && define('WP_CACHE', true);
 
/** WordPress Localized Language, defaults to en_US.
 *
 * Change this to localize WordPress.  A corresponding MO file for the chosen
 * language must be installed to wp-content/languages. For example, install
 * de.mo to wp-content/languages and set WPLANG to 'de' to enable German
 * language support. */
!defined('WPLANG') && define ('WPLANG', 'en_US');
 
/** Stores the location of the language directory. First looks for language folder in WP_CONTENT_DIR
 *   and uses that folder if it exists. Or it uses the "languages" folder in WPINC. @since 2.1.0 */
//!defined('WP_LANG_DIR') && define('WP_LANG_DIR', ABSPATH . WPINC . '/languages');
 
/** LANGDIR defines what directory the WPLANG .mo file resides. If LANGDIR is not defined WordPress looks first to wp-content/languages and then wp-includes/languages for the .mo defined by WPLANG file.  Old static relative path maintained for limited backwards compatibility - won't work in some cases*/
//!defined('LANGDIR') && define('LANGDIR', 'wp-content/languages');
 
/** Stores the location of the WordPress directory of functions, classes, and core content. @since 1.0.0 */
//!defined('WPINC') && define('WPINC', 'wp-includes');

WPMU Stuff

I personally don’t use.

/** Allows for the mu-plugins directory to be moved from the default location. @since 2.8.0 */
//!defined('WPMU_PLUGIN_DIR') && define( 'WPMU_PLUGIN_DIR', WP_CONTENT_DIR . '/mu-plugins' ); // full path, no trailing slash
 
/** Allows for the mu-plugins directory to be moved from the default location. @since 2.8.0 */
//!defined('WPMU_PLUGIN_URL') && define( 'WPMU_PLUGIN_URL', WP_CONTENT_URL . '/mu-plugins' ); // full url, no trailing slash
 
/** Allows for the mu-plugins directory to be moved from the default location. @since 2.8.0 */
//!defined( 'MUPLUGINDIR' ) && define( 'MUPLUGINDIR', 'wp-content/mu-plugins' ); // Relative to ABSPATH.  For back compat.

WordPress Database

This is usually the only thing I have to manually edit when creating a new site, unless I just use the same DB and modify the $table_prefix, (farther down). I run everything I possibly can in UTF-8, but if you don’t already know alot about character sets, wow it is one of the most confusing things so you may want to save learning about that topic for another day. Otherwise the following are helpful (and show how confusing character sets are!)

If you ever setup WP to use the builtin membership features, make sure you learn about the CUSTOM_USER_TABLE and CUSTOM_USER_META_TABLE constants, I’ve found them very helpful.

/**#@+
 * MySQL settings
 */
/** The name of the database for WordPress */
define('DB_NAME', 'askapachewpblog75');
 
/** The username to access the database */
define('DB_USER', 'askapache245d');
 
/** The password for the username to access the database */
define('DB_PASSWORD', 'asdfklj2340');
 
/** The hostname to connect to the database at */
define('DB_HOST', 'mysql.askapache.com');
 
/** The charset of the database */
define('DB_CHARSET', 'utf8');
 
/** The collation of the database */
define('DB_COLLATE', 'utf8_general_ci');

$table_prefix

The $table_prefix is the value placed in the front of your database tables. Change the value if you want to use something other than wp_ for your database prefix. Typically this is changed if you are installing multiple WordPress blogs in the same database, and also for enhanced security.

Its a safe and good idea to change this value pre-installation to add more security to your WordPress blog. Exploits attempted against your WordPress blog by malicious crackers often are built with the premise that your blog uses the prefix wp_, by changing the value you mitigate some attack vectors.

/**
 * WordPress Database Table prefix.
 *
 * You can have multiple installations in one database if you give each a unique
 * prefix. Only numbers, letters, and underscores please!
 */
$table_prefix  = 'ar15_';
 
/** CUSTOM_USER_TABLE and CUSTOM_USER_META_TABLE are used to designated that the user and usermeta tables normally utilized by WordPress are not used, instead these values/tables are used to store your user information. */
//!defined('CUSTOM_USER_TABLE') && define('CUSTOM_USER_TABLE', $table_prefix . 'my_users');
//!defined('CUSTOM_USER_META_TABLE') && define('CUSTOM_USER_META_TABLE', $table_prefix . 'my_usermeta');

Setup PHP Ini Settings

 
/** Turns the output of errors on or off, you really never want this on, you should only view errors by reading the log file. */
ini_set('display_errors', WP_DEBUG_DISPLAY);
 
/** Tells whether script error messages should be logged to the server's error log or error_log. */
ini_set('log_errors', 'On');
 
/** http://us.php.net/manual/en/timezones.php */
ini_set('date.timezone', 'America/Indianapolis');
 
/** Where to log php errors */
ini_set('error_log', ASKAPACHE_ROOT . '/logs/php_error.log');
 
/** Set the memory limit, otherwise defaults to '32M' */
ini_set('memory_limit', WP_MEMORY_LIMIT);

Sessions are slow

So I only use sessions when I have a specific use… In this case I need sessions only when one of the tools in the /online-tools/ directory is being used. And that is for the captcha image. In the future I won’t ever use sessions.

if(preg_match( '#^/online-tools/#',$_SERVER['REQUEST_URI'])) session_start();

Include Custom Files

Sure you could use the my-hacks.php that WP allows, or you can just stick your functions in your TEMPLATEPATH/functions.php file, but they are executed only after the wp-settings.php file, which may be too late for your file.

In the past I’ve also used the auto_prepend_file settings to run my script before anything (index.php) but I ran into some issues on different hosts, and it wasn’t as portable.

This is useful because you can have a file with globally available functions that you can use in non-WP areas as well as WP areas. I am moving away from this more and more as I learn more about classes and build plugins instead for portability.

include_once ASKAPACHE_ROOT . '/includes/myfunctions.inc';
 
/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');
?>

Some Useful PHP

I am constantly trying to make my sites and code more portable, so I am using plugins alot more to accomplish things that I use to do with separate php. Here are some examples of minimal php.

add_filter("the_generator", create_function('$a','return "";'));
add_filter('the_content', create_function('$a', 'return ((is_feed())? $a."".get_the_title()." originally appeared on ".get_bloginfo("name")."." : $a);'), 99999);
add_filter('excerpt_length', create_function('$a', 'return 300;'),99);
add_filter('excerpt_more', create_function('$a', 'return "…";'),99);
add_action( 'wp_head', create_function('$a','echo "\n";'), 95 );
add_action( 'wp_head', create_function('$a','echo "\n";'), 96 );
add_action( 'wp_head', create_function('$a','echo "\n";'), 97 );
add_action( 'wp_head', create_function('$a','echo "\n";'), 98 );
add_action( 'wp_head', create_function('$a','echo "\n";'), 99 );

Debugging Note

If you read this far than you probably know how important debugging is, but I sometimes like to stick the best tips deep in my articles to make sure only YOU find it. GRTFM isn’t used on this site, it’s mostly a requirement because my writing can get pretty bad.. The point, debugging is more than a crucial requirement if you want to do anything cool. Don’t worry I got you.. check my AskApache Debug Viewer Plugin from the official WP site. It’s pretty close to providing as verbose amount of information that I could possibly figure out how to get out of php, probably more than you have ever seen at least, I focused on quantity. I use it all the time on new installs as there is no setup required and it tells me advanced information about the setup of the server, hacker code for sure.

Here’s a quick function to see set global vars, I just think this is interesting code.

function askapache_global_debug(){
  global $_GET,$_POST,$_COOKIE,$_SESSION,$_ENV,$_FILES,$_SERVER,$_REQUEST,$HTTP_POST_FILES,$HTTP_POST_VARS,$HTTP_SERVER_VARS,$HTTP_RAW_POST_DATA,$HTTP_GET_VARS,$HTTP_COOKIE_VARS,$HTTP_ENV_VARS;
  $gv=create_function('$n','global $$n; ob_start(); if ( is_array($$n) && sizeof($$n)>0 && print("[{$n}]\n") ) print_r($$n);return ob_get_clean();');
  foreach (array('_GET','_POST','_COOKIE','_SESSION','_ENV','_FILES','_SERVER','_REQUEST','HTTP_POST_FILES','HTTP_POST_VARS','HTTP_SERVER_VARS','HTTP_RAW_POST_DATA','HTTP_GET_VARS','HTTP_COOKIE_VARS','HTTP_ENV_VARS') as $k)echo $gv($k);
  print_r(get_defined_constants());
}

Also check the WordPress Codex page: Editing wp-config.php and Perishable Press’s: Stupid WordPress Tricks

Advanced WordPress wp-config.php Tweaks originally appeared on AskApache.com

mod_rewrite Fix for Caching Updated Files

AskApache — Sun, 30 Aug 2009 13:20:59 +0000

Web Developers sometimes use file.ext?v=137 as a version control system so they can force visitors to use an updated file. This is so terrible. Instead link to apache-003.css and set it to be cached forever. When you change the file you just change the links to apache-004.css.

Raw Speed Benefit

This eliminates millions of bandwidth and resource robbing 304 If-Modified-Since requests.

Renaming links vs. Renaming files

On the server my files are named apache.css and apache.js, but in the xhtml I point to them using the names apache-113.css and apache-113.js, after I change the file I just add 1 to the number, and the new file is cached. They are internally redirected to apache.css and apache.js (invisible to the user) The concept is similar to a “shortcut” in windows or a symlink in BSD. The trick is that I never actually rename the files on the server. I just rename them in the html. That means apache-135.css is served from the file apache.css but the browser/cache only see and know about apache-135.css.

XHTML

NOTE: You can do your own investigating of this sites source code and HTTP headers to see this whole system in action

mod_rewrite code for htaccess or httpd.conf

Updated: 10/20/2008

RewriteEngine On
RewriteBase /
RewriteCond %{THE_REQUEST} ^(GET|HEAD)\ /z/([a-z]+)/(.+)-([0-9]+)\.(js|css).*\ HTTP/ [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .+ /z/%2/%3.%5 [NC,L]

Alternate mod_rewrite code

RewriteEngine On
RewriteBase /
RewriteRule ^([cij]+)(/?[a-z]*)/([a-z]+)-([0-9]+)\.([a-z]+)$ /$1$2/$3.$5 [L]

Ideal Caching Scheme

Ok so you want the xhtml to be the only file that isn’t cached without being validated, its simple to setup your own caching scheme.

Bad Cache information for a file with the `?v=foo` hack

This object will be fresh for 1 week. It can be validated with Last-Modified. This object requests that a Cookie be set; this makes it and other pages affected automatically stale; clients must check them upon every request. Because it contains a query (‘?’) in the URL, many caches will not keep this object.

mod_rewrite Fix for Caching Updated Files originally appeared on AskApache.com

Adding Print Capability to your Site with CSS

AskApache — Wed, 01 Jul 2009 04:39:56 +0000

Its really nice to be able to print out a webpage you are reading using your browsers built-in print feature. Using CSS you can easily transform your site into a print-friendly site.

Today I received an email from a visitor to my site requesting that I add a way to print site articles on AskApache

Finally, you have so much great stuff that I need to print it take it offline so I can consume it. However, your theme prints just awful with huge empty spaces between paragraphs and especially with some of your example code, i.e. see “Redirect All Feeds to Feedburner’s MyBrand”. Not sure if you care but it would really be great for those of us who print if you could clean it up for nicer printing to fully print your examples and to get rid of the excessive whitespace.

Go ahead and hit print preview to see how effective this simple CSS print method is! Updated! Now both the print and regular css are in the same file! Please read this.

Making AskApache Printer-Friendly

The first thing I did was to create a blank style sheet named apacheprint.css and then I added this XHTML to my

Amazingly, to make my site printer-friendly, all I had to do was edit the apacheprint.css file to control how browsers will print my site.

Resetting the CSS

Next I added the Yahoo Reset.css and Base.css files to my apacheprint.css file. That code looks like this.

html {color:#000; background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {margin:0; padding:0;}
table {border-collapse:collapse; border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;}
li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0; font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select {font-family:inherit; font-size:inherit; font-weight:inherit;}
input,textarea,select {*font-size:100%;}
legend {color:#000;}
code {display:inline;text-indent:3px;}
h1 {font-size:138.5%;}
h2 {font-size:123.1%;}
h3 {font-size:108%;}
h1,h2,h3 {margin:1em 0;}
h1,h2,h3,h4,h5,h6,strong {font-weight:bold;}
abbr,acronym {border-bottom:1px dotted #000; cursor:help;}
em {font-style:italic;}
blockquote,ul,ol,dl {margin:1em;}
ol,ul,dl {margin-left:2em;}
ol li {list-style:decimal outside;}
ul li {list-style:disc outside;}
dl dd {margin-left:1em;}
th,td {border:1px solid #000; padding:.5em;}
th {font-weight:bold; text-align:center;}
caption {margin-bottom:.5em; text-align:center;}
p,fieldset,table,pre {margin-bottom:1em;}
input[type=text],input[type=password],textarea {width:12.25em; *width:11.9em;}

Hiding Unfriendly Content

Ok so I don’t want to display the sidebar, header, footer, and several other elements on this site, so I added them to apacheprint.css with the instruction to not display them.

#HeadW,#HeadW,
#NavM,#HeadW,
#FootW,#FootW,
#simg,#simg,
#BTNfs,#BTNfs,
#sidebar,#sidebar,
#content #pagebar,#pagebar,
#content #digg,#digg,
#content #bcomme,#bcomme,
#content #comments,#comments,
#content #related1p,#related1p,
#content .rnote,
.flef,.flef,
#content #npl,#npl {display:none !important;}
 
#searchbox_002660089121042511758:kk7rwc2gx0i,#searchbox_002660089121042511758:kk7rwc2gx0i,
form#searchbox_002660089121042511758:kk7rwc2gx0i,form#searchbox_002660089121042511758:kk7rwc2gx0i,
#snaptalent,#snaptalent,
h2.HAC {display:none !important;}

Misc CSS Fixes

Once that was done I tested my site using the “print preview” browser feature, and found some other things I needed to fix.

#GlobalW,
#content,
#htaccess {width:auto !important; height:auto !important; overflow:visible !important; background:transparent !important; background-image:none !important; padding:0 !important; margin:0 !important; float:none !important;}
 
.item {width:auto !important; height:100% !important; overflow:visible !important; float:none !important;}
.post-content {width:auto !important; height:auto !important; float:none !important;}
.item .post-content {width:90% !important;padding:0 6% 0 0 !important;max-width:100% !important;margin:0 auto !important;}
 
.C {clear:both; padding:0; margin:0; line-height:5px; font-size:10px; border-bottom-width:0px;}
#content .post-content h2 {margin-top:1em;}
#content h1#sing {margin:0; width:100%; padding:0;}
.item {padding:0; margin:0;}
#content .commentlist li,#content .commentlist li.alt {margin:0.25em;}

Correct Page Breaks and Width

In order to print correctly, I also added the following.

html,body {background-color:#FFF; color:#000; font-size: 12pt;}
img  {max-width: 100%;}
h1,h2,h3,h4,h5,h6 {page-break-after: avoid;}
ul, ol, li {page-break-inside: avoid;}
table table,tr,td {page-break-before: avoid;page-break-after: avoid;}

Making Comments Appear on Separate Page

I created a class called .pb in my main css file

.pb { page-break-before: always; }

that creates a page break and then added that class to a hr element before my comment div.

Wrapping Code in PRE

I use

 tags to markup code in my posts, but printing doesn't show you a scrollbar like my site does, so I added this fine CSS pre hack to wrap the lines when printing.
pre {page-break-inside: avoid; font-size: 7pt !important; max-width:95% !important; overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */ white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ /* width: 99%; */ word-wrap: break-word; /* Internet Explorer 5.5+ */}
Displaying links for print
I opted not to do this because I have way to many links in my posts, but here is how I can display the links next to the link name in p and li tags.  Note that it will not print relative links or anchor links or javascript links.
.item p a:link:after,
.item p a:visited:after,
.item li a:link:after,
.item li a:visited:after { content: " (" attr(href) ") ";}
.item p a[href^="/"]:after,
.item li a[href^="/"]:after,
.item p a[href^="#"]:after,
.item p a[href^="javascript"]:after,
.item li a[href^="#"]:after,
.item li a[href^="javascript"]:after,
.item p a[href^="http://www.askapache"]:after,
.item p a[href^="http://www.askapache"]:after,
.item li a[href^="http://www.askapache"]:after,
.item li a[href^="http://www.askapache"]:after {content: "";}
Learn More about CSS Printing

Yahoo UI Library for Resetting CSS
A List Aparts: Going To Print
Wrapping Text Inside Pre Tags
A List Aparts: Taking Your Design to the Small Screen
Dev Operas: Making Small Devices Look Great
CSS-Tricks finally gets a Print Stylesheet
Advanced CSS Printing: Using Page Breaks
Opera user stylesheets
W3.org Paged Media

Adding Print Capability to your Site with CSS originally appeared on AskApache.com

.htaccess trick to show Alternate CSS file based on IP

AskApache — Mon, 20 Oct 2008 21:17:00 +0000

This past week I was making changes to my sites apache.css file for a site-redesign. I wanted to make changes to the .css file that only I could see, so that my regular traffic and site-visitors would still see the old version. I quickly came up with an elegant solution using the incredibly powerful .htaccess and mod_rewrite that worked so well I wanted to share it with all you great and interesting people :)

Why and How to Use

So to develop the new site’s css file I created a new file on my server called apachenew.css, and the old file was called apache.css, this trick simply shows anyone accessing the site from a certain IP address the apachenew.css file instead of the apache.css file. Cool huh!?! So I can edit the apachenew.css file and preview the site with the new css while everyone else still sees the old css. When I am finished I just save apachenew.css as apache.css and remove this .htaccess code. Sweet!

Updated: I got some emails from you all asking for a clearer ready-to-use example, especially from WordPress bloggers. Here you go!

.htaccess code for WordPress

Ok find your .htaccess file

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

 
# END WordPress

The New htaccess

This is assuming that your themes real .css file is /wp-content/themes/yourtheme/stylesheet.css and the developer .css file you will only be able to see is located at /wp-content/themes/yourtheme/stylesheet-new.css



Header set Cache-Control "must-revalidate, no-store, no-cache"


 
RewriteEngine On
RewriteBase /
 
RewriteCond %{REMOTE_ADDR} =208.113.134.190
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /wp-content/themes/yourtheme/stylesheet.css.* HTTP/ [NC]
RewriteRule ^wp-content/themes/yourtheme/stylesheet\.css$ /wp-content/themes/yourtheme/stylesheet-new.css [L]
 
# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

 
# END WordPress

Note: The real filename is apache.css, the -0031 part is because I use the incredibly useful mod_rewrite updated file caching techinque which allows me to force clients to use updated versions of my .css file by renaming it, while at the same being able to set Far Future Expires Headers for optimum caching.

Changes to XHTML

None! The link to include my .css file within the of my pages XHTML remains the same.

.htaccess code to show alternate .css file based on IP

So my browser makes a request for the apache-0031.css file, and IF the request originates from the IP address 208.113.134.190 then this code will instead serve the apachenew.css file AND then it uses the S=1 RewriteRule flag to skip over the next RewriteRule Block, which is my updated file caching techinque trick. If you don’t use that you won’t need to skip any rules or use the 2nd RewriteRule block below, just the first.

RewriteEngine On
RewriteBase /
 
RewriteCond %{REMOTE_ADDR} =208.113.134.190
RewriteCond %{THE_REQUEST} ^(GET|HEAD) /z/c/apache-([0-9]+).css.* HTTP/ [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^z/c/apache-([0-9+]).css$ /z/c/apachenew.css [L,S=1]
 
RewriteCond %{THE_REQUEST} ^(GET|HEAD) /z/([cj]+)/(.+)-([0-9]+).(js|css).* HTTP/ [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^z/([cj]+)/.*.(css|js)$ /z/%2/%3.%5 [NC,L]

Turn OFF Caching for Development CSS

The next thing I wanted to automate was to turn off the caching of the apachenew.css file, which only I can see so there is no need to cache. To do this with my current caching scheme I simply add the must-revalidate header to the headers sent for that file.



Header set Cache-Control "must-revalidate"

What do you think? Questions/Improvements/Comments Welcome!

.htaccess trick to show Alternate CSS file based on IP originally appeared on AskApache.com

SEO Secrets of AskApache Part 2

AskApache — Fri, 17 Oct 2008 21:44:22 +0000

In part I: SEO Secrets of AskApache.com we talked about content and building a website to be your “SEO Base”. This article discusses some advanced SEO concepts to get a site indexed, move your best pages higher in search results, and controlling the pagerank/seo-juice of your site. but relatively easy ways to control and tweak WHAT urls on your site are indexed, and HOW. I’ve heard some people refer to this as “controlling pagerank flow” and “controlling pagerank juice”, basically we want our best pages to rank higher in the search engine results.

Big Picture: Going from no website to AskApache.com in less than a year can be accomplished by anyone with unique content and a resolve to avoid any shortcuts and take it one step at a time.

We want what Google wants, to provide the most relevant content for someone who is doing a search. Basically, you want every url on your site that has unique content to be included in the index. In other words, you have to think like a search engine!

The Goal of Google

Here’s what I mean, Google approaches search with the overwhelming goal of bringing the content to a searcher that is the most-likely to be what that searcher is searching for. Another way of looking at it is something I read on Google…

Google’s goal is to get you off of their site as fast as possible by providing you with exactly what you are looking for.

Think about SEO like this

If you search for htaccess tutorial for seo on Google, would you be more likely to visit a tutorial about using .htaccess for seo or a category page for htaccess articles? AskApache.com has both of those urls included in the index, but the article ranks higher than the category page, as it very well should.

Get Your URLS Indexed

Before I explain how I am able to help Google and other search engines rank my article pages higher than my category pages, we need to get the urls in the index or nothing will show up. There are many well-discussed methods for getting included in the index, so I’ll just list a few that I use.

Provide High-Quality original content, people will link to it
Get a sitemap and use Google Webmaster Tools
Publish an RSS/Atom Feed and ping the net when you publish a post
Use robots.txt and robots meta tags

Your URLs in the index

Here’s how to find out which of your pages are indexed.

Indexed pages in your site: site:
Pages that link to your site’s front page: link:
The current cache of your site: cache:
Information about your site: info:
Pages that are similar to your site: related:

Break It Down

Yo homeslice! I didn’t mean break dance.. I mean lets simplify AskApache in the context of getting our urls indexed high/low. Here’s the stats: 1 Homepage, 206 Articles, 19 Pages, 31 Categories

1 Homepage

This page is generally the highest ranking page in the index, it should contain links to your best urls, and provide easy navigation

206 Specific Topic Articles

These are the article’s (like this one) of AskApache.com and are the main source of search engine traffic. You want each url (if its a good article) to be ranked as high as possible. Some keys are to really make each article specific to a topic by using best-practice (X)HTML.

19 Static Pages

Most of these are pages like the online-tools hosted on this site, or other basic pages like about, contact us, site-map, etc.. Some of these you may want to rank very high ( like the /about/ page ) and some you may not want to even be included in the index.

31 Specific Topic Category Pages

These are tricky because they are generally just lists of articles from each category, which isn’t specific enough to get much seach-engine-traffic, but is very useful to site visitors. I beefed up my category pages by adding additional information about the category topic in addition to excerpts of the articles.

Higher Pagerank = Higher Up in Search Results

So Googlebot and other search engine robots have these crazy complicated algorithms (many patented) that SEO Industry types may get caught up in and try to technically analyze them. I’m sure you’ve seen/read/heard the complicated advice that will always be pushed by many… advice like:

analyze the number of words in the description/title/1st paragraph/etc.
Make sure your “keyword” is sprinkled throughout the text every 10-30th word..
Other equally unexciting technical analysis

Now if you’ve had success with that then props to you, success is success, but I personally choose to completely ignore all that. The number 1 thing that the top search engines advise is to design your page for a Human Visitor, not a computer. The golden rule for me is how I would rank the page, not how some algorithm would.

Designing for a Human Visitor

This is a major factor in your site being at the top vs. nowhere. You design your HTML to be as minimal as possible (see source code for my homepage) and contain ONLY the neccessary elements. Above all, use semantically sound XHTML markup. (view source of W3C)

External CSS/Javascript

Get your javascript and CSS out of your HTML and use external files (like this site) ALWAYS! You should start with just the HTML, no css, no colors, no javascript, and THEN you add the .css and then you add the javascript.

Site Accessibility

Say your browser didn’t have a mouse, didn’t support images, css, javascript, or even colors! Your HTML should be structured such that your page is still easily readable and easy to navigate. You can use lynx, links, and many other terminal-based browsers to test for this… please see the Web Accessibility Initiative (WAI) for detailed info.

Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality. For example, when a site is coded with semantically meaningful HTML, with textual equivalents provided for images and with links named meaningfully, this helps blind users using text-to-speech software and/or text-to-Braille hardware.

Controlling a URL’s Pagerank

A few tools and techniques are available for controlling the “juice” or “pagerank” of your urls.

Robots.txt
Robots Meta Tags
Links

Robots.txt

I’ve done quite a bit of research and experimentation with robots.txt files, which is a file located in the root of your website at http://www.askapache.com/robots.txt that is downloaded by all legitimate search engine spiders/bots and used as a Blacklist to prevent certain urls from being indexed. Here are a few of the articles on this site, which you may skip if you like as they don’t illustrate the big-picture that I am going to discuss now.

How To Use Robots.txt

Even though robots.txt files are for whitelisting and blacklisting urls, I have found that they should only be used as an extreme form of blacklisting. When you Disallow a url in your robots.txt file, that means most search engine bots won’t even LOOK at the url. As you can see in the below example, I only disallow urls that shouldn’t ever be LOOKED at. The real powertool is the robots meta tag.

User-agent: *
Disallow: /cgi-bin
Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content
 
Sitemap: http://www.askapache.com/sitemap.xml

Robots Meta Tag

Ok I’m really trying to simplify, because what you should understand is the big-picture. Every page can have a robots meta tag in the header, and this robots meta tag can tell the search-engine to index/not-index AND follow/not-follow. Here are some examples:

content=”index” / noindex

index means the search engine is free to index, archive, cache, and follow the page whereas noindex means DO NOT include this page in the search engine results.

content=”follow” / nofollow

follow means the search engine is free to LOOK at the page and follow the links on the page whereas nofollow means DO NOT follow the links on the page.

WordPress Auto-Robots meta tag code

Just add this to any plugin file and it will add the right robots meta tag to your site.. tweak to taste.

function askapache_robots_header(){
 global $wpdb;
 
 $robot = '';

 if ( is_paged() || is_search() || is_404() || is_author() || is_tag() )
   $robot = '';
 elseif ( is_home() || is_front_page() || is_single() )
   $robot = '';
 elseif ( is_category() || is_page() )
   $robot = '';
 
 echo $robot . "\n";
}
add_action( 'wp_head', 'askapache_robots_header' );

Links

External and Internal Links are the crux of SEO. It’s important to start FIRST on your Internal Links and linking structure… Once you are satisfied that the correct pages are indexed and ranked appropriately, then you can begin to look at external links.

The fewer links on a page, generally the better.
If every page of your site points to the same url on your site, pagerank goes up from the number of internal links.
Use of the rel, title, alt attribute semantically is very helpful. (next, prev, index)
Put your best links higher up in the XHTML, and put helpful/solid links at the end.
You can add rel="nofollow" to links that you dont want followed.

The web has gotten to be so full of malicious/non-helpful SEO activity that I recommend developing your content NOT external links. If you want to do this right and provide great content that makes search engine users happy and makes the web better, then explore this blog and develop content until the next article in this series, where I’ll show you how to make your site explode.

Stay tuned for Part III, which will dive deeper into the pipeworks of AskApache.com

SEO Secrets of AskApache Part 2 originally appeared on AskApache.com

SEO Boost from Google 404 Plugin

AskApache — Tue, 01 Jul 2008 15:11:16 +0000

Demo | Download | Installation | FAQ | Screenshots / Video

AskApache Google 404 is a must-have WordPress plugin that uses some ajax and a couple tricks to display a very helpful and SEO Error Page. The default displays Google Search Results for images, news, blogs, videos, web, custom search engine, and your own site.

Updated: 01/26/2008
Install Time: 10 seconds to 5 minutes
Install Difficulty: Super Easy

Demo 404 Error Page

Click Image

Heads Up: I’ve been thinking about ways to improve this plugin for awhile now, and I’m going to be releasing an upgrade in the coming weeks! Any specific feature requests let me know~

Downloads

askapache-google-404

404.php Installation

Upload zip/tar.gz file to the /wp-content/plugins/ directory and unzip.
Activate the plugin through the ‘Plugins’ menu in WordPress.
Go to your Options Panel and open the “AA Google 404″ submenu. /wp-admin/options-general.php?page=askapache-google-404.php
Enter in your Google Search API Key and hit the “Update Key” Button. (Get One)
Add the code to your 404.php template page by including in your main content area.

Frequently Asked Questions

Do I need a Google Account?

Yes.

Do I need a 404.php template file?

Only if you want to use this for your error page.

My 404.php page isn’t being served for 404 Not Found errors!?

Add ErrorDocument 404 /index.php?error=404 to your .htaccess file.

What is a Google API Key?

How do I get a Google API Key?

Google 404 Screenshots

Loading Video… [dl]

Plugin Configuration Panel

Search Entire Web

Search Blogs

Search Custom Search Engines

Search Images

Search Online Videos

More Info from Google

SEO Boost from Google 404 Plugin originally appeared on AskApache.com

Come On and Sprite for your Website

AskApache — Wed, 16 Jan 2008 04:56:15 +0000

Notice any familiar images from my website? Real special huh? Hah, maybe.. No, let’s not be silly, let’s get to it. Get ready to save some bandwidth

CSS Sprites- What you say?

Css sprites sound tough but they aren’t, not here, not in this article. I want you to make one, I want a faster technorati, I want a faster hypem.com! Just one. Now your website visitors only have to download 1 image instead of 3-15! I do that for you guys and girls, won’t you return the favor?

Image Sprite before XHTML

Go to you site and pick out 3-15 images that are on almost every page.
Now create a new image with all of those images side by side, it will make things easier to have each image be at the very top, so they aren’t on top or above each other.
Then make the background white and save the file.

That’s it! Your own Image Sprite!

Just a couple images pasted together in a photoshop file. Now that we understand the simplicity of a sprite, lets focus on using one, and making that as easy as possible, none of that tricky CSS stuff that I love.

XHTML before CSS

Ok before you have CSS, you have XHTML. This is the XHTML that IS my askapache logo at the top left of this screen. It is conveniently a link to my home page. All you need to notice from this example is the id="apache". That is how we can control that particular tag from within CSS.

CSS and We’re spent

Whew, that was an exhausting couple minutes right? Ok did you take a water break? You ready go? Lets do it. Time to pay a little back to our Internet.

This css explains that the background-image to be displayed for the #apache link element is exactly 160×27 pixels and is 81pixes in from the left of the image css-sprite.

#apache {width:160px; height:27px; background:url(http://static.askapache.com/i/css-sprite.png) -81px 0 no-repeat;
margin:0; padding:0; overflow:hidden;display:block; position:absolute; top:10px; left:10px; }

Dancing the Sprite Dance

Ok so that should get you started, or if that makes you happy enough you are good to go!

Using CSS Sprites for image elements

See now why I said it would be easier if you keep your images all aligned at the top? This way you only have to figure out the distance from the left as well as the actual image dimensions. But as my sprite example shows, you don’t have to do it the easy way, but just coming this far you’ve accomplished more than you realize, and probably gave you an advantage most of your competitors don’t have. No doubt. Congratulations.

But, what if you are a stickler for semantically ideal coding guru and you don’t like using background-images on an a element without using an image element? First, chill :p

I experimented a little bit on this awhile ago, and discovered a simple but IMO very elegant solution. To get it to work, use a 1×1 transparent .gif image and set that as the source of your image, everything else discussed above will then work.

Caveats

Not many. Because you should only use this for your most requested images that are more design elements than something like a photo of your dog.

Use the overflow:hidden css to prevent overlapping.
For list elements like li, ul, dt, etc.. follow this article and align the elements vertically.
Dont become a SNOB!

Come On and Sprite for your Website originally appeared on AskApache.com

CSS Cross-Browser Compatibility Tip

AskApache — Thu, 13 Dec 2007 08:08:02 +0000

I’ve been trying to master CSS for a number of years, and rely on it heavily for every web design project I am involved in. An issue that was more important in the past but still huge today is the difference between how the various browser rendering engines and DOM engines process CSS. Basically, an WHTML Strict (the only way I code) web page can look dramatically different depending on which browser is viewing it.

Just last week I finished up an online Webinar Registration form for one of regular clients, and proceeded to send an invitation to register out to hundreds of qualified leads. I received feedback from a couple of the leads using the registration form that they were having problems seeing the submission button/image to complete the registration. I instantly realized that the problem could only be occuring because of CSS issues. These particular leads were using old versions of Apples’ Safari web browser and even a version of Internet Explorer dating from the stone-age. The problem was how floated elements, cleared elements, and block level vs. inline elements are displayed in those browsers. The fix was very simple and only took me a minute or 2, but it highlighted that I have become a little to confident in my CSS cross-browser-compatibility skills.

What I used to do when I was still learning CSS was to check the web page in each of the various problematic browsers to make sure the display stayed the same. I have several actual machines and several vmware virtual machines running various browers but I decided to skip all that extra time and effort and just use an online tool to do it for me. The tool views my page in all the various browsers and generates a screenshot image from each browser so that I can see if there are issues with my CSS.

Browsershots

Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

Below are the actual screenshots generated from Browsershots, and so this tool is incredibly helpful in verifying my sites as cross-browser compatible.

Safari 3.0.3
Windows 2000

Opera 9.24
Windows 2000

Firefox 2.0.0.9
Windows 2000

Konqueror 3.5
Ubuntu 6.06

Firefox 1.5.0.13
Ubuntu 6.06

Opera 9.24
Ubuntu 6.06

MSIE 7.0
Windows 2003

MSIE 6.0
Windows XP

Firefox 1.5
Windows XP

Opera 9.50
Ubuntu 7.10

Firefox 2.0.0.11
Ubuntu 7.10

MSIE 5.5
Windows 2000

Safari 1.3.2
Mac OS X 10.3

Safari 3.0.4
Mac OS X 10.4

Safari 2.0.4
Mac OS X 10.4

Firefox 2.0.0.1
Mac OS X 10.4

NetFront 3.2
Ubuntu 7.10

Epiphany 2.18
Ubuntu 7.04

CSS Cross-Browser Compatibility Tip originally appeared on AskApache.com

Best CSS .Classes for CSS Toolbox

AskApache — Wed, 28 Nov 2007 21:57:41 +0000

As a Professional Web Developer and Designer, CSS is by far one of the most useful tools I use. Moving from one web site to the next is made easier by having a CSS Toolbox containing some default CSS Classes that you use over and over again. Here are 10 of my favorite CSS Classes.

What are Your favorite CSS Classes? Please share your tips!

Universal CSS .Classes

Most of these are what I like to think of as “actionable” classes, IOW, they aren’t just color classes or font-size classes.

.S {display:block; visibility:visible;} – Shows the element.
.H {display:none; visibility:hidden;} – Hides the element.
.VV {visibility:visible;} – Makes the element visible.
.VH {visibility:hidden;} – Hides an element but still takes up space, not fullly hidden like .H
.FR {float:right;} – Floats the element to the right.
.FL {float:left;} – Floats the element to the left.
.DI {display:inline;} – Changes the display type to “inline”.
.DB {display:block;} – Makes the element a block-level element.
.C {clear:both; padding:0; margin:0; line-height:2em; font-size:10px; border-bottom:1px solid #FFF;} – Clears floated elements.
.CENT {margin:0 auto;} – Makes block element centred.

Please note that these classes are meant only to show what can be done with CSS, I wrote this post for CSS guru’s and up and coming gurus. Sometimes I assume everyone reading my blog know as much as I do about what I’m writing about, so I skip almost all explanation and skip to the code. Basically stick to the W3C’s recommendations and try not to use classes inline unless its for something specific. Most of these classes are very useful for use in javascript as well using the element.className='S' method.

Universal CSS Classes Example

- clears any block level element.

- Its still a block-level element, so it correctly clears floated elements and is a semantic page separator. - this image will float to the right.

- the p is centred (if width isn't 100%;).

Think you are such a CSS/semantics guru that using classes is below you? Ridiculous! Classes are extremely helpful when used properly and not in excess. Surely you don’t think you know more than Eric Meyer or the W3C… please view their source code, and try to loosen up while your at it ;)

Best CSS .Classes for CSS Toolbox originally appeared on AskApache.com

Review: Posh CSS

AskApache — Wed, 28 Nov 2007 20:41:45 +0000

PoshCSS.com is a site by Massive Blue that has links to some really nice CSS Articles. I recommend subscribing to their RSS Feed so you don’t miss any.

Posh CSS

Posh CSS is the brainchild of Sam Brown from Massive Blue who was looking for one central place to read about the latest and greatest techniques, tips and tutorials in the Cascading Style Sheet world. None existed and thus, Posh CSS was born.

Posh CSS Articles

Review: Posh CSS originally appeared on AskApache.com

CSS Background Image Sprites

AskApache — Mon, 08 Oct 2007 12:47:34 +0000

Using a CSS Background Image Sprite with the CSS background-position and background-image I can display all these icons: . I can even have them show up anywhere on the page!

Using CSS Image Sprites

The above image is one that I actually use on this site. You will see a lot of the images in this sprite by looking around on my page..

Wow! here are more images… but remember they are all from the same image. So instead of your visitors browsers requesting 22 images to display these 22 icons, your browser made a single request, saving you bandwidth and speeding up your site for visitors. , , , , , ,

What Are CSS Sprites

CSS sprites can majorly reduce the number of HTTP requests for images referenced by your sites html, javascript, and css files. Images are combined into a single larger image at specific X and Y points. Now you give an html element the background-image of the sprite, and specify the background-position of the image all in the CSS. You can learn how to create CSS Image Sprites in Adobe Photoshop.

A method of using a master image made up of smaller images that are used for presentation within a site, and displaying these images as needed by positioning them via the background-position property

CSS background-position

The css background-position declaration informs the clients browser where to position a background image. The property accepts three kinds of values: keywords, pixels and percentages, values that may be mixed. When you use only pixels and percentages, the first value denotes the left position, the second one the top position. Get the backgrond-position specs and practice some example positioning.

More CSS Sprites Resources

CSS Sprite Articles

Sliding Doors Meets CSS Sprites
A while back Douglas Bowman wowed Alistapart readers with his excellent article Sliding Doors of CSS, describing a new and revolutionary way to build a tabbed menu interface using CSS.

CSS Sprites: Image Slicing’s Kiss of Death
The natural tendency is to assume that a full double-sized image must be heavier than a similar set of sliced images, since the overall image area will usually be larger. All image formats have a certain amount of overhead though (which is why a 1px by 1px white GIF saves to around 50 bytes), and the more slices you have, the more quickly that overhead adds up. Plus, one master image requires only a single color table when using a GIF, but each slice would need its own. Preliminary tests suggest that all this indicates smaller total file sizes for CSS Sprites, or at the very least not appreciably larger sizes

CSS Sprite Image Tools

This tool allows you to automate the process of generating CSS sprites. Simply give it a ZIP file containing 2 or more images (GIF, PNG or JPG) and it will generate a sprite image and the corresponding CSS rules to target and display each component image.
Options

The tool has a number of options you can configure to modify characteristics of the generated sprite image and CSS to better match the specifics of your site set up. These options are detailed below:

CSS Sprite Generator
For the uninitiated, a CSS Sprite is a single image file which contains several graphics. Using CSS background positions it’s possible to display any one of the graphics. By using a sprite you save on multiple http requests which helps speed up the rendering of your page.

The tool allows you to upload a zip of images which the script then concatenates into one image to be used as a CSS Sprite. The CSS offsets for each image are created and output and class-names for each image in the sprite can be generated from the filenames of each of the original images. In fact this approach is recommended.

CSS Background Image Sprites originally appeared on AskApache.com

Getting flash to show up in front of content

AskApache — Sun, 07 Oct 2007 16:20:29 +0000

I used to have a problem of controlling flash elements on my sites.. specifically I wanted to be able to specify the stacking/zIndex order of the element. Sometimes I want flash to show up in front of or behind other content. My company does a ton of video/audio production for tv and radio spots and most of the time we use flash to make them available online. On one site we have 6 different flash flv movies that are all the same size and are in the same position on the page. But only 1 is displayed at a time based on what the user wants to watch. So the selected flash movie needs to have the highest stacking order/zIndex to be the only viewable movie.

The reason I choose to load all 6 files at a time is so that when a user clicks 1 of 6 buttons to select a video, it INSTANTLY is front and center.. literally milliseconds because all that is happening is moving the video in front of the others.

Controlling flash to show in foreground or background on command

Basically the “hover” buttons I’ve created using css, are placed under the flash animation clip. I can’t come up with a good solution. Any ideas??

The Solution is `wmode` and `css`

I used to have this problem all the time too! Very frustrating. I figured out that there is a parameter for embedding flash files that change the way the flash is displayed in the DOM.. After looking through a lot of macromedia flash documentation, I learned about flash’s wmode attribute.

wmode

The flash wmode attribute has three different values.

From the official flash documentation

wmode attribute/parameter
Values:

Window
Opaque
Transparent

The default value is Window if this attribute is omitted. Applies to object only.

Description:
(Optional) Lets you use the transparent Flash content, absolute positioning, and layering capabilities available in Internet Explorer 4.0.

Window plays the application in its own rectangular window on a web page. Window indicates that the Flash application has no interaction with HTML layers and is always the topmost item.

Opaque makes the application hide everything behind it on the page.

Transparent makes the background of the HTML page show through all the transparent portions of the application and can slow animation performance.

Opaque windowless and Transparent windowless both interact with HTML layers, letting layers above the SWF file block out the application. The difference between the two is that Transparent allows transparency so that HTML layers below the SWF file might show through if a section of the SWF file has transparency; opaque does not.

Using the wmode attribute/parameter

I like to use 1 of 2 awesome javascript scripts to insert flash into my page, which fixes the microsoft activex problem.

Basically to get your site working change:

Nice one askapache! Which browsers does this work in? If it’s all of them: you know how to fix a bug even the owners of Flash don’t. Sadly I expect that to just be IE7 for Windows. Very aggravating for the rest of us :)

This is a trick that I learned towards the end of 05′ for a site that I was developing. I’m obsessed with cross-browser functionality and I got the flash element to disappear behind other content by using the zIndex css attribute with javascript.

I had 5 elements to control, 5 divs that held various content, including flash video. By apsolutely positioning each of the 5 divs within 1 relative parent div I was able to manipulate the stacking order of the divs by applying a className.

.z6 {z-index:9119;}
.z0 {z-index:459;}
.z1 {z-index:449;}
.z2 {z-index:439;}
.z3 {z-index:429;}
.z4 {z-index:419;}

Applying CSS Classes with JavaScript

Using an easy javascript example from my best javascript code snippets 2007 article its incredibly easy to make this work. Add an event to each of the buttons that when clicked changes the className of the videos containing element to have the highest z-index.

I created an array of the the 6 video containers using a quick getElementsByTagName and applied the className to all of them at once using a simple foreach loop.

document.getElementById("video1div").className='z6';

wmode attribute/parameter
Value:
Window | Opaque | Transparent
 
Description:
(Optional) Lets you use the transparent Flash content, absolute positioning, and layering capabilities available in Internet Explorer 4.0. This attribute/parameter works only in Windows with the Flash Player ActiveX control.
 
Window plays the application in its own rectangular window on a web page. [B]Window indicates that the Flash application has no interaction with HTML layers and is always the topmost item.
 
Opaque makes the application hide everything behind it on the page.
 
Transparent makes the background of the HTML page show through all the transparent portions of the application and can slow animation performance.
 
Opaque windowless and Transparent windowless both interact with HTML layers, letting layers above the SWF file block out the application. The difference between the two is that Transparent allows transparency so that HTML layers below the SWF file might show through if a section of the SWF file has transparency; opaque does not.
 
[B]The default value is Window if this attribute is omitted. Applies to object only.

Flash OBJECT and EMBED tag attributes

This document lists the required and optional attributes of the object and embed tags used to publish Adobe Flash movies.

For specific usage information for these attributes, refer to sections of the Using Flash manual devoted to using object and embed tags (exact headings vary among Flash versions). Information is also available at Adobe Flash OBJECT and EMBED tag syntax.

Required attributes

The following attributes are required within the object and/or embed tags when adding a Flash movie to an HTML page:

Both `object` and `embed`

width: Specifies the width of the movie in either pixels or percentage of browser window.
height: Specifies the height of the movie in either pixels or percentage of browser window.

`object` only

classid: Identifies the ActiveX control for the browser. See example code for value
codebase: Identifies the location of the Flash Player ActiveX control so that the browser can automatically download it if it is not already installed.
movie (param): Specifies the location (URL) of the movie to be loaded.

`embed` tag only:

src: Specifies the location (URL) of the movie to be loaded.
pluginspage: Identifies the location of the Flash Player plug-in so that the user can download it if it is not already installed. EMBED only.

Optional attributes and possible values

The following attributes are optional when defining the object and/or embed tags. For object, all attributes are defined in param tags unless otherwise specified:

id

Movie Identifier. Identifies the Flash movie to the host environment (a web browser, for example) so that it can be referenced using a scripting language. (attribute for object, object only)

name

Movie name. Identifies the Flash movie to the host environment (a web browser, typically) so that it can be referenced using a scripting language such as JavaScript or VBScript. (embed only)

swliveconnect

( true / false ) Specifies whether the browser should start Java when loading the Flash Player for the first time. The default value is false if this attribute is omitted. If you use JavaScript and Flash on the same page, Java must be running for the FSCommand to work.

play

Specifies whether the movie begins playing immediately on loading in the browser. The default value is true if this attribute is omitted. ( true / false )

loop

( true / false ) Specifies whether the movie repeats indefinitely or stops when it reaches the last frame. The default value is true if this attribute is omitted.

menu

true displays the full menu, allowing the user a variety of options to enhance or control playback. false displays a menu that contains only the Settings option and the About Flash option.

quality

Possible values: low, high, autolow, autohigh, best.

low: favors playback speed over appearance and never uses anti-aliasing.
autolow: emphasizes speed at first but improves appearance whenever possible. Playback begins with anti-aliasing turned off. If the Flash Player detects that the processor can handle it, anti-aliasing is turned on.
autohigh: emphasizes playback speed and appearance equally at first but sacrifices appearance for playback speed if necessary. Playback begins with anti-aliasing turned on. If the actual frame rate drops below the specified frame rate, anti-aliasing is turned off to improve playback speed. Use this setting to emulate the View > Antialias setting in Flash.
medium: applies some anti-aliasing and does not smooth bitmaps. It produces a better quality than the Low setting, but lower quality than the High setting.
high: favors appearance over playback speed and always applies anti-aliasing. If the movie does not contain animation, bitmaps are smoothed; if the movie has animation, bitmaps are not smoothed.
best: provides the best display quality and does not consider playback speed. All output is anti-aliased and all bitmaps are smoothed.

scale

Possible values: showall, noborder, exactfit.

default: (Show all) makes the entire movie visible in the specified area without distortion, while maintaining the original aspect ratio of the movie. Borders may appear on two sides of the movie.
noorder: scales the movie to fill the specified area, without distortion but possibly with some cropping, while maintaining the original aspect ratio of the movie.
exactfit: makes the entire movie visible in the specified area without trying to preserve the original aspect ratio. Distortion may occur.

align

Possible values: l, t, r, b. Default centers the movie in the browser window and crops edges if the browser window is smaller than the movie.

l: (left)
r: (right)
t: (top)
b: (bottom) align the movie along the corresponding edge of the browser window and crop the remaining three sides as needed.

salign

Possible values: l, t, r, b, tl, tr, bl, br.

l, r, t, and b align the movie along the left, right, top or bottom edge, respectively, of the browser window and crop the remaining three sides as needed.
tl and tr align the movie to the top left and top right corner, respectively, of the browser window and crop the bottom and remaining right or left side as needed.
bl and br align the movie to the bottom left and bottom right corner, respectively, of the browser window and crop the top and remaining right or left side as needed.

wmode

Possible values: window, opaque, transparent. Sets the Window Mode property of the Flash movie for transparency, layering, and positioning in the browser.

window: movie plays in its own rectangular window on a web page.
opaque: the movie hides everything on the page behind it.
transparent: the background of the HTML page shows through all transparent portions of the movie, this may slow animation performance.

bgcolor

[ hexadecimal RGB value] in the format #RRGGBB . Specifies the background color of the movie. Use this attribute to override the background color setting specified in the Flash file. This attribute does not affect the background color of the HTML page.

base

. or [base directory] or [URL]. Specifies the base directory or URL used to resolve all relative path statements in the Flash Player movie. This attribute is helpful when your Flash Player movies are kept in a different directory from your other files.

flashvars

Possible values: variable to pass to Flash Player. Requires Macromedia Flash Player 6 or later. Used to send root level variables to the movie. The format of the string is a set of name=value combinations separated by ‘&’. Browsers will support string sizes of up to 64KB (65535 bytes) in length. For more information on FlashVars, please refer to Using FlashVars to pass variables to a SWF.

Flash “scale” Attribute

noBorder

The Stage.width and Stage.height values will remain constant and will reflect the values set in the Document Properties dialog box. The “noBorder” setting means that the SWF will be scaled, maintaining the original aspect ratio, but there may be some cropping. The Update Dimensions button is there to keep us honest. The values in the width and height boxes are not automatically updated when the player window is resized, so you must click the button to update the displayed values of Stage.width and Stage.height. If you have resized the player window in “noScale” mode before switching to this mode, click the Update Dimensions button to see the width and height revert to the values defined in the Document Properties dialog box.

exactFit

The Stage.width and Stage.height values will remain constant and will reflect the values set in the Document Properties dialog box. The “exactFit” setting means that the Flash content will be scaled, without maintaining the original aspect ratio. All of the Flash content will be visible, but some distortion may occur. The Update Dimensions button is there to keep us honest. The values in the width and height boxes are not automatically updated when the player window is resized, so you must click the button to update the displayed values of Stage.width and Stage.height. If you have resized the player window in “noScale” mode before switching to this mode, click the Update Dimensions button to see the width and height revert to the values defined in the Document Properties dialog box.

noScale

The Stage.width and Stage.height values will change as you resize the player window. The “noScale” setting means that the SWF will not be scaled when the size of the player window changes. Resize the player window and you’ll see what I mean. There’s no need for an Update button with this setting because this is the only setting for which the onResize message is sent when the player window size changes. In other words, we can add code to the SWF to update the width and height whenever the player window size changes

showAll

The Stage.width and Stage.height values will remain constant and will reflect the values set in the Document Properties dialog box. The “showAll” setting means that the all Flash content will be visible and the original aspect ratio will be preserved, but borders may appear on two sides of the application. The Update Dimensions button is there to keep us honest. The values in the width and height boxes are not automatically updated when the player window is resized, so you must click the button to update the displayed values of Stage.width and Stage.height. If you have resized the player window in “noScale” mode before switching to this mode, click the Update Dimensions button to see the width and height revert to the values defined in the Document Properties dialog box.

Getting flash to show up in front of content originally appeared on AskApache.com

PullQuotes using CSS

AskApache — Sat, 09 Jun 2007 14:06:58 +0000

I looked at a lot of different ways to display quotes and pullquotes and even though the javascript solutions are very nice, esp. the 456bereastreet.com solution, I decided to just use CSS (Keep It Simple Stupid).

Heres what it looks like:

I discovered the “q” tag and tried it out, once it validated as

Yes thats XHTML 1.0 Strict. I also checked it with Firefox 1.0*-2.0* and IE 6.0.2*-the new IE 7.0. It also renders perfectly in Opera, Mozilla, and Netscape. Once I learned all that I was completely sold!

Example XHTML:

I can go to bat for them and make it a win-win-win


"I put a renewal plan together last year for one of my clients
our clients are the ones who really reap the greatest benefits!
"I have to be sure that I can get all of the ..sometimes I can go to bat for them and make it a win-win-win etween!"

Example CSS:

q {float:left; width:18em; display:block; margin:0.25em 0.75em 0.25em 1em; padding:0.5em; border:3px double #CCC; border-width:3px 0; color:#333; background-color:#f0f0f0; text-align:center; font:italic 1.3em/1.3 Georgia;} q.q2 {float:left; width:9em; display:block; margin:0.25em 0.75em 0.25em 1em; padding:0.5em; border:3px double #CCC; border-width:3px 0; color:#333; background-color:#f0f0f0; text-align:center; font:italic 1.3em/1.3 Georgia;}

Speedier Sites use CSS Sprites

AskApache — Fri, 04 May 2007 21:05:16 +0000

An Image Sprite is simply multiple images combined into one image. Using the background-position in CSS you can display a specific image from the image sprite.

Sprites reduce the number of files that are requested and downloaded by site visitors, resulting in noticeable decreases in Page-Loading times, Bandwidth usage, and Server loads.

1×1 Transparent Gif

To make everything standards compliants I use a 1x1pixel transparent gif as the src for an img tag, then by specifying a class for the img I can make the background-image and size of the img anything.

Now you can use and it will display an image. Without using a transparent gif (src=”" or src=”#”) you get weird results in multiple browsers.

Finding background-position Values

I use Adobe Photoshop to create a master background-layer with a solid bright color, then I change the opacity to 90%.

I find the height and width of an image within the sprite then I measure the distance from the top of the sprite to the top of the image with the sprite.

XHTML Example Markup

PICS class

LOGOS class

UL tag usage


CSS.
Apache.

CSS.
Apache.

CSS.
Apache.

CSS.
Apache.

CSS.
Apache.

CSS.
Apache.

CSS.
Apache.

CSS.
Apache.

CSS.
Apache.

CSS.
Apache.

CSS.
Apache.

A tag usage

CSS Example

 .PICS {display:block; background-color:#FFF; background-image:url(http://static.askapache.com/i/sprite-pictures.jpg); background-repeat:no-repeat; overflow:hidden;}
.pic1 {width:147px; height:144px; line-height:144px; background-position:0 0;}
.pic2 {width:172px; height:123px; line-height:123px; background-position:0 -145px;}
.pic3 {width:169px; height:152px; line-height:152px; background-position:0 -270px;}
.pic4 {width:160px; height:145px; line-height:145px; background-position:0 -423px;}
 
.LOGOS {display:block; background-color:#FFF; background-image:url(http://static.askapache.com/i/sprite.png); background-repeat:no-repeat; overflow:hidden;}
.logo1 {width:81px; height:72px; line-height:72px; background-position:0 -70px;}
.logo2 {width:194px; height:64px; line-height:64px; background-position:0 -185px;}
.logo3 {width:150px; height:67px; line-height:67px; background-position:0 -250px;}
.logo4 {width:174px; height:52px; line-height:52px; background-position:0 -424px;}
.logo5 {width:98px; height:41px; line-height:41px; background-position:0 -509px;}
 
.ICOS {background-color:transparent; background-image:url(http://static.askapache.com/i/sprite-icons.png) !important; background-repeat:no-repeat; padding:1px 0 2px 27px;}
ul.ICOS {background-image:none !important;}
ul.ICOS li {background-color:transparent; background-image:url(http://static.askapache.com/i/sprite-icons.png) !important; background-repeat:no-repeat; padding:0 0 0 27px;}
.ico1 li {background-position:0 0;}
.ico2 li {background-position:0 -70px;}
.ico3 li {background-position:0 -140px;}
.ico4 li {background-position:0 -210px;}
.ico5 li {background-position:0 -280px;}
.ico6 li {background-position:0 -350px;}
.ico7 li {background-position:0 -420px;}
.ico8 li {background-position:0 -490px;}
.ico9 li {background-position:0 -560px;}
.ico10 li {background-position:0 -630px;}
 
a.ico1,a.ico1:link,a.ico1:visited,a.ico1:active,a.ico1:hover {background-position:0 0;}
a.ico2,a.ico2:link,a.ico2:visited,a.ico2:active,a.ico2:hover {background-position:0 -70px;}
a.ico3,a.ico3:link,a.ico3:visited,a.ico3:active,a.ico3:hover {background-position:0 -140px;}
a.ico4,a.ico4:link,a.ico4:visited,a.ico4:active,a.ico4:hover {background-position:0 -210px;}
a.ico5,a.ico5:link,a.ico5:visited,a.ico5:active,a.ico5:hover {background-position:0 -280px;}
a.ico6,a.ico6:link,a.ico6:visited,a.ico6:active,a.ico6:hover {background-position:0 -350px;}
a.ico7,a.ico7:link,a.ico7:visited,a.ico7:active,a.ico7:hover {background-position:0 -420px;}
a.ico8,a.ico8:link,a.ico8:visited,a.ico8:active,a.ico8:hover {background-position:0 -490px;}
a.ico9,a.ico9:link,a.ico9:visited,a.ico9:active,a.ico9:hover {background-position:0 -560px;}
a.ico10,a.ico10:link,a.ico10:visited,a.ico10:active,a.ico10:hover {background-position:0 -630px;}
a.ico11,a.ico11:link,a.ico11:visited,a.ico11:active,a.ico11:hover {background-position:0 -700px;}
a.ico12,a.ico12:link,a.ico12:visited,a.ico12:active,a.ico12:hover {background-position:0 -770px;}
a.ico13,a.ico13:link,a.ico13:visited,a.ico13:active,a.ico13:hover {background-position:0 -840px;}
a.ico14,a.ico14:link,a.ico14:visited,a.ico14:active,a.ico14:hover {background-position:0 -910px;}
a.ico15,a.ico15:link,a.ico15:visited,a.ico15:active,a.ico15:hover {background-position:0 -980px;}
a.ico16,a.ico16:link,a.ico16:visited,a.ico16:active,a.ico16:hover {background-position:0 -1050px;}
a.ico17,a.ico17:link,a.ico17:visited,a.ico17:active,a.ico17:hover {background-position:0 -1120px;}
a.ico18,a.ico18:link,a.ico18:visited,a.ico18:active,a.ico18:hover {background-position:0 -1190px;}
a.ico19,a.ico19:link,a.ico19:visited,a.ico19:active,a.ico19:hover {background-position:0 -1260px;}
a.ico20,a.ico20:link,a.ico20:visited,a.ico20:active,a.ico20:hover {background-position:0 -1330px;}
a.ico21,a.ico21:link,a.ico21:visited,a.ico21:active,a.ico21:hover {background-position:0 -1400px;}
a.ico22,a.ico22:link,a.ico22:visited,a.ico22:active,a.ico22:hover {background-position:0 -1470px;}
a.ico23,a.ico23:link,a.ico23:visited,a.ico23:active,a.ico23:hover {background-position:0 -1540px;}

Cross-Browser/Standards Friendly

This technique works in all major browsers, including Firefox, Internet Explorer, Opera, Safari, and Mozilla.

Hack-free CSS

Works in all browsers, no hacks or funny stuff needed!

3 Sprite Images

Important Speed Tips

To truly speed up your site, you will want to implement a server-side caching technique. Or you can read more about caching and web cache.
Apache Caching Guide

Speedier Sites use CSS Sprites originally appeared on AskApache.com

12 Lessons for Those Afraid of CSS

AskApache — Thu, 09 Nov 2006 12:24:14 +0000

full article: alistapart.com

Everything you know is wrong sort of
It’s not going to look exactly the same everywhere unless you’re willing to face some grief and possibly not even then
You will be forced to choose between the ideal and the practicable
(with thanks to Antoine de Saint-ExupÃ©ry): Perfection is not when there’s nothing to add, but when there’s nothing to take away
Some sites are steaming heaps of edge cases
Longer lead times are inevitable
Coherent and sensible source order is the best of Good Things
Descendant selectors are the beginning and end of genuinely powerful CSS rules
In the real world, stylesheet hacks will get your project across the finish line
Working around rendering bugs is like playing Whack-a-Mole
When you’re drowning in CSS layout problems, make sure of the width and height of the water, float without putting up a struggle, and get clear of the problems
Background images will make the difference between the plain and the tastefully embellished

CSS HACKS

12 Lessons for Those Afraid of CSS originally appeared on AskApache.com