I used this function to roll my own reusable function.

function count_widgets($loc){
	$sidebar_widgets = wp_get_sidebars_widgets();
	$num_widgets = 0;
	foreach ( (array) $sidebar_widgets as $k => $v ){
		if ($loc != $k)
			continue;
		if ( is_array($v))
			$num_widgets = $num_widgets + count($v);
	}
	return $num_widgets;
}

Here’s is how it would be used. This is added in the header.php in the head section. What this does is get the number of widgets then divides 100 by this number then subtracts 2 times the number. The subtraction if for 1% left and right margin that is applied in the stylesheet. If more is required simply add the left and right together and multiply by the count. The .header_widget is the class that I used when registering the widget area. It is seen below.

<style type="text/css">
<?php $count = count_widgets('header');
$percentage = (100/$count) - ($count * 2);
echo '.header_widget{ width:' . $percentage . '%;}';
?>
</style>

The parameter that is passed to the function is the id of the sidebar or widget area your getting the count for. To make sure what these values are it’s easiest to hardcode the ID when registering the sidebar. The before_widget applies the class that is used to change the width with the styles above.

register_sidebar(array(
  'name' => 'Header',
  'id' => 'header',
  'description' => 'Widgets will be shown in the header area.',
  'before_widget' => '<div class="header_widget">',
  'after_widget' => '</div>'
));

Another way would be to use print_r to view the contents of the output. Like this:

$sidebar_widgets = wp_get_sidebars_widgets();
print_r($sidebar_widgets);

This will output an array the keys will be the id that should be used.

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

The first step is signing up for a API key, as with most Google products is free and only requires a Google account. After you’ve received your key, you can then edit the functions.php file of your current theme. The below code has some key spots to take note of and maybe change some values. I will highlight these after the full code.

<?php
add_action('wp_head', 'gmaps_header');

function gmaps_header() {
?>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&key=YOURAPIKEYGOESHERE"></script>
<?php
}

function google_map(){
	global $post;
	$post_id = get_the_ID();
	$address = get_post_meta($post_id, 'address', true);
	if ( !empty ($address ) ){ ?>
		<div id="google_map" style="width:500px;height:400px;"></div><br />
		<form onsubmit="calcRoute();return false;">
			<input type="text" id="start" value="">
			<input type="submit" value="Get directions">
		</form><br />
		<div id="directionsPanel" style="width:500px;"></div>
		<script type="text/javascript">
			var directionDisplay;
			var directionsService = new google.maps.DirectionsService();
			directionsDisplay = new google.maps.DirectionsRenderer();
			var latlng = new google.maps.LatLng(0,0);
			var myOptions = {
				zoom: 7,
				center: latlng,
				mapTypeControl: true,
				mapTypeId: google.maps.MapTypeId.HYBRID
			};
			var google_map = new google.maps.Map(document.getElementById("google_map"), myOptions);
			directionsDisplay.setMap(google_map);
			directionsDisplay.setPanel(document.getElementById("directionsPanel"))
			var geocoder_google_map = new google.maps.Geocoder();
			var address = '<?php echo $address ?>';
			geocoder_google_map.geocode( { 'address': address}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					google_map.setCenter(results[0].geometry.location);
					var marker = new google.maps.Marker({
						map: google_map,
						position: google_map.getCenter()
						});
						<?php $thiscontent = $address;?>
						var contentString = '<?php echo $thiscontent; ?>';
						var infowindow = new google.maps.InfoWindow({
							content: contentString
						});
						infowindow.open(google_map,marker);
						google.maps.event.addListener(marker, 'click', function() {
							infowindow.open(google_map,marker);
						});

					} else {
						alert("Geocode was not successful for the following reason: " + status);
					}
				});

			function calcRoute() {
				var address = '<?php echo $address ?>';
				var start = document.getElementById("start").value;
				var request = {
					origin:start,
					destination:address,
					travelMode: google.maps.DirectionsTravelMode.DRIVING
				};
				directionsService.route(request, function(response, status) {
				  if (status == google.maps.DirectionsStatus.OK) {
					directionsDisplay.setDirections(response);
				  }
				});
			}
		</script>
<?php
	}

}?>

After you have your API key it will need to be added to this line.

	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&key=YOURAPIKEYGOESHERE"></script>

Here is the container that will hold the map. The width and height can be changed to better suit the current theme.

<div id="google_map" style="width:500px;height:400px;"></div><br />

The same with this line, which holds the driving directions panel. Here only a width is specified to allow the directions to use as much height as needed.

 <div id="directionsPanel" style="width:500px;"></div>

