Inspect Element » php http://inspectelement.com Web Design & Development Blog Wed, 25 Jan 2012 09:55:34 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 How to Create a Theme Development Environment for a Live WordPress Site http://inspectelement.com/tutorials/create-a-wordpress-theme-development-environment/ http://inspectelement.com/tutorials/create-a-wordpress-theme-development-environment/#comments Mon, 11 Jan 2010 09:44:31 +0000 Tom Kenny http://inspectelement.com/?p=5872 Wordpress you'll notice that it isn't easy to create a development version without creating a separate installation. Of course, you can make changes directly on a live WordPress site but that isn't recommended for anything other than minor tweaks.]]> Any good website owner knows that they need to be constantly looking at ways to improve their site even through small little tweaks. If you’re using WordPress you’ll notice that it isn’t easy to create a development version without creating a separate installation. Of course, you can make changes directly on a live WordPress site but that isn’t recommended for anything other than minor tweaks.

With the help of an excellent plugin for WordPress called Theme switch and preview, this tutorial will allow you to easily switch between the live site and development versions using two different themes on the same installation of WordPress. We’ll do this by creating a bar at the top of the page which will clearly show you if you’re viewing the live theme (what everyone else sees) or the development theme with a link to switch between the two.

While there may well be a Worpdress plugin that does everything below, it’s much more rewarding and satisfying to create your own solution.

Step 1: Install Theme Switcher WordPress Plugin

First step is to install the aforementioned plugin, Theme switch and preview. You can access the configuration for Theme Switcher in the settings section of the WordPress admin sidebar on the left where you can also find a list of all the available themes.

Screenshot of the themes installed on Inspect Element as seen in Theme Switcher's settings.

By clicking any of the links above, you can switch between themes without activation allowing you to see what a different theme looks like without affecting what your visitors sees. They will still see the activated theme.

Step 2: Create a Copy of the Current Theme

This is as easy as just duplicating the theme folder in you WordPress theme directory. Make sure to change the name of the theme as it is what Theme Switcher relies on to distinguish between installed themes.

You can see from the screenshots above that Theme Switcher uses the ‘Theme Name’ but WordPress also picks up on this in the Themes section of the admin area so it’s a good practice to stick to with for any theme. Here I’ve added dev in brackets to use for my development theme.

Step 3: Add the Dev Bar to the Live Theme

One of the best ways to indicate what theme you’re viewing is to add a colour coded bar at the top of the page when logged in. We need to use a bit of PHP to determine if you’re logged in. Open up the header.php file in your live theme and paste in the following code directly below the <body> tag.

<?php if ( is_user_logged_in() ) : ?>

 	// Insert dev bar code here

<?php else : ?>

	// Nothing here

<?php endif; ?>

So that’s a simple bit of WordPress PHP to see if you’re logged in or not expressed as an if else statement. Of course you’ll want to include some HTML for the bar itself. We’re going to insert a div and a link to the dev version as well as a title.

<?php if ( is_user_logged_in() ) : ?>

	<div id="devbar" class="live">

		<p>Live Site</p>

		<a href="<?php pageURL(); ?>?theme=Inspect+Element+v3+%28dev%29">Switch to Dev</a>

	</div>

<?php else : ?>

	// Nothing here

<?php endif; ?>

For the link to the dev theme, you need to go back to the settings page for the Theme Switcher plugin and copy the link your development theme. This is the link you’ll use in your live dev bar. There’s one small amendment to make here. Replace everything before the ?theme= with a function that gets the current url so that you’ll remain on the same page when switching between themes.

For this to work, you need to open up the functions.php file in your live theme and paste in the following code:

function pageURL() {
    $pageURL = 'http';
     if ($_SERVER["HTTPS"] == "on") {
        $pageURL .= "s";
    }
     $pageURL .= "://";
     if ($_SERVER["SERVER_PORT"] != "80") {
          $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
     }
    else {
          $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
     }

Source: How to get the current URL of web page in PHP (Note: I’ve changed the name of the function from kish_trans_curPageURL to pageURL to keep things simple.)

Step 4: Add the Dev Bar to the Development Theme

Follow the same as above but this time insert the code into the development theme files. Also you’ll need to modify the code in the link on the header.php to go back to the live version.

<?php if ( is_user_logged_in() ) : ?>

	<div id="devbar" class="dev">

		<p>Development Site</p>

		<a href="<?php pageURL(); ?>?theme=Inspect+Element+v3">Switch to Live</a>

	</div>

<?php else : ?>

	// Nothing here

<?php endif; ?>

Step 5: Style the Dev Bar

Obviously you have free reign to do what you want here with any CSS you want with any code you’ve chosen to use for the dev bar. We’re going to give the dev bar a red background and make it span the width of the browser.

#devbar.live { background-color: red; width: 100%; height 50px; }

Now you’ll want to make the bar on the live site look different to the development site so that you know which one you’re on at a quick glance.

#devbar.dev { background-color: green; width: 100%; height 50px; }

Place these in the respective CSS files for the live theme and the development theme.

Additional Styling

Something that I like to do is to use the ‘logged-in’ class that WordPress appends to the body tag when you’re logged in to add an extra visual guide for each theme.

In the live theme’s CSS, I’ve I like to add the following:

body.logged-in { border-left: 30px solid green; }

And in the development theme’s CSS:

body.logged-in { border-left: 30px solid red; }

This gives a big visual indicator of what theme you are currently viewing. If there is a big green bar on the left, you’re seeing what your visitors see and if the bar is red, you’re viewing the development version. This comes in very handy when you scroll down the page and can no longer see the dev bar.

The screenshots above (click for larger versions) show how I’ve implemented this into Inspect Element with the use of some extra CSS styling and a couple of icons.

Step 6: Temporarily Hide the Dev Bar with jQuery

There will be times where you want to see your site without the dev bar and border on the left just as people on the outside see it. The simplest way of achieving this is to use some basic jQuery. The following is code I’ve implemented to hide the dev bar and the border on the left when the paragraph (‘Live Site’ and ‘Development Site’ text) of the dev bar is clicked.

<script type="text/javascript">

$(document).ready(function(){
	$("#devbar p").css('cursor','pointer').click(function () {
		$("#devbar").hide();
		$("body.logged-in").css('border','none');
	});
});

</script>

Simply put, this code hides the dev bar and removes the left border on the body when you click on the #devbar p element in the dev bar. You may consider adding a button dedicated to this function instead.

It’s best to place this within the code that determines if the dev bar should be shown as in step 3. That way it will only load when the dev bar code is available and not when it isn’t needed. Also, don’t forget you need to include the jQuery library if your site doesn’t already, or this part won’t work.

Bring the Dev Bar back with Keyboard Shortcuts

What if you want to bring the dev bar and left border back? It will return either when you refresh the page or navigate to another part of the site but we’ve hidden it with jQuery, so why not bring it back with some additional jQuery in the form of a keyboard shortcut.

The following code will hide the dev bar and remove the left border when the letter ‘N’ is pressed and bring it back when pressing ‘Y’.

<script type="text/javascript">

	$(document).bind('keydown', function(evt) {
		switch(evt.which) {
			case 78:	// letter 'n'
				$("#devbar").hide();
				$("body.logged-in").css('border','none');
				break;
			case 89:	// letter 'y'
				$("#devbar").show();
				$("body.logged-in").css('border-left','30px solid #972324');
				break;
		}
	});

</script>

Create Your Own

Ideally this is meant for designers who run their own site or manage an existing client’s site through WordPress. I’ve only been using this for couple of days now and already it’s made a world of difference whenever I want to make any changes but need to test before making them live.

]]> http://inspectelement.com/tutorials/create-a-wordpress-theme-development-environment/feed/ 72 Add a Category and Page Specific Class to the Body Tag in WordPress http://inspectelement.com/didyouknow/add-a-class-to-the-body-tag-in-wordpress/ http://inspectelement.com/didyouknow/add-a-class-to-the-body-tag-in-wordpress/#comments Thu, 23 Jul 2009 08:00:05 +0000 Tom Kenny http://tkenny.co.uk/inspectelement/?p=231 wordpress

WordPress is a powerful CMS, especially for blogging but what if you want to style something on a single page and not affect anything on other pages? There isn’t built-in way to do this so we need to use the platform that WordPress runs on by writing some custom PHP.

<?php if (is_home()) { ?>
<body id="home">
<?php } else if (is_category('articles')) { ?>
<body id="articles">
<?php } else if (is_category('offers')) { ?>
<body id="offers">
<?php } else if (is_category('general')) { ?>
<body id="general">
<?php } else if (is_page('about us')) { ?>
<body id="about">
<?php } else if (is_page('contact us')) { ?>
<body id="contact">
<?php } ?>

Above you can see a big if else statement that will assign and id to the <body> tag depending on what page or category the user is viewing. Now we can target specific pages for styling in the CSS.

body#offers p { color: red; }
body#about p { color: green; }
body#contact p { color: black; }

This is a very simple example but you can go more complex such as having different colours for a navigation bar within different sections or change layout on one page without affecting any other pages.

]]> http://inspectelement.com/didyouknow/add-a-class-to-the-body-tag-in-wordpress/feed/ 6