WordPress authentication is cookie based which means that after successfull login the cookies identifying logged in user are created. Normally these cookies are different for different installations. How to make them identical for all shared installations will be explained later within this article. If you look into wp-config.php you’ll find four defines for security keys:

• AUTH_KEY
• SECURE_AUTH_KEY
• LOGGED_IN_KEY
• NONCE_KEY

Above keys are being called Authentication Unique Keys.

Important: they have to be identical for all of our shared blogs.

There is one more key and two salts used in the process of authentication:

• SECRET_KEY
• AUTH_SALT
• LOGGED_IN_SALT

Values for these key are being generated internally by WordPress unless you define them in wp-config.php.

Important: these values should be exactly the same for all our shared blogs.

Salts are MD5 values and you can generate them here.

Now it’s time to make our cookies work. All our shared blogs should reside within the same domain (either in subdomains or subdirectories). For this we will need eight additional defines in our wp-config.php:

• COOKIE_DOMAIN
• COOKIEPATH
• USER_COOKIE
• PASS_COOKIE
• AUTH_COOKIE
• SECURE_AUTH_COOKIE
• LOGGED_IN_COOKIE
• TEST_COOKIE

First two defines should be:

define('COOKIE_DOMAIN', '.yourdomain.com');
define('COOKIEPATH', '/');

Please note the dot ‘.’ in front of domain name. It is necessary for the cookies being accessible across all subdomains.

Next six values are names of the cookies being part of the process. I have generated these names using GRC “Perfect Passwords” Generator.

Below – wp-config.php for one of our shared installations:

<?php
/**
 * The base configurations of the WordPress.
 *
 * This file has the following configurations: MySQL settings, Table Prefix,
 * Secret Keys, WordPress Language, and ABSPATH. You can find more information by
 * visiting {@link http://codex.WordPress.org/Editing_wp-config.php Editing
 * wp-config.php} Codex page. You can get the MySQL settings from your web host.
 *
 * This file is used by the wp-config.php creation script during the
 * installation. You don't have to use the web site, you can just copy this file
 * to "wp-config.php" and fill in the values.
 *
 * @package WordPress
 */

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'abc');

/** MySQL database username */
define('DB_USER', 'abc_admin');

/** MySQL database password */
define('DB_PASSWORD', 'password');

/** MySQL hostname */
define('DB_HOST', 'hostname');

/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');

/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');

/**#@+
 * 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
 */
define('AUTH_KEY', 'LjeTKG`U=gD$-2>{2|utk-RZ0~V]}/aDf>-2(}{a5pN7Tp)D0(*~*_jB[9:)%5ON');
define('SECURE_AUTH_KEY', '-%F+bE+?qSCE1[z1Rxi:~OC+C =6-l-+H)G:23kO-1[ppj<^ZrW}k!?E|nzOssG!');
define('LOGGED_IN_KEY', '@(-r&4U%gpwZoRvtW~G t9yIx0/0;x1o>eep^D~vsW}T@O=,W*4DbNodM{g@eQ[}');
define('NONCE_KEY', '0M%7po9BecM#u:[clr(-lmWvhM$I7MFBf+7?+KHd3}80yOqGF]BD=@|HQn+!eH;a');

define('SECRET_KEY', 'V&epQ8<j8=^Tpm*EUvw$|?t>k6zD.k?<,#0FtnxG$b!_[`-;[a>A~~QXds_xj:Q`');
define('AUTH_SALT', '11da4396f662c7a74c4a964e16cfb51e');
define('LOGGED_IN_SALT', '56d1e362e4d004b2ee19da2ca380b88c');

define('COOKIE_DOMAIN', '.yourdomain.com');
define('COOKIEPATH', '/');