If driving directions aren’t need the simply removing these lines will remove the form and the container for the directions.

	<form onsubmit="calcRoute();return false;">
	<input type="text" id="start" value="">
	<input type="submit" value="Get directions">
	</form><br />
	<div id="directionsPanel" style="width:500px;"></div>

Another important section is the map options themselves. Zoom controls the how far the map is zoomed by default, mapTypeControl tells whether or not you want the controls for zoom and changing map type on the map. The mapTypeId tells what kind of map you want displayed by default, HYBRID is the satellite view with the roads overlayed. A list of possible mapTypeId is here.

				zoom: 7,
				center: latlng,
				mapTypeControl: true,
				mapTypeId: google.maps.MapTypeId.HYBRID

The marker content can be customized by setting the $thiscontent variable. The address is shown by default, but any html can be added to the marker. Other things you might consider is the places name, phone number, this can all be set via custom fields, and appended to the $thiscontent variable.

						<?php $thiscontent = $address;?>

After you’ve customized and added the code to your functions.php file, you can then edit your single.php and use this to display the maps where you would like.

<?php echo google_map(); ?>

Then in your post just add a custom field with the name address and the contents a valid and correctly formated address, the code will do the rest.

Resources:

Maps API Reference

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

Code is now on GitHub please see here for updated version.

Many reasons exist but the biggest is that the plugin/support is sold therefore can’t be downloaded for free. But why should the end user be punished after all they bought the plugin and updates should be just as seamless as from the official repo. With this script this can be accomplished. Examples and a package of sample code can be downloaded below.

The original idea and code came from konstruktors.com, but I’ve modified it to add more info and fixed a couple of errors with it. The package containing all the sample code can be downloaded here from GitHub.

First I’ll explain the code that goes onto the update server, this code is found in the api folder of the zip file. Basically you’ll just need to edit and upload the api/index.php file to your server somewhere and then in the update files of your theme/plugin point to that directory.

Theme Update

The theme in $packages['theme'] will need to replaced with your theme’s slug most likely it’s theme folder name. This is what is sent to the update server to check for updates. Next you have a versions array. You’ll need to change the 1.0 both places to match the version of the update that is available. Next is the date that the update was published. Not really used in theme updates but still handy to have. Next is the important part the url to the zip file for the update that will be pulled down by WordPress and installed. The info array below this is where you can specifiy a url that will display the theme and some info about it. Normally for themes from the offical repo this will display the page from the extend section.

// Theme with update info
$packages['theme'] = array(
	'versions' => array(
		'1.0' => array(
			'version' => '1.0',
			'date' => '2010-04-10',
			'package' => 'http://url_to_your_site/theme.zip'  // The zip file of the theme update
		)
	),
	'info' => array(
		'url' => 'http://url_to_your_theme_site'  // Website devoted to theme if available
	)
);

Plugin Update

Now onto the plugin section of the api/index.php file. The plugin in $packages['plugin'] will need to be replaced with the plugin’s slug, usually the folder name of the plugin itself. Next is the versions array where 1.0 will need to replaced both time with the version that is in the zip file for the update.

• version: version of the update
• date: date the update was published this is used in the plugin details section.
• author: full name of the author or company publishing the plugin.
• requires: minimum version of WordPress needed for the plugin to function properly.
• tested: the version of WordPress the plugin has been tested with.
• homepage: authors homepage.
• downloaded: download counter used by wordpress.org but not by the self update api, can be any number.
• external: link to the page devoted to plugin.
• package: url to the zip file for the update.
• sections: is an array to hold the extra info for the plugin details page generated by WordPress.
• description: Description of Plugin.
• installation: Install Info
• …
• Any section can be added not just the ones listed. The first field in the array ie before the => is used as the title of the tab in the plugin info page. The next section is used in the body of the tab.

// Plugin with update info
$packages['plugin'] = array(
	'versions' => array(
		'1.0' => array(
			'version' => '1.0',
			'date' => '2010-04-10',
			'author' => 'Author Name',
			'requires' => '2.8',  // WP version required for plugin
			'tested' => '3.0.1',  // WP version tested with
			'homepage' => 'http://your_author_website',  // Your personal website
			'downloaded'=> '1000',  // Number of times downloaded
			'external' => 'http://your_plugin_website',  // Site devoted to your plugin if available
			'package' => 'http://url_to_your_site/plugin.zip',  // The zip file of the plugin update
			'sections' => array(
				'description' => 'Description of Plugin',
				'installation' => 'Install Info',
				'screen shots' => 'Screen Shots',
				'change log' => 'Change log',
				'faq' => 'FAQ',
				'other notes' => 'Other Notes'
				)
		)
	),
	'info' => array(
		'url' => 'http://your_plugin_webiste'  // Site devoted to your plugin if available
	)
);

