Producing Unique Widget IDs for CSS

Well folks, I put on my PHP hat and dug into WordPress a little bit. The theme that generated this crazy code was from a WYSIWYG WordPress theme creator called Artisteer. Reference the code from my first post to see the full functions that need to be edited. Here is how I got each widget its own unique ID that WordPress Generates:

1. Go into the Theme’s functions.php file and Edit the line of code starting with:

   if (function_exists('register_sidebars')) {
   	register_sidebars(3, array(
   		'before_widget' => '<!--- BEGIN Widget --->,

   and replace it with:

   if (function_exists('register_sidebars')) {
   	register_sidebars(3, array(
   		'before_widget' => '<!--- BEGIN Widget ---> <!-- BEGIN UNIQUE ID="%1$s" AFTER UNIQUE ID-->',

   *The change was Adding <!-- BEGIN UNIQUE ID="%1$s" AFTER UNIQUE ID--> After <!--- BEGIN Widget --->

2. Add these two functions between art_normalize_widget_style_tokens and art_sidebar functions:

   function extract_unique_ids ($idContent)
   {
   	$uniqueIDs = array();  // Initialze Array that unqiue IDs will be stored in
   	$arrayIndex = 0;  //Counter for index of array
   
   	$beginID = '<!-- BEGIN UNIQUE ID="';  //Marks start of unique ID sequence
   	$endID = '" AFTER UNIQUE ID-->';  //Marks end of unqiue ID sequence
   	$idOffset = 0;  //Offset used for searching content
   
   	while (true)
   	{
   		$idBeginPos = strpos($idContent, $beginID, $idOffset); //Find string marking start of unique ID sequence
   		if ($idBeginPos == FALSE) break;  //If not found, break out of loop to return unique IDs
   		$idBeginPos += strlen($beginID);  //Add length of Begin Marker so position is where Unique ID starts
   		$idOffset = $idBeginPos;  //Adjust the offset to where the unqiue ID was found
   
   		$idEndPos = strpos($idContent, $endID, $idOffset);  //Find the position where the unique ID ends
   
   		$uniqueIDs[$arrayIndex++] = substr($idContent, $idBeginPos, $idEndPos - $idBeginPos);	
   
   	}
   	return $uniqueIDs;
   }

   function replace_unique_ids ($pageContent, $uniqueArray)
   {
   
   	$widgetIndex = count($uniqueArray);  //Count the number of widgets that are in the sidebar we are modifying
   	$bcb = '/<div class=\"BlockContent-body\">/';  //The string for a widget we are adding the unique ID to
   
   	$i = 0;  //Position of where we are in array
   	while ($i < $widgetIndex)
   	{
   		$currentID = $uniqueArray[$i]; //Get the current unique ID out of the array and into the string $currentID
   		$replaceWith = '<div id="' . $currentID . '" class="BlockContent-body">';  //Construct Replacement HTML
   		$pageContent = preg_replace($bcb, $replaceWith, $pageContent, 1);  //Perform the tag replacement and limit to 1 replacement
   		$i++; //Move to next unique ID in array
   	}
   
   	return $pageContent;
   }

3. In function art_sidebar after this line of code: if (!$success) return false;
   add this line of code:
   $widgetIDs = extract_unique_ids($content);
4. In function art_sidebar after this line of code: $content = str_replace(array_keys($replaces), array_values($replaces), $content);
   add this line of code:
   $content = replace_unique_ids($content, $widgetIDs);

That’s it! Now why didn’t someone tell me to do that beforehand? Haha jk!

-Nekrozon

A slight tweak was needed for my code!

Use this updated replace_unique_ids function for absolute control over the ENTIRE widget (version from previous post only gives you control over the body!)

function replace_unique_ids ($pageContent, $uniqueArray)
{

	$widgetIndex = count($uniqueArray);  //Count the number of widgets that are in the sidebar we are modifying
	$bcb = '/<div class=\"Block\">/';  //The string for a widget we are adding the unique ID to

	$i = 0;  //Position of where we are in array
	while ($i < $widgetIndex)
	{
		$currentID = $uniqueArray[$i]; //Get the current unique ID out of the array and into the string $currentID
		$replaceWith = '<div id="' . $currentID . '" class="Block">';  //Construct Replacement HTML
		$pageContent = preg_replace($bcb, $replaceWith, $pageContent, 1);  //Perform the tag replacement and limit to 1 replacement
		$i++; //Move to next unique ID in array
	}

	return $pageContent;
}

Hi Nekrozon,

I lost you at step 2…

Here is my fuctions.php

<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(‘name’=>’sidebar-left’,
‘before_widget’ => ‘<div class=”block”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h4>’,
‘after_title’ => ‘</h4>’,
));
register_sidebar(array(‘name’=>’sidebar-right’,
‘before_widget’ => ‘<div class=”block”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h4>’,
‘after_title’ => ‘</h4>’,
));
?>

How to I get widget ID’s for this function page?

Hi, this is a request to continue with some help on this subject. I am using the ‘modularity’ theme with child theme ‘on assignment’. I don’t seem to have unique widget id’s from a view source check and would like to style the individual widgets of my blog.

Here’s my function.php file from ‘on assignment’ which leads the above information nowhere! Help please!

<?php

// Define Theme Options Variables
$themename="On-Assignment";
$thumbnailsize = "270 x 150 pixels";
$slideshow = "true";
$thumbslider = "false";
$featured = "true";
$category_columns = "true";
$default_thumb = get_bloginfo('stylesheet_directory') . "/images/default-thumb.jpg";

?>

Here is my functions.php file from modularity

<?php

//Start Theme Functions - Please refrain from editing this file.

$functions_path = TEMPLATEPATH . '/functions/';
$includes_path = TEMPLATEPATH . '/includes/';

// Options panel variables and functions
require_once ($functions_path . 'admin-setup.php');

// Custom functions and plugins
require_once ($functions_path . 'admin-functions.php');

// Custom fields
//require_once ($functions_path . 'admin-custom.php');

// Admin Interface
require_once ($functions_path . 'admin-interface.php');

// More Themes Page
require_once ($functions_path . 'admin-theme-page.php');

// Options panel settings
require_once ($includes_path . 'theme-options.php');

// Custom Theme Functions
require_once ($includes_path . 'theme-functions.php'); 

// Load Post Images
require_once ($includes_path . 'post-images.php');

// Load Post Images
require_once ($includes_path . 'images.php');

// Load PhotoShelter Meta
require_once ($includes_path . 'photoshelter-meta.php');

// Custom Comments
require_once ($includes_path . 'theme-comments.php'); 

// Load Javascript
require_once ($includes_path . 'theme-js.php');

// Widgets
require_once ($includes_path . 'widgets.php');

// Custom Styles
if ( get_option('gpp_css') == 'true' ) {
function custom_styles() { ?><link href="<?php bloginfo('template_directory'); ?>/includes/custom-styles.php" rel="stylesheet" type="text/css" /><?php }
add_action('wp_head', 'custom_styles'); }

add_action('wp_head', 'gppthemes_wp_head');
add_action('admin_menu', 'gppthemes_add_admin');
add_action('admin_head', 'gppthemes_admin_head');    

?>

Any idea where to look please?

Cheers, Graeme