define('USER_COOKIE', '3EC67573364C3D9A4ED82E1977D1407B');
define('PASS_COOKIE', '3157A4712DDD8777B7A86C64EC3547E6');
define('AUTH_COOKIE', 'DBC67C58653083F5313548C1593BE3FC');
define('SECURE_AUTH_COOKIE', '9330AF9D79B53117340DFC09D0C07064');
define('LOGGED_IN_COOKIE', '78876E53AC0622107F0B251492E345F2');
define('TEST_COOKIE', '84F4BA2A69803FB785FE0B9D675C9E86');
/**#@-*/

/**
 * 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  = 'b_';

/**
 * WordPress Localized Language, defaults to English.
 *
 * 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.
 */
define ('WPLANG', '');

define('CUSTOM_USER_TABLE', 'a_users');
define('CUSTOM_USER_META_TABLE', 'a_usermeta');
define('CUSTOM_CAPABILITIES_PREFIX', 'a_');

define('OTHER_BLOGS_PREFIXES, 'a_,c_');

/* That's all, stop editing! Happy blogging. */

/** WordPress absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
	define('ABSPATH', dirname(__FILE__) . '/');

/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');

Important: group of defines in lines 45 – 62 has to be identical in wp-config.php of all installations.

All done. Login to one of the shared blogs and try to access another one. You’ll see that you’re already logged in!

Justin, in his article stated that the following two lines in wp-config.php of the blog using prefix_users and prefix_usersmeta from another blog, will be enough:

define('CUSTOM_USER_TABLE', 'prefix_users');
define('CUSTOM_USER_META_TABLE', 'prefix_usermeta');

After adding these two defines to wp-config.php in the root of second blog I ran the installation. Everything went smoothly but when I tried to access Dashboard of second blog (login was successful) I got the message: “You do not have sufficient permissions to access this page.”. In WordPress terminology permission means capability. Obviously, neither administrator from first blog nor administrator from second blog had proper capabilities to run second blog’s Dashboard.

I did some digging into this problem. As a result I found this link in WordPress Support Forum: WordPress 2.5 Share users table. To make this long story shorter I’ve put a complete solution below:

COMPLETE SOLUTION:

In this example we will use two WordPress blogs:

• A
• B

Both will use the same database “ab“. The table prefixes are:

• a_
• b_

In wp-config.php of blog B we will add four defines:

define('CUSTOM_USER_TABLE', 'a_users');
define('CUSTOM_USER_META_TABLE', 'a_usermeta');
define('CUSTOM_CAPABILITIES_PREFIX', 'a_');

define('OTHER_BLOGS_PREFIXES','a_');

just after line:

define ('WPLANG', '');

Now we need to modify /wp-includes/capabilities.php in function _init_caps in blog B. Line:

$this->cap_key = $wpdb->prefix . 'capabilities';

should be replaced by:

      if (defined ('CUSTOM_CAPABILITIES_PREFIX')) {
            $this->cap_key = CUSTOM_CAPABILITIES_PREFIX . 'capabilities';
      }
      else {
            $this->cap_key = $wpdb->prefix . 'capabilities';
      }

In function update_user_level_from_caps after line:

update_usermeta( $this->ID, $wpdb->prefix.'user_level', $this->user_level );

add:

if (defined ('OTHER_BLOGS_PREFIXES')) {
        $a = split( ",", OTHER_BLOGS_PREFIXES );
        foreach ($a as $value) {
                update_usermeta( $this->ID, trim($value).'user_level', $this->user_level );
        }
        unset( $value );
}

That’s all. Now both blogs share the users tables of blog A.

My next article Login once to access multiple WordPress installations will show how to login into any blog which shares user tables and be logged in into all of them.

highslide-with-html.packed.js which comes as part of Highslide4WP, being a subset of highslide-full.packed.js, has limited capabilities. We will fix it preserving our original plugin’s functionality.

Download latest version of highslide.zip. Unpack it into folder of your choice. Rename highslide-full.packed.js to highslide-with-html.packed.js. Replace highslide-with-html.packed.js of Highslide4WP plugin with the file you just renamed. In next step we will modify /wp-content/plugins/highslide4wp/highslide/highslide.css.

In highslide.css find these lines:

.highslide-wrapper .highslide-header ul {
	margin:0;
	padding:0;
	text-align:right;
}
.highslide-wrapper .highslide-header ul li {
	display:inline;
	padding-left:1em;
}

and replace them with:

.highslide-wrapper .highslide-header ul {
	margin:0;
	padding:0;
	text-align:left;
}
.highslide-wrapper .highslide-header ul li {
	display:inline;
	padding-right:1em;
}

Now find the last occurence of:

.highslide-resize {
	cursor:nw-resize;
}

and copy the following immediately after:

/* added by Frank */
#highslide-fancy-title {
  background-color: silver;
  color: white;
  padding: 10px 10px 10px 10px;
  text-align: left;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 15px;
}
.highslide-container div {
  font-family: Tahoma, Verdana, Helvetica;
  font-size: 10pt;
}
.highslide-wrapper .highslide-header ul {
  margin: 0;
  padding: 0;
  text-align: right;
  height: 40px;
  list-style-type: none;
}
.highslide-wrapper .highslide-header ul li {
  display: inline;
  padding-left: 1em;
}
.highslide-wrapper .highslide-header ul li.highslide-close {
  display: block;
  width:30px;
  height:30px;
  margin: 0px 0px 0 0px;
  padding: 0;
  float:left;
}
.highslide-wrapper .highslide-header ul li.highslide-close a {
  display: block;
  background: url(graphics/close.png) no-repeat;
  margin: 0 30px 0 5px;
  width:30px;
  height:30px;
}
.highslide-close span {
  display: none;
}
.highslide-wrapper .highslide-header ul li.highslide-move {
  display: block;
  cursor: move;
  width:30px;
  height:30px;
  margin: 0px 0px 0 0;
  padding: 0;
  float: left;
}
.highslide-wrapper .highslide-header ul li.highslide-move a {
  display: block;
  background: url(graphics/move.png)
  no-repeat;
  margin: 0 0px 0 0px;
  width:30px;
  height:30px;
}
.highslide-move span {
  display: none;
}
.highslide-wrapper .highslide-footer {
  height: 11px;
}
.highslide-wrapper .highslide-footer .highslide-resize {
  float: right;
  margin-top: 4px;
  height: 11px;
  width: 11px;
  background: url(graphics/resize.gif);
}
.highslide-wrapper .highslide-body {
}
.highslide-move {
  cursor: move;
}
.highslide-resize {
  cursor: nw-resize;
}

/* Olivers IE fix */
.highslide-wrapper {
  font-size:14px;
  line-height:16px;
}
.highslide-wrapper .highslide-html-content {
  padding:1px;
}
/* end of Frank's addition /*

Neither Highslide JS nor Highslide4WP provide Move button (move.png). Copy displayed image and upload it into /wp-content/plugins/highslide4wp/highslide/graphics/ of your site.

All done! Enjoy it.

First of all download, install, and activate HighSlide4WP plugin. There is no word in its description about html popups but when you look into contents of this plugin, you’ll find that it uses highslide-with-html.packed.js file. Bingo! Our framework is ready. We have not only thumbnails viewer but html popups as well. Below are two examples:

Thumbnail Viewer

HTML Popup

CD Cover CD Cover

To see HighSlide popup window click here. Full content of help2.php: <div> <div id="highslide-fancy-title">My Popup Implementation</div> <p style="text-align: justify;"> I've created a new folder /wp-content/help to store popup files (I use .php files). The file you are reading now is /wp-content/help/help2.php. Below is code of example 2: </p> <blockquote> <a onclick="return hs.htmlExpand(this, { objectType: 'ajax', align: 'center' } )" href="/wp-content/help/help2.php">here</a> </blockquote> <p>It's easy, isn't it?</p> </div>

Explanation of Thumbnail Viewer example is beyond scope of this article (refer to Highslide4WP documentation). Implementation of second example is documented in the popup itself.

That’s all, folks.

After following instructions above you’ve probably noticed that you don’t have all features of Highslide JS available. How to get it all will be explained in HTML popups in Highslide4WP – 2.