Theme Update script

Now for the script that will need to be added to your theme for the theme to be able to check back to your server for updates. There is a folder called theme/theme-update/ that has a update.php file that is all that is needed. It need to be edited and included from your functions.php file. The value that needs to be edited is $api_url. $api_url is the url to the api/index.php file that you’ve uploaded to your server somewhere. There is also a debug function at the top to reset the transient used for theme updates so that WordPress will check every page load for updates. The should only be used for testing, and should be removed from actual production code, as it would cause massive amounts of traffic to your site.

/**/
// TEMP: Enable update check on every request. Normally you don't need this! This is for testing only!
//set_site_transient('update_themes', null);

add_filter('pre_set_site_transient_update_themes', 'check_for_update');

function check_for_update($checked_data) {
	global $wp_version;

	/******************Change this*******************/
	$api_url = 'http://UPDATE SERVER.com/';
	/************************************************/

Plugin Update script

In the zip package there is a folder test-plugin-update which contains a file called test-plugin-update.php Which is a full plugin but doesn’t do anything except check for updates to itself. The code can just be placed into existing plugin files or into a new file and included from the main plugin file. The plugin update only require one variable be changed $api_url which is the path to the api/index.php file on your update server. This also has the function to check for updates every page load and should be removed from production code. Basically the plugin update has two main functions. One checks for the update the other takes the info from the update check and places it into the plugin update details screen.

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

• Download

<?php
add_action('admin_head','theme_check_ver'); //Theme Update Function
/****************************
Update Noticication Script
By Jeremy Clark

http://clark-technet.com

License: GPL
*****************************/

/*********************VALUES BELOW NEED TO BE CHANGED*************************/
$theme_sn= "theme-short-name";
//Theme's short name for adding options to database
$remote_file = "http://address-to-remote-server/theme-version.txt";
//Address of remote file with version number
$update_check_int = 24;
// Time in hours to check file for new version
$theme_update_notice ="<p>New theme version available.  Please visit here for the download.</p>";
//Text for notice displayed to user about new version
/*********************END EDITING*********************************************/

//These variables don't need editing
$theme_data = get_theme_data(TEMPLATEPATH . '/style.css');
$local_version = $theme_data['Version'];
$update_last_check = get_option($theme_sn.'_last_ver_check');
$new_ver_notice = get_option($theme_sn.'_new_ver');

function theme_check_ver() {
	global $update_check_int, $update_last_check,$new_ver_notice,$theme_sn;
		if ($new_ver_notice = true) {
			add_action('admin_notices','theme_new_ver');
		}
		$update_check_int_seconds = $update_check_int * 3600;
		$now = time();
		if ( empty( $update_last_check ) ) {
				//first run
				theme_compare_ver();
				add_option($theme_sn.'_last_ver_check', $now);
			} else {
				$time_ago = $now - $update_last_check;
				if ( $time_ago > $update_check_int_seconds ) {
					theme_compare_ver();
					update_option($theme_sn.'_last_ver_check', $now);
				}
			}
}
function theme_compare_ver() {
	global $remote_file, $local_version,$theme_sn;
		$remote_text = file_get_contents($remote_file);
		if ($remote_text !== false) {
			$remote_version = $remote_text;
		if ($local_version == $remote_version) {
				delete_option($theme_sn.'_new_ver');
			} else {
				if ( is_numeric(str_replace(".", "", $local_version)) && is_numeric(str_replace(".", "", $remote_version)) ) {
					if ( substr_count($local_version, '.') == 0 ) {
						// x -> x.x.x.x
						$local_version = $local_version . '.0.0.0';
					} else if ( substr_count($local_version, '.') == 1 ) {
						// x.x -> x.x.x.x
						$local_version = $local_version . '.0.0';
					} else if ( substr_count($local_version, '.') == 2 ) {
						// x.x.x -> x.x.x.x
						$local_version = $local_version . '.0';
					}
					$local_version = str_replace(".", "", $local_version);
					//$local_version = substr($local_version,0,1) . '.' . substr($local_version,1,5);
					$local_version = '0.' . $local_version;
					//---------------//
					if ( substr_count($remote_version, '.') == 0 ) {
						// x -> x.x.x.x
						$remote_version = $remote_version . '.0.0.0';
					} else if ( substr_count($remote_version, '.') == 1 ) {
						// x.x -> x.x.x.x
						$remote_version = $remote_version . '.0.0';
					} else if ( substr_count($remote_version, '.') == 2 ) {
						// x.x.x -> x.x.x.x
						$remote_version = $remote_version . '.0';
					}
					$remote_version = str_replace(".", "", $remote_version);
					//$remote_version = substr($remote_version,0,1) . '.' . substr($remote_version,1,5);
					$remote_version = '0.' . $remote_version;
					//---------------//
					//echo $remote_version . ' - ' . $local_version . '<br />';
					if ( $remote_version > $local_version ) {
						add_action('admin_notices','theme_new_ver');
						add_option($theme_sn.'_new_ver',true);
					} else {
						del_option($theme_sn.'_new_ver');
					}
				} else {
					add_action('admin_notices','theme_new_ver');
					add_option($theme_sn.'_new_ver',true);
				}
			}
		} else {
			echo "Can't Connect to update server";
		}
}	

function theme_new_ver() {
	global $theme_update_notice, $pagenow;
	if ( $pagenow == "themes.php") {
?>
		<div id="message" class="updated fade">
		<?php echo $theme_update_notice; ?>
		</div>
<?php
	}
}
?>

Then the update-notice.php file will need to be included from your functions.php file in your theme.

if ( is_admin() ) {
    include_once (TEMPLATEPATH . '/update-notice.php');
}

There are a few values in the top of the file that would need to change to reflect the theme it’s checking for. The theme-version.txt on the remote server simply contains the theme version that is available for release. The script checks and if it’s lower than the remote version it will display the $theme_update_notice variable with the text that you specify on the top of the themes.php page.

/*********************VALUES BELOW NEED TO BE CHANGED*************************/
$theme_sn= "theme-short-name";
//Theme's short name for adding options to database
$remote_file = "http://address-to-remote-server/theme-version.txt";
//Address of remote file with version number
$update_check_int = 24;
// Time in hours to check file for new version
$theme_update_notice ="<p>New theme version available.  Please visit here for the download.</p>";
//Text for notice displayed to user about new version
/*********************END EDITING*********************************************/

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

One feature that I didn’t know exists until now is automatic feed links which will output all the different feed links to current page the users is on to the header. It was added in 2.8 but has been changed how it works for 3.0. For example on a single post page the main blog feed, and the single post comment feed links are added to the header allowing a user to easily subscribe to the either feed. Another is on a category archive page the feed for the main blog, as well as the feed for all posts in that category are added. So I’ve got this feature added to my Techozoic theme but to maintain backwards compatibility I though I would share the simple function I came up with.

To enable the automatic feed links it’s very simple, just use the add_theme_support function with the automatic-feed-links as the parameter like this into your functions.php.

if(function_exists('add_theme_support')) {
	add_theme_support('automatic-feed-links');
	//WP Auto Feed Links
}

It’s critical to test if a function exists before calling it to prevent errors.

function remove_feed_link(){
	global $wp_version;
	$default_feed_link = '<link rel="alternate" type="application/rss+xml" title="'. get_bloginfo('name'). ' RSS Feed" href="'. get_bloginfo('rss2_url') .'" />';
	if($wp_version < 3){
		if(function_exists(automatic_feed_links)){
			$output .= automatic_feed_links();
		} else {
			$output .= $default_feed_link;
		}
	}
	echo $output;
}
	add_action('wp_head', 'remove_feed_link');

Most theme authors include the default RSS feed in the header of their themes, but the new feature requires those links to be removed to work correctly. The trick to the automatic-feed-links is it’s a new 3.0 feature but the add_theme_support has exists since 2.9 so you can’t use the same check to disable your old feed links from the header. But what you can do is to check if the check the wp_version variable is less than 3, and if it is use either automatic_feed_links function or echo your own RSS link. Then you just add your function to be called with wp_head using add_action.

Futher Reference:
add_theme_support Codex Article

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

I’m also loving the camera, 8 megapixels is as same as my Canon DSLR. Browsing the web is now a dream as well, the included browser even supports Flash albeit in a lite format. Another handy feature is the speech recognition is very good and very well integrated into the built in Google search, allowing very quick searches via speaking rather than typing.

Although I did have some doubts with the onscreen keyboard, I have fat fingers and always struggled to type on the tiny Blackberry keyboard, but the key recognition is spot on. The predictive text is also very good and eases some of the typing. Battery life can be a bit iffy for a full day of use, but as powerful as the phone is I’ll certainly trade having to charge it more often for the power.

Photo Taken with HTC Incredible

HTC Incredible Notable Specs

• 1Ghz Processor
• 512MB RAM
• 8GB Internal Memory/expandble to 40GB with 32GB microSD card
• 8 MegaPixel Camera with video
• 480 x 800 OLED Touchscreen
• Android 2.1 with HTC Sense enhancements
• WiFi
• GPS Navigation
• Speech Recoginition
• Accelerometer

If you have Verizon and in the market for a new smartphone I believe that the Incredible is the way to go.

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

Update: Transfer complete, if you notice any problems please let me know.

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

View the Techozoic Fluid project page.

Svn Checkout Instructions

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

function mytheme_admin_page() {
	add_menu_page("Theme Options", "Top Level Menu Name", 'edit_themes', 'menu_display_function','','',61);
	add_submenu_page('menu_display_function' ,"Sub Page Title 1", "Sub Page Menu Text", 'edit_themes', 'menu_display_function', 'sub_men_display_function');
	add_submenu_page('menu_display_function' ,"Sub Page Title 2", "Sub Page Menu Text 2", 'edit_themes', 'menu_display_function', 'sub_men_display_function_2');
}
menu_display_function(){
echo "Top Level Menu Page";
}
sub_menu_display_function(){
echo "Sub Page Level Page";
}
sub_menu_display_function_2(){
echo "Sub Page Level Page 2";
}
add_action('admin_menu', 'mytheme_admin_page');

So what does this code do the add_menu_page function adds the top level container, this is like the Appearance, Plugins, Users … menu that already exist.

add_menu_page(page_title, menu_title, capability, handle, [function], [icon_url],menu_order);

The parameters are

page_title
Text that will go into the HTML page title for the page when the menu is active.
menu_title
The on-screen name text for the menu.
capability
The minimum capability required to display and use this menu page. Whilst for legacy reasons, you may also use user level – the usage of user level is discouraged for future compatibility and has been deprecated since WordPress 1.5.
handle/file
If the function parameter is omitted, this should be the PHP file that handles the display of the menu page content. Otherwise, and more commonly, it will be a unique “handle” for the page. e.g. “my-awesome-plugin-settings”
function
The function that displays the page content for the menu page.
icon_url
The path to the icon for the menu, if not given default to a gear icon.
menu_order
A number for where the new menu should be inserted, defaults to below all other menus. The 61 in the example code will place the menu right below the Appearance menu, which should work nicely for a theme admin menu.

To add the sub pages to the menu you call the add_submenu_page function.

add_submenu_page(parent, page_title, menu_title, capability required, file/handle, [function]);

Parameters:

parent
The filename of the core WordPress admin file that supplies the top-level menu in which you want to insert your submenu, or your plugin file if this submenu is going into a custom top-level menu.
page_title
Text that will go into the HTML page title for the page when the submenu is active.
menu_title
The on-screen name text for the submenu.
capability
The minimum capability required to display and use this menu page. Whilst for legacy reasons, you may also use user level the usage of user level is discouraged for future compatibility and has been deprecated since WordPress 1.5.
file
For existing WordPress menus, the PHP file that handles the display of the menu page content. For submenus of a custom top-level menu, a unique identifier for this sub-menu page.

In situations where a plugin is creating its own top-level menu, the first submenu will normally have the same link title as the top-level menu and hence the link will be duplicated. The duplicate link title can be avoided by calling the add_submenu_page function the first time with the parent and file parameters being given the same value.

function
The function that displays the page content for the menu page.

This is a very quick example of how this is done. I will be updating my Theme Options Framework to include this as an option and to show how this is used in practice. I’ve also done this for my Techozoic Fluid 1.8.6 theme which should be available soon.

Resources:

• Adding Administration Menus – WordPress Codex
• Top Level Menu Page – WPEngineer

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

I did run into a problem with ESXi, apparently since the motherboard was older in the server ESXi wouldn’t install correctly onto the drive I had in there, and the motherboard also didn’t support booting from USB to install ESXi to a flash drive, as suggested by a few sites. So I scraped the idea for ESXi and installed CentOS 5.4 on the server without any desktop managers and disabled everything except a few essential services, this netted a server using less than 200 MB of memory. Then I installed VMWare Server 2 on it and transferred my VM image over to the server. Although there is more overhead having a complete OS and VM Server for my purposes it should be fine.

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

The next step after a couple of days of testing will be wiping the old drive in the old server and installing VMWare ESXi on it. I decided to virtualize to make it easier to upgrade in the future when I decide to build a new desktop. I’ll retire my current desktop and recommission it as the new server and having everything virtualized should make the transition much smoother. I’m hoping downtime will be minimal if any at all.

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

	add_filter('query_vars', 'add_new_var_to_wp');
	function add_new_var_to_wp($public_query_vars) {
		$public_query_vars[] = 'my_theme_custom_var';
		//my_theme_custom_var is the name of the custom query variable that is created and how you reference it in the call to the file
		return $public_query_vars;
	}

This sets up WP to now accept a new variable in a query called my_theme_custom_var the format of the query would be http://www.yourblog.com/index.php?my_theme_custom_var=css . The ? mark tells WP that this is a query and the = sign tells what the query variable should be set to.

Now to actually setup the function that will call the external file. I found this gem when looking at how popular WP theme called Atahualpa handled it’s external CSS.

	add_action('template_redirect', 'my_theme_css_display');
	function my_theme_css_display(){
		$css = get_query_var('my_theme_custom_var');
		if ($css == 'css'){
			include_once (TEMPLATEPATH . '/style.php');
			exit;  //This stops WP from loading any further
		}
	}

This code now will check if a query is passed to WP with the value my_theme_custom_var and if it is and has the value of css then it includes the style.php file which is our dynamic CSS file. Then the code exits which stops any other functions from happening other wise the whole home page is outputted along with the style.php file, which isn’t what is needed only the file.
Now you can use any WP functions on the style.php file as it is included from the functions.php file which is a standard WP file.
Source : Will Norris

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

Here is the updated framework files:

• Download

After you have the controlpanel.php file uploaded to your server into your theme’s main directory you’ll need to add this line to your functions.php file

<?php require_once(TEMPLATEPATH . '/controlpanel.php'); ?>

Now you’ll need to start editing the array values to add your options. The way you add options to the framework is still the same following the below templates.

$options = array (
    array(  "name" => "Radio Selection Set",
            "desc" => "This is a descriptions",
            "id" => $shortname."_radio",
            "type" => "radio",
            "std" => "3",
            "options" => array("3", "2", "1")),

    array(  "name" => "Text Box",
            "desc" => "This is a descriptions",
            "id" => $shortname."_text_box",
            "std" => "Some Default Text",
            "type" => "text"),

    array(  "name" => "Bigger Text Box",
            "desc" => "This is a descriptions",
            "id" => $shortname."_bigger_box",
            "std" => "Default Text",
            "type" => "textarea"),

    array(  "name" => "Dropdown Selection Menu",
            "desc" => "This is a descriptions",
            "id" => $shortname."_dropdown_menu",
            "type" => "select",
            "std" => "Default",
            "options" => array("Default", "Option 1", "Option 2")),

    array(  "name" => "Checkbox selection set",
            "desc" => "This is a descriptions",
            "id" => $shortname."_checkbox_menu",
            "type" => "checkbox",
            "std" => "Default",
            "options" => array("Default", "Option 1", "Option 2")),

    array(  "name" => "Multiple selection box",
            "desc" => "This is a descriptions",
            "id" => $shortname."_multi_select_dropdown_menu",
            "type" => "multiselect",
            "std" => "Default",
            "options" => array("Defaults", "Option 1s", "Option 2s"))
);

Another new feature I’ve added is a theme init script. It’s useful for adding default values to the wp_options table. This code will also pull values already in separate wp_options entries and put them into the single array wp_option, then delete the old entries. Then the code sets a separate value in the wp_options table as a check so the script will only run if it doesn’t find that value. Then the function is added to the dashboard and main page header via the action hook. So the first time any visits a page in the dashboard or on the blog the mytheme_add_options will run, but only the first time.

function mytheme_add_options() {
global $themename, $shortname, $options;
foreach ($options as $value) {
	$key = $value['id'];
	$val = $value['std'];
		if( $existing = get_option($key)){
			$new_options[$key] = $existing;
			delete_option($key);
		} else {
			$new_options[$key] = $val;
			delete_option($key);
		}
}
add_option($shortname.'_options', $new_options );
}

function first_run_options() {
global $shortname;
$check = get_option($shortname.'_activation_check');
	if ( $check != "set" ) {
		mytheme_add_options();
   		add_option($shortname.'_activation_check', "set");
  	}
}
add_action('wp_head', 'first_run_options');
add_action('admin_head', 'first_run_options');

After you have your option page the way you like you’ll need some way of get the variables onto other pages of you theme. You’ll need to add these next few lines to every page on which you plan to use the theme variables. Then the variables will be called like an array with the key being the option id.

<?php
global $shortname;
$settings = get_option($shortname.'_options');
// Options are called like this $settings['option_id'];
?>

Now you can use the variables on this page. The variables will look like this let’s assume you set $shortname = “theme”, then your variables will look like this $theme_radio, $theme_text_box, $theme_bigger_box, $theme_dropdown_menu. Also keep in mind that you can add one than one of any kind of element, you can also rename any of the elements for easier variable management. Where “id” => $shortname.”_radio”, is defined you can change the _radio part to reflect what the option is actually for. To check the value of your multiple selection or checkbox variables you’ll need to use this. Where Item is the value that your checking that is selected or checked.

<?php
if(in_array("Item",$settings['theme_checkbox']));
?>

Now I’ll show how to use your theme options on an external stylesheet rather than placing them in the head of the theme, which is bad web practice. It also has the added benefit of the page being cached by the browser so it will also save on bandwidth.

<?php
global $options, $shortname;
$settings = get_option($shortname.'_options');
//Options will be called like this $settings['shortname_option_name']
<head>
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('home') ?>/?css=css"/>

<?php
if ( is_singular() ) wp_enqueue_script( 'comment-reply' );
wp_head(); ?>
</head>

This code uses something called a query variable that is registered in the functions.php file like shown below to call the style.php file and allow it to use WordPress builtin functions for calling options. Much cleaner and safer than the $_GET method I used earlier.

<?php

	function add_new_var_to_wp($public_query_vars) {

		$public_query_vars[] = 'css';

		return $public_query_vars;

	}

	function dynamic_css_display(){

		$css = get_query_var('css');

		if ($css == 'css'){

			include_once (TEMPLATEPATH . '/style.php');

			exit;

		}

	}

	add_filter('query_vars', 'add_new_var_to_wp');

	add_action('template_redirect', 'dynamic_css_display');

?>

This registers the query variable called css and if that variable is set to css as it is when the stylesheet is called in the header with the ?css=css appended to the end then the style.php file is included then the everything else is stopped with the exit in the code.

<?php
global $shortname;
header('Content-type: text/css');
header("Cache-Control: must-revalidate");
$offset = 72000 ;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);
$settings = get_option($shortname.'_options');
// Variables should be added with {} brackets
echo <<<CSS
/*Style Sheet Start*/
body {
background-color: {$settings['theme_option_color']};
}
CSS;
//More php can go here
echo <<<CSS
/*Style Sheet End*/
CSS;
?>

