Latest TweetsWordPress and the Blank Target Vulnerability (aka rel noopener + noreferrer): perishablepress.com/wordpress-… #WordPress #security #html
Perishable Press

Working with Multiple Themes Outside of the WordPress Installation Directory

As you may observe, the WordPress installation that powers Perishable Press is located in a subdirectory named press. This configuration was intentional, as I wanted to have the option to easily install and maintain multiple versions of WordPress in variously named subdirectories. As much as I enjoy this flexibility, many would argue the SEO-related benefits of installing WordPress in your site’s root directory, or at least making it appear that way by using WordPress’ easily customizable “Blog Address” options setting.

WordPress installed in root directory

For example, say you have WordPress installed in a subdirectory called “gibbonz”, but you want your blog’s home page to exist at http://your-domain.tld/ and not http://your-domain.tld/gibbonz, as would be the case by default. To make this happen, you have several choices, including this method, which I summarize here, assuming the “gibbonz” scenario outlined in the preceding discussion:

  1. In the WordPress Settings panel, leave the “WordPress address” unchanged (i.e., http://your-domain.tld/gibbonz) and set the “Blog address” to your site root (i.e., http://your-domain.tld).
  2. Copy the index.php and htaccess files from your WordPress (gibbonz) directory into the root directory.
  3. Edit the index.php file to reflect the location of your WordPress installation by changing the line “require('./wp-blog-header.php');” to “require('./gibbonz/wp-blog-header.php');
  4. In the WP Admin area, ensure that your permalink structure does not include the gibbonz subdirectory. You will need to ensure that your htaccess rules are updated with the correct permalink directives.

Upon implementation, your blog will be served as if it were installed in the root directory. The subdirectory will not be shown in any permalink URL, nor will it be referred to anywhere else in the site. Thus, if you aren’t planning on using the subdirectory to serve unique content, this method is all you need to ensure that plugins, scripts, and themes function properly in the root URL. For sites with multiple themes (such as this one), users will experience seamless theme presentation throughout the site, including the site root.

WordPress installed in subdirectory

On the other hand, for bloggers with subdirectory installations of WordPress that wish to continue using the subdirectory as a unique destination, the previous method of displaying your blog from the site root is not an option. Let’s use this site as an example. The site root is located at https://perishablepress.com/ and WordPress is installed at https://perishablepress.com/press/. I use this to my advantage by serving uniquely purposed content on each of these different pages. For the current theme, the root page features the latest article, while the subdirectory page is an archive view of the first 11 posts. As one who maintains multiple WordPress themes, I find this configuration to provide maximum flexibility.

Along with this flexibility, however, comes an important caveat: maintaining your WordPress-subdirectory as a unique, web-accessible destination means that sites with multiple themes will need to implement their own root-page theme synchronization technique. In other words, with your multiple-theme blog in a web-accessible subdirectory, you need to code your root page in such a way as to ensure seamless theme presentation.

Real Life Example

[ Author Comment Links ] For example, say Fonzi wants to use your happenin’ “Jukebox” theme. He clicks the link, skins the site, and begins to surf. During his travels through your site, Fonzi inevitably finds himself navigating to your home page (you know, the one that serves WordPress-generated content even though WordPress is installed in a subdirectory). “Uh-oh,” now the Fonz is like, totally confused because your home page is coded to display your site’s default theme instead of the cool Jukebox theme that Fonzi wants. Fonzi sees the Jukebox theme everywhere on your site except the home page, because it hasn’t yet been configured to accommodate user-defined themes.

The easiest solution in this case would be to code your root page in such a way as to check the user’s theme preference and then deliver the correct version of index.php accordingly. To do this, you don’t need to include an entire copy of each available theme (e.g., header, index, sidebar, footer) for each corresponding if statement, but rather call each theme’s index.php file directly, using PHP’s include_once(); function.

If that all doesn’t make sense now, don’t worry — it will after the next few examples, where I illustrate the concept by sharing the root-page theme-switching code used here at Perishable Press.

When placed in the web-accessible root (home page) for Perishable Press, the following PHP code delivers the appropriate index.php file according to the active theme selected by the current user (tested in WordPress 2.5+):

// display user-defined themes outside of WP directory
<?php require_once("./press/wp-blog-header.php"); 
if (!empty($_COOKIE["wptheme".COOKIEHASH])) { 
	$press_theme = $_COOKIE["wptheme".COOKIEHASH]; 
} elseif (empty($_COOKIE["wptheme".COOKIEHASH])) { 
	$press_theme = get_current_theme(); 
}
if     ( $press_theme == "Apathy"      ): include_once( "./press/wp-content/themes/apathy/index.php"      );
elseif ( $press_theme == "Bananaz"     ): include_once( "./press/wp-content/themes/bananaz/index.php"     );
elseif ( $press_theme == "Casket"      ): include_once( "./press/wp-content/themes/casket/index.php"      );
elseif ( $press_theme == "DOS_FX"      ): include_once( "./press/wp-content/themes/dosfx/index.php"       );
elseif ( $press_theme == "Entropy"     ): include_once( "./press/wp-content/themes/entropy/index.php"     );
elseif ( $press_theme == "Finished"    ): include_once( "./press/wp-content/themes/finished/index.php"    );
elseif ( $press_theme == "Garbage"     ): include_once( "./press/wp-content/themes/garbage/index.php"     );
elseif ( $press_theme == "Headline"    ): include_once( "./press/wp-content/themes/headline/index.php"    );
elseif ( $press_theme == "Information" ): include_once( "./press/wp-content/themes/information/index.php" );
elseif ( $press_theme == "Jupiter"     ): include_once( "./press/wp-content/themes/jupiter/index.php"     );
elseif ( $press_theme == "Killer"      ): include_once( "./press/wp-content/themes/killer/index.php"      );
elseif ( $press_theme == "Lithium"     ): include_once( "./press/wp-content/themes/lithium/index.php"     );
elseif ( $press_theme == "minimalist"  ): include_once( "./press/wp-content/themes/minimalist/index.php"  );
elseif ( $press_theme == "Naked"       ): include_once( "./press/wp-content/themes/naked/index.php"       );
elseif ( $press_theme == "Optimized"   ): include_once( "./press/wp-content/themes/optimized/index.php"   );
elseif ( $press_theme == "Perishable"  ): include_once( "./press/wp-content/themes/perishable/index.php"  );
else                                    : include_once( "./press/wp-content/themes/default/index.php"     );
endif; ?>

Thus, if a user prefers my Lithium theme, and decides to “skin” the site with it, the previous code will ensure that the root URL — the site’s home page ” stays consistent and serves the correct theme. To determine each user’s theme preference, this method checks for a cookie set by the free Theme Switcha plugin, which is a great solution for sites providing multiple themes. If a cookie is present, the PHP variable $press_theme assumes its value, which is the name of the user’s preferred theme. If no cookie is present, the script sets the $press_theme variable to the site’s current default theme, which is determined via the inherent WordPress function, get_current_theme();.

For example, to echo your blog’s current default theme from outside of the WordPress core directory (tested on WordPress version 2.5+):

<?php require_once("./press/wp-blog-header.php"); ?>
<?php $current_theme = get_current_theme(); ?>
<h1><?php echo $current_theme; ?></h1>

In either case, once the theme variable has been set to the proper theme, the remainder of the script simply tests the value against each of the site’s currently available themes. When a match is found, the script includes the correct index.php file for the chosen theme. If no theme preference is determined, the script resorts to the site’s default theme.

The beauty of this method is its simplicity. Just copy and paste the script into your site’s root index.php file and enjoy the results1. Of course, you will also need to edit the require path in the first line to reflect the correct location of the wp-blog-header.php in your subdirectory-installation of WordPress. You will also want to change the theme names in the first column, and the theme directories in the second column, such that they match your own configuration. As always, “test, test, test!”

While this method is extremely easy, it takes advantage of the flexibility inherent in segregated root and blog URLs. Let’s say you wanted to display the home.php file for several of your custom themes, maybe to spice up the layout or optimize for search engines or something. No problem. Using the code above, instead of including the index.php file for any selected themes, simply include your home.php file instead. You could use this strategy to include virtually any page for any given theme — single.php, archive.php, welcome.phpwhatevah!

Footnotes

1 Note that when using this method from a locally installed version of WordPress (i.e., the installation directory in somewhere within localhost), you will need to create and use cookies that are distinct from the default theme-switcher cookies. Doing this is easy. Open your theme-switcher.php and place the following immediately before the first instance of $redirect = get_settings('home'):

setcookie("indextheme" . COOKIEHASH,
	stripslashes($_GET["wptheme"]),
        $expire,
        '/'
);

Additionally, the main script will need to be modified to reflect the alternate cookie information:

<?php require_once("./press/wp-blog-header.php"); 
if (!empty($_COOKIE["indextheme".COOKIEHASH])) {
	$press_theme = $_COOKIE["indextheme".COOKIEHASH];
} elseif (empty($_COOKIE["indextheme".COOKIEHASH])) {
	$press_theme = get_current_theme();
} 
.
.
.
?>

As always, your feedback is appreciated in the comments below!

Jeff Starr
About the Author Jeff Starr = Web Developer. Book Author. Secretly Important.
Archives
12 responses
  1. Carla Pendergraft January 19, 2009 @ 12:27 pm

    I just wanted to thank you for this post. This is exactly what I was looking for to make sure I was doing the right thing when WordPress was installed in a separate folder, and I needed it to also cover the homepage. Your instructions were golden. Thanks again.

  2. Jeff Starr

    Thank you, Carla! Your generous feedback is much appreciated. I knew there was a reason I wrote this article! ;) Cheers!

  3. Hi Jeff,

    I was wondering if you could help me out or point me to the right direction. I am trying to make 2 sets of index.php files:

    But that points to 2 different themes, 1 iphone enhanced and the other web enhanced. If you had any pointers that would be great.

  4. I am trying to implement what you have here but in a slightly different way. I would like a second theme to automatically be applied for only a page and it’s subpages of my site using wordpress 2.7 +. I’ve head a difficult time finding a solution, but yours seems to be the closest. I just can’t seem to get it right.

  5. Jeff Starr

    @Jules: Have you checked out iWPhone? Looks like it would be a great place to start..

    @John: Have you looked into custom page templates? Seems like a great way to customize any page..

  6. Thanks Jeff for your response. Yes indeed I have tried it and was really not what I was looking for. I really am looking for a simple code to achieve what I mentioned above neglecting the iphone use.

    If you have any idea that would be super. Thank you.

  7. Jeff Starr

    @Jules: The closest thing I could find based on the information you provided is the iWPhone (as mentioned above) or WPtouch, which looks very nice, I might add. May even try it myself! ;)

  8. Hi Jeff, again big thanks for your reply. Try to forget the whole iphone plugin thing. if you know a code that can force the page to load a specific theme right from the index.php root that would be priceless to me.

    Thank you no matter what.

  9. OHHHH

    I am such an idiot.

    K will dig in there.

    Thanks so much!!!!

  10. Jeff Starr

    That’s exactly what I’m trying to tell you: these plugins are using code that enables them to “load a specific theme right from the index.php.” The functionality is the same, so chances are high that you would be able to find that perfect slice of code that you are looking for by digging into these various plugins/scripts. A little reverse engineering of either plugin should provide many clues. Sorry I don’t have any specific scripts handy, but if it were me and I needed the functionality you describe, the WPtouch plugin would be the first place I would start (after Googling direct, of course). I hope that helps!

  11. thanks for this wonderful article which as far as i’ve read now on the internet may be the best solution or part-solution to my problem where i have a number of users who should display their content with complete different layouts, tryin’ to avoid multiple wordpress installations, and might probably have to use the multi user wordpress tool though. the whole project runs under the umbrella of just one domain.

  12. Jeff, sorry bothering you, you can just ignore me. I have task like Jules had – I need separate files in webroot to load wordpress with different themes. Theme names can be simply hardcoded in code. Actually I’m looking a place to inject, and variable name to replace current theme, that wordpress has in DB. I thought as you have experience in this subject may be you could give me a tip. Thanks.

[ Comments are closed for this post ]