Wordpress sidebar classes - css

There any way i could add a class for the specific order of widget item? i.e. the class name would be widgetorder-1 (for the first appearing widget), widgetorder-2 (for the widget appearing in the 2nd order), etc. I looked into filters but wasn't sure how that worked.

// Set this to whatever number you'd like the ordering to start on.
$my_blog_widget_count = 0;
// put your blog sidebar here
$my_blog_sidebar_id = '';
function output_my_widget_info($a){
global $my_blog_sidebar_id, $my_blog_widget_count;
if($a[0]['id'] == $my_blog_sidebar_id){
global $my_blog_sidebar_id, $my_blog_widget_count;
$a[0]['before_widget'] = preg_replace( '/ class="widget /i', ' class="widget widget-'.$my_blog_widget_count.' ', $a[0]['before_widget'] );
$my_blog_widget_count++;
}
return $a;
}
add_filter('dynamic_sidebar_params','output_my_widget_info');
That should do it for you. Just stick that inside your theme's functions.php file and watch it work.

Related

Adding a <span> to widget title in Wordpress

I am trying to change the color of the first word in the widget title in wordpress. I am using WP v.3.7.1 and a custom child theme that I created off of the twentythirteen theme.
I just need to wrap the first word in a and can style it from there. I tried to add the following code to the function.php but it only works for one of the three widgets that I have. I have tried other widgets and it doesn't work either.
add_filter ('widget_title', 'wpzoom_fix_widgets');
function wpzoom_fix_widgets($old_title) {
$title = explode(" ", $old_title,2);
$titleNew = "<span>$title[0]</span> $title[1]";
return $titleNew;
}
Any suggestions?
Thank you!
Take a look at the first answer on WordPress Answsers, it looks close to what you are looking for:
add_filter('widget_title', my_title);
function my_title($title) {
// Cut the title to 2 parts
$title_parts = explode(' ', $title, 2);
// Throw first word inside a span
$title = '<span class="my_class">'.$title_parts[0].'</span>';
// Add the remaining words if any
if(isset($title_parts[1]))
$title .= ' '.$title_parts[1];
return $title;
}
Good luck :)

Single Page Navigation Menu Dynamically Generated

hHi all! I have posted this question on the WP support forums, but the community doesn't seem to be as active as stack's, so I am taking a chance here!
I am looking for a plugin that would automatically create a navigation menu (through the use of shortcodes for example) on a long single page documentation page.
The long page is divided into sections. I can imagine using a shortcode at the beginning of every section, and this will create a menu that would be displayed in a sidebar for example (called through a second shortcode perhaps, or a widget)
Any thoughts? Advice?
Thanks!
Use [section]Section Title[/section] shortcodes, then [section_navigation] where you want the navigation links output.
This works, but with a massive caveat -- that [section_navigation] needs to be in your post/page after the other [section] shortcodes... otherwise it generates an empty list.
You should be ok to use it in your theme by putting <?php echo do_shortcode("[section_navigation]");?> in sidebar.php. It will work as long as get_sidebar() is after the_content() in your theme templates (it usually is).
This to go in functions.php
$whit_sections = "";
// [section]My Section Title[/section]
function whit_section_shortcode( $atts, $title = null ) {
// $content is the title you have between your [section] and [/section]
$id = urlencode(strip_tags($title));
// strip_tags removes any formatting (like <em> etc) from the title.
// Then urlencode replaces spaces and so on.
global $whit_sections;
$whit_sections .= '<li>'.$title.'</li>';
return '<span id="'.$id.'">'.$title.'</span>';
}
add_shortcode('section', 'whit_section_shortcode');
// [section_navigation]
function whit_section_navigation_shortcode( $atts, $title = null ) {
global $whit_sections;
return '<ul class="section-navigation">'.$whit_sections.'</ul>';
}
add_shortcode('section_navigation', 'whit_section_navigation_shortcode');

Is it possible to *optionally* override a theme in Drupal 6?

I want to override the theming of only one (custom) menu. I can do this with phptemplate_menu_tree() but - of course - it overrides the rendering of all menus.
I've tried returning FALSE (an obvious technique IMO) if the menu is not the specific one I want to override - but this doesn't cause the overridden theme function to be called.
My only alternative (when the menu is anything other than the specific one) is to call the overridden function from within phptemplate_menu_tree() - but this seems to defeat the whole point of the override system, since the default rendering function will be hard-coded therein.
I hope the explanation is clear, and any help is greatly appreciated - tks.
UPDATE
For the sake of future reference, I'll explain how I solved this.
First off, the menu rendering starts with this function in menu.module:
function menu_block($op = 'list', $delta = 0) {
$menus = menu_get_menus();
// The Navigation menu is handled by the user module.
unset($menus['navigation']);
if ($op == 'list') {
$blocks = array();
foreach ($menus as $name => $title) {
// Default "Navigation" block is handled by user.module.
$blocks[$name]['info'] = check_plain($title);
// Menu blocks can't be cached because each menu item can have
// a custom access callback. menu.inc manages its own caching.
$blocks[$name]['cache'] = BLOCK_NO_CACHE;
}
return $blocks;
}
else if ($op == 'view') {
$data['subject'] = check_plain($menus[$delta]);
$data['content'] = menu_tree($delta);
return $data;
}
}
If you only want to override how individual item (links) are rendered then you can use the theme system (there are loads of references on how do this) - but if you want complete control on how the entire menu tree is rendered (for example, wrapping the output in nested DIVs so it can be centred on the page) then there is no way to override menu_block().
Therefore, I removed the menu I wanted to render differently from the administer blocks page (site building->blocks) and rendered the menu directly in my page.tpl.php using code something like this: (angle brackets removed)
$m = menu_tree_page_data('my-menu-id');
$o = "DIV";
foreach($m as $k => $v){
$o .= "SPAN {$v['link']['title']} /SPAN";
}
$o .= "/DIV";
echo $o;
I hope this helps.
I've had mixed success doing template.php menu overrides to force CSS classes and ids or HTML into the output.
You could make use of Block Theme when enabling the menu as a block, but I've never tried it.
http://drupal.org/project/blocktheme
If you want to tackle the template way, here are the zen menu override funcitons...
function zen_menu_item_link($link) {
if (empty($link['localized_options'])) {
$link['localized_options'] = array();
}
// If an item is a LOCAL TASK, render it as a tab
if ($link['type'] & MENU_IS_LOCAL_TASK) {
$link['title'] = '<span class="tab">' . check_plain($link['title']) . '</span>';
$link['localized_options']['html'] = TRUE;
}
return l($link['title'], $link['href'], $link['localized_options']);
}
function zen_menu_local_tasks() {
$output = '';
if ($primary = menu_primary_local_tasks()) {
$output .= '<ul class="tabs primary clear-block">' . $primary . '</ul>';
}
if ($secondary = menu_secondary_local_tasks()) {
$output .= '<ul class="tabs secondary clear-block">' . $secondary . '</ul>';
}
return $output;
}
You could use sections module, or look at how it switches theme for certain menu-items.
what I did was register a new theme function in my template.php called primary_links (because I wanted to only customize this menu in certain way) created the function mytheme_primary_links() in my template.php refreshed the cache so Drupal would add my theme function to the system then changed theme function on primary_links from links to my custom theme function primary_links - this allows me to customize only this 1 menu - could you do this and hook into where ever to change the theme function being called for your links?
Chris