The style.php file can now use the WordPress function get_option for retrieving options from the database. Once this is done then the option variables will be called as an array with the option id being the key ie: $settings['theme_option_color']

Update

I’ve had a request for adding an upload form to the options page for adding a custom header image. I’ve done this same thing in my Techozoic theme, if you would like to look at it to see a practical use of it you can download it here. Basically you’ll need to add a separate file to process the uploaded files, and the form to upload the files. An example upload file can be downloaded here. Then the form can be added to the options page with this code.

<form enctype="multipart/form-data" encoding="multipart/form-data" action="<?php bloginfo('template_directory') ?>/upload.php" method="post">
<input type="file" name="file" /><br />
<input type="submit" name="submit" value="Upload" />
</form>

You just need to upload the file and make sure it’s in the root of your theme directory and named upload.php. You can also edit the upload.php file to change the restrictions on file size and file type. I’ve set the upload.php file to only accept jpg, gif, and png files under 1 MB which should be fine for uploading header images.

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

The server edition wasn’t overlooked though, it now includes Ubuntu Enterprise Cloud. Organizations that use Ubuntu Server can now take advantage of cloud computing.

• Ubuntu Desktop
• Ubuntu Server

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

After downloading both of these and running them against my blog both were suggesting what I thought at the time would be a major project, enabling caching and gzip compression on my server. To enable caching I found this site that had great examples of a simple addition to the .htaccess file in the blog directory would enable caching. The only thing needing to be edited in Apache is making sure that mod_cache and mod_expires modules are loaded. Most standard installations will already have these loaded for you.

