WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Producing Unique Widget IDs for CSS (5 posts)

  1. nekrozon
    Member
    Posted 5 years ago #

    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 ('&nbsp;' == $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!

  2. nekrozon
    Member
    Posted 5 years ago #

    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

  3. nekrozon
    Member
    Posted 5 years ago #

    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;
    }
  4. bqrney
    Member
    Posted 4 years ago #

    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?

  5. graemefordham
    Member
    Posted 4 years ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic