Producing Unique Widget IDs for CSS
-
My ultimate goal is to make a unique widget that differs from the norm of my theme. However, my theme does not produce ids for the widget divs.
I was delighted to come across the following thread that shows how to edit functions.php so that widgets’ divs get a unique ID:
http://wordpress.org/support/topic/153242
However, the conditional if (function_exists(‘register_sidebars’)) in my functions.php uses a string that is replaced with the html in a later function:
if (function_exists('register_sidebars')) { register_sidebars(3, array( 'before_widget' => '<!--- BEGIN Widget --->', 'before_title' => '<!--- BEGIN WidgetTitle --->', 'after_title' => '<!--- END WidgetTitle --->', 'after_widget' => '<!--- END Widget --->' )); }
There are two functions that setup the manipulation of the strings in the condition above. The second function art_sidebar sets up the array with the string and its corresponding html code for the replace. Anyways, here are the two functions:
function art_normalize_widget_style_tokens($content) { $bw = '<!--- BEGIN Widget --->'; $bwt = '<!--- BEGIN WidgetTitle --->'; $ewt = '<!--- END WidgetTitle --->'; $bwc = '<!--- BEGIN WidgetContent --->'; $ewc = '<!--- END WidgetContent --->'; $ew = '<!--- END Widget --->'; $result = ''; $startBlock = 0; $endBlock = 0; while (true) { $startBlock = strpos($content, $bw, $endBlock); if (false === $startBlock) { $result .= substr($content, $endBlock); break; } $result .= substr($content, $endBlock, $startBlock - $endBlock); $endBlock = strpos($content, $ew, $startBlock); if (false === $endBlock) { $result .= substr($content, $endBlock); break; } $endBlock += strlen($ew); $widgetContent = substr($content, $startBlock, $endBlock - $startBlock); $beginTitlePos = strpos($widgetContent, $bwt); $endTitlePos = strpos($widgetContent, $ewt); if ((false == $beginTitlePos) xor (false == $endTitlePos)) { $widgetContent = str_replace($bwt, '', $widgetContent); $widgetContent = str_replace($ewt, '', $widgetContent); } else { $beginTitleText = $beginTitlePos + strlen($bwt); $titleContent = substr($widgetContent, $beginTitleText, $endTitlePos - $beginTitleText); if (' ' == $titleContent) { $widgetContent = substr($widgetContent, 0, $beginTitlePos) . substr($widgetContent, $endTitlePos + strlen($ewt)); } } if (false === strpos($widgetContent, $bwt)) { $widgetContent = str_replace($bw, $bw . $bwc, $widgetContent); } else { $widgetContent = str_replace($ewt, $ewt . $bwc, $widgetContent); } $result .= str_replace($ew, $ewc . $ew, $widgetContent); } return $result; } function art_sidebar($index = 1) { if (!function_exists('dynamic_sidebar')) return false; ob_start(); $success = dynamic_sidebar($index); $content = ob_get_clean(); if (!$success) return false; $content = art_normalize_widget_style_tokens($content); $replaces = array( '<!--- BEGIN Widget --->' => "<div class=\"Block\">\r\n <div class=\"Block-body\">\r\n", '<!--- BEGIN WidgetTitle --->' => "<div class=\"BlockHeader\">\r\n <div class=\"header-tag-icon\">\r\n <div class=\"BlockHeader-text\">\r\n", '<!--- END WidgetTitle --->' => "\r\n </div>\r\n </div>\r\n <div class=\"l\"></div>\r\n <div class=\"r\"><div></div></div>\r\n</div>\r\n", '<!--- BEGIN WidgetContent --->' => "<div class=\"BlockContent\">\r\n <div class=\"BlockContent-tl\"></div>\r\n <div class=\"BlockContent-tr\"><div></div></div>\r\n <div class=\"BlockContent-bl\"><div></div></div>\r\n <div class=\"BlockContent-br\"><div></div></div>\r\n <div class=\"BlockContent-tc\"><div></div></div>\r\n <div class=\"BlockContent-bc\"><div></div></div>\r\n <div class=\"BlockContent-cl\"><div></div></div>\r\n <div class=\"BlockContent-cr\"><div></div></div>\r\n <div class=\"BlockContent-cc\"></div>\r\n <div class=\"BlockContent-body\" id=\"".$idGen."\">\r\n", '<!--- END WidgetContent --->' => "\r\n </div>\r\n</div>\r\n", '<!--- END Widget --->' => "\r\n </div>\r\n</div>\r\n" ); $bwt = '<!--- BEGIN WidgetTitle --->'; $ewt = '<!--- END WidgetTitle --->'; if ('' == $replaces[$bwt] && '' == $replaces[$ewt]) { $startTitle = 0; $endTitle = 0; $result = ''; while (true) { $startTitle = strpos($content, $bwt, $endTitle); if (false == $startTitle) { $result .= substr($content, $endTitle); break; } $result .= substr($content, $endTitle, $startTitle - $endTitle); $endTitle = strpos($content, $ewt, $startTitle); if (false == $endTitle) { $result .= substr($content, $startTitle); break; } $endTitle += strlen($ewt); } $content = $result; } $content = str_replace(array_keys($replaces), array_values($replaces), $content); echo $content; return true; }
As you can probably already tell I know enough about programming concepts to kind of know what is going on, but I don’t understand enough about how WordPress operates (yet!)
Thank you for taking the time to read this and let me know if I need to post additional code or need to clarify!
-
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:
-
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 --->
-
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; }
-
In function art_sidebar after this line of code:
if (!$success) return false;
add this line of code:
$widgetIDs = extract_unique_ids($content);
-
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
-
Go into the Theme’s functions.php file and Edit the line of code starting with:
- The topic ‘Producing Unique Widget IDs for CSS’ is closed to new replies.