After this I started working on enabling compression. I again found another good resource on how to do that here. I left out the section of mod_expires since I had a .htaccess file with that code already. After doing this and a few other minor adjustments, my page load times were cut in half. On average 7-8 seconds for a first time visit and under 2 seconds for opening a post or another page thanks to most elements already being cached.

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

First you’ll want some way of letting the theme user choose what will change in the stylesheet, I explain how to do this with a theme options framework here. After you’ve got all the options set the way you want you need some way of getting those into your theme. At first I was just using <style></style> tags in the header of the theme, while this works it just isn’t an efficient way of writing a theme. What I wanted to do was have an external file that changed with the options but that could also be cached by the web browser, to improve performance, save bandwidth and overall have a better written theme.

Now if your using a framework similar to mine or your using mine then you know you have to pull some info from the WordPress database to fill in your variables from your option page. This posed the biggest problem because since this was an external page none of the WordPress functions would work. To get around this in the first version I just loaded the wp-config.php and wp-load.php files in the top of the file. This is bad practice because WordPress site owners can move these files around now and there is now way to know where to load these from. So I spotted the solution from another theme developer. Making an array of all the option values then using php GET variable on the external stylesheet. Now onto the actual code.

First this is the code that my framework uses to pull the options from the WordPress database.

<?php
global $options;
foreach ($options as $value) {
	if($value['type']!="checkbox" and $value['type']!="multiselect"){
		if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else {
		$$value['id'] = get_settings( $value['id'] ); }
	}else{
		if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = explode(",",$value['std']); } else {
		$$value['id'] = explode(",",get_settings( $value['id'] )); }
	}
} ?>