Drupal theme preprocess function - primary links

I recently wrote a theme function to add a class to my primary links that works great. I then wrote some css classes to style these links with custom background images. Worked out great. Now comes the problem, the link text for the primary links still is displayed. Normally this isn't a problem as I would just wrap the in a with a custom "hide" class. For example:
<span class="hide">Link Text</span>
So my question is how can I loop through the primary links and wrap the text w/ a <span> like my example? Here's my theme function that I used to add my classes.
function zkc_preprocess_page(&$vars, $hook) {
// Make a shortcut for the primary links variables
$primary_links = $vars['primary_links'];
// Loop thru the menu, adding a new class for CSS selectors
$i = 1;
foreach ($primary_links as $link => $attributes){
// Append the new class to existing classes for each menu item
$class = $attributes['attributes']['class'] . " item-$i";
// Add revised classes back to the primary links temp variable
$primary_links[$link]['$attributes']['class'] = $class;
$i++;
} // end the foreach loop
// reset the variable to contain the new markup
$vars['primary_links'] = $primary_links;
}
Is jQuery an option?
Try something like this:
$(document).ready(function(){
$('#primary li a')
.wrapInner('<span class="hide">' + '</span>');
});
EDIT:
Or if you want to go Drupal, put this guy in your foreach loop:
$link['title'] = '<span class="hide">' . check_plain($link['title']) . '</span>';
If all you want is to hide the link text, why don't you just use something like text-indent: -9999px;?
The correct methods for altering the output of the menu links can be done at the theming layer. You were on the right path with the preprocessing hook use, but there is a little more to it.
Refer to this for more information:
http://drupal.org/node/352924#comment-1189890
http://api.drupal.org/api/function/theme_links/6
Typo?
$primary_links[$link]['$attributes']['class'] = $class;
Should read;
$primary_links[$link]['attributes']['class'] = $class;

How to alter a MENU_LOCAL_TASK tab menu in Drupal

I have built a tabbed menu in my custom Drupal 6 module. I want to position an html dropdown list to the right of the tabbed menu at the top of my module page. The list will fire some ajax events on change e.g. changing the LIMIT clause on SQL query by specifying 10,20,50,100 results. How can I achieve this in Drupal without hacking templates?
Thanks,
You could do this by overriding theme_menu_local_tasks() within your theme:
function yourTheme_menu_local_tasks() {
// Prepare empty dropdown to allow for unconditional addition to output below
$dropdown = '';
// Check if the dropdown should be added to this menu
$inject_dropdown = TRUE; // TODO: Add checking logic according to your needs, e.g. by inspecting the path via arg()
// Injection wanted?
if ($inject_dropdown) {
// Yes, build the dropdown using Forms API
$select = array(
'#type' => 'select',
'#title' => t('Number of results:'),
'#options' => array('10', '20', '50', '100'),
);
// Wrap rendered select in <li> tag to fit within the rest of the tabs list
$dropdown = '<li>' . drupal_render($select) . '</li>';
}
// NOTE: The following is just a copy of the default theme_menu_local_tasks(),
// with the addition of the (possibly empty) $dropdown variable output
$output = '';
if ($primary = menu_primary_local_tasks()) {
$output .= "<ul class=\"tabs primary\">\n". $primary . $dropdown . "</ul>\n";
}
if ($secondary = menu_secondary_local_tasks()) {
$output .= "<ul class=\"tabs secondary\">\n". $secondary ."</ul>\n";
}
return $output;
}
(NOTE: Untested code - potential typos)
As you are referring to code to put in a module, then the module should implement hook_theme_registry_alter(), which would allow the module to override the function theme_menu_local_tasks(). The module should store the value of the previous callback, so that it could still call it in the case the page it not one that it should change.
Implementing a hook in the module allows you to have the normal menu tabs, once the module has been disabled; altering the current theme would require you to change it back when you want the functionality anymore, and if you are using a theme made from another person you should change the theme all time you download a new version. If you are using more than one theme, then you should make the change to each used theme.
In general, a modification to a theme that is required from a module should be done inside a module.

Resources