Add an ID attribute to widget blocks


Author Message
Vincent Ang

Posted: 3/17/2009
Quote message 

Wordpress widgets: It will be great if you can add an ID attribute to <div class="Block"> on user defined sidebar (widgets). This way, I would have CSS control over each widget rather than having each widget block look the same.
 
Marc Smith

Posted: 3/17/2009
Quote message 

Unfortunately, the 'widgets' are controlled by Wordpress and there is no telling what you might add as a widget at any given time, or how a plug in might have it's own widget code that Artisteer might have to account for.

I suppose you could manually edit the code to do that, or write and odd/evne array that would make the odd numbered widgets one set of style and the even number ones a second set.

I am sure Artisteer will look at the suggestion tho. I know they look at every one.
 
Vincent Ang

Posted: 3/18/2009
Quote message 

Thanks for the reply. I figured that there's no telling what widgets will be present, but I was suggesting a genereic ID naming. So, rather than <div class="Block">, maybe <div id="widget_[some id]" class="Block"> Then, I can control that widget specifically.

My PHP sucks compared to my ColdFusion and ASP skills so I can't hack WP as well.

Thanks again. I hope that Artisteer pays attention to my post.
 
Vincent Ang

Posted: 3/18/2009
Quote message 

Now that I think about it, IDs should be set to any element so I have CSS control over anything.
 
Marc Smith

Posted: 3/18/2009
Quote message 

There is nothing that is stopping you from editing the CSS for anything you want to do. Almost every element does have a CSS entry.
 
Vincent Ang

Posted: 3/18/2009
Quote message 

Yes, every element has a CSS selector but I can't target a specific widget unless it has an ID. Right now, every widget is a 'Block' class so they all have to look the same. If each widget had an ID, I can target each one specifically and assign a style specifically to that widget. so something like

#widget_01.Block{
background-color:#000;
}

#widget_02.Block{
background-color:#ccc;
}

#widget_02.Block{
background-color:#333;
}

 
Ryan Ellis

Posted: 3/28/2009
Quote message 

I ran into this very same problem, and I think Artisteer should implement a fix in future versions so that we can customize each widget specifically.

However, for the time being I recoded my Artisteer theme's functions.php file so that each widget body has its own Wordpress generated unique ID. With this ID you can now code each widget individually using CSS. :-P You can kiss me later :-{}

Ok, let me know if these instructions are not clear enough and i will clarify.


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);  


Now that wasn't too hard was it?? :-@

Looks like you have some CSS to play with now, and let me know if you have any questions!

-Ryan
 
Ryan Ellis

Posted: 3/29/2009
Quote message 

:-( I apologize as there is a slight tweak needed! Use this version of the function replace_unique_ids instead!


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;
}


This targets the Block class so you have C-O-M-P-L-E-T-E control over the ENTIRE widget (headers, spacing, borders, etc)!

-Ryan
 
Dan E.

Posted: 3/29/2009
Quote message 

Ryan, that's fantastic, I am wondering if we can have permission to repost your code in either our Tips or Tutorials section over at artisteerhelp.com

thanks

Dan
 
Ryan Ellis

Posted: 3/29/2009
Quote message 

Dan-

Go for it! I spent some time getting this hack to work and I am sure others would benefit from it. Why reinvent the wheel?

-Ryan
 
Dan E.

Posted: 3/29/2009
Quote message 

Thanks Ryan!
 
SB

Posted: 1/27/2010
Quote message 

Quote Ryan Ellis:

I ran into this very same problem, and I think Artisteer should implement a fix in future versions so that we can customize each widget specifically.

However, for the time being I recoded my Artisteer theme's functions.php file so that each widget body has its own Wordpress generated unique ID. With this ID you can now code each widget individually using CSS. :-P You can kiss me later :-{}

Ok, let me know if these instructions are not clear enough and i will clarify.


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);  


Now that wasn't too hard was it?? :-@

Looks like you have some CSS to play with now, and let me know if you have any questions!

-Ryan


Looks like the thing I need right now, but I don´t understand where to find it in my CSS file?

-Stian

 
Ryan

Posted: 4/25/2010
Quote message 

If you implement this code into your active wordpress theme and view the source code on your site, you will see each widget gets its own css id (example: a text widget's unqiue css id will look something similar to : text-456026511.

In your CSS file, you then craft the css desired for each widget using the id that corresponds to the widget id you saw in your source code.

Tip: If you use Firefox you really will enjoy the Firebug plugin when analyzing your own site code (or others ;-)

-Ryan
 
Rob

Posted: 9/4/2010
Quote message 

HELP.... this does not seem to apply to templates made with version 2.5. I cannot find what you said to look for in the functions.php file. I am dying here. I would like to give each widget its own style. I have one widget that needs to look DIFFERENT than the others. please advise....