I just modified it to add all the values to another variable seperated by a |.

<?php
global $options;
foreach ($options as $value) {
	if($value['type']!="checkbox" and $value['type']!="multiselect"){
		if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else {
		$$value['id'] = get_settings( $value['id'] ); }
	}else{
		if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = explode(",",$value['std']); } else {
		$$value['id'] = explode(",",get_settings( $value['id'] )); }
	}
$css .= $$value['id']."|"; }
$css = urlencode($css);
?>
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory') ?>/style.php?css=<?php echo $css;?>"/>

So now the variable $css now holds all the values of the options set by the theme user. Then for the external stylesheet it should be named whatever you like except instead of a .css extension give it a .php extension so the php processing engine of the web server will know it has php in it. Then the link tag gives the path to the style.php file but also notice it appends the?css=<?php echo $css;?> this actually sends all the options to the dynamic stylesheet called style.php. Then you’ll just need to add this to the top of the style.php file.

<?php
header('Content-type: text/css');
header("Cache-Control: must-revalidate");
$offset = 72000 ;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);
$css = $_GET["css"];
$css = urldecode($css);
$s = explode("|", $css);

This tells the web browser to process the output of this file as plain text and use a stylesheet instructions. This also sets up the caching that was important to me. Then it gets the value of $css which was passed to the style.php file when it was called in the header.php of the theme. After that it decodes it and then explodes it into an array. Now to access your option values you’ll just use variables like this.

$s[0]
$s[1]

It’s important to know the order your options will be added to the array so you can call the right value when needed, also keep in mind that arrays start at 0 so the first value will not be 1. For an example you can download my Techozoic theme and look in the controlpanel.php for the options framework then in the header.php for the code to pull the options into the array then in the style.php file itself to see how to use the variables in the stylesheet. In my theme however since I already had most of the variables already named I just assigned the value of the array to the different variables I already had setup. It makes it easier in the long run I think because you can give more descriptive names to make everything more readable and easier to understand.

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.

The first difference with using PHP in a stylesheet is the extension of the file has to change, from .css to .php for the web server to know how to process the PHP language in the file. Then since the file is now a php file it wont be cached by web browsers and will be reloaded every page view which is unnecessary, but there is a way to fix that. I’ll now show a very simple dynamic stylesheet then explain each part individually.

<?php
header('Content-type: text/css');
header("Cache-Control: must-revalidate");
$offset = 72000 ;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);

$bg_color = "#FFFF00";
$body_font = "Tahoma";
$link_color = "#0000FF";
$alt_color = "1";

echo <<<CSS
body {
background-color: {$bg_color};
font-family:{$body_font};
}
a {
color: {$link_color};
}
CSS;

if ($alt_color = 1) {
echo <<<CSS
body {
background-color: #FFFFFF;
}
CSS;
} // Closing If tag
?>

Lines 1-6 setup the headers of the file to allow for browser caching, the will reduce bandwidth usage and save on some server processing.

<?php
header('Content-type: text/css');
header("Cache-Control: must-revalidate");
$offset = 72000 ;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);

Next 8-11 then set up the variables that will be used through the rest of the stylesheet. Notice that everything is enclosed in quotation marks, if for some reason you need to include quotation marks in the variable then you must escape it by adding a slash in front of the mark like this \” .

$bg_color = "#FFFF00";
$body_font = "Tahoma";
$link_color = "#0000FF";
$alt_color = "1";

On lines 13- 21 the actual styles are echoed which will print it to the text of the file, but the good thing about having the php is that you can mix in your variables when echoing. Notice the echo <<<CSS this tells php to output text until it sees CSS again which is on line 21. Then you also see the {$bg_color}, this is the way to use your variables the {} tell it that it’s a php variable and to output it’s value instead of the actual text $bg_color.

echo <<<CSS
body {
background-color: {$bg_color};
font-family:{$body_font};
}
a {
color: {$link_color};
}
CSS;

Finally on lines 23-30 is a simple if statement checking the value of the $alt_color and if it equals 1 then to add lines 24-28 to the output as well. Then you’ll see the closing ?> tag which says to stop processing the file.

if ($alt_color = 1) {
echo <<<CSS
body {
background-color: #FFFFFF;
}
CSS;
} // Closing If tag
?>

Other Resources:

• PHP Documentation
• W3Schools PHP tutorials
• W3Schools CSS tutorials
• Digital Web Magazine Article

©2012 Jeremy Clark - TechNet.com. All Rights Reserved.