I've been fiddling around with drupal theming quite succesfully (or at least, that's what i think), but when I tried to inject css coding to the primary links menu to customize it as i generally do via html+css, i hit a wall.
I have been able to apply css styles to divs, links and text, but I would like to customize the primary (and secondary) links menus much more, perhaps with some css sprite menu techniques, but while remaining drupal-compliant and using as much of drupal's own php in the process. or if i really have to rewrite some code, i don't mind, though i am not quite the programmer yet.
i have been around several sites but i haven't anything particularly useful, so if anyone can point me to the right direction, i will be quite grateful.
thanx in advance.
You can add a id-like class for each menu item - add this function in your template.php
function mythemename_menu_item_link($link) {
if (empty($link['localized_options'])) {
$link['localized_options'] = array();
}
// LOOK HERE
// add a key for main menu items, so we can theme each item in a different way
// add this class only for a specific menu
if ($link['menu_name'] == 'menu-menu-mymenu') {
if ($link['localized_options']['attributes']['class']) {
$link['localized_options']['attributes']['class'] .= ' menu-'. $link['mlid'];
}
else {
$link['localized_options']['attributes']['class'] = 'menu-'. $link['mlid'];
}
}
return l($link['title'], $link['href'], $link['localized_options']);
}
This code can be cleaner, but i've added more lines so you can read it better.
if I understand your question correctly you will like to add a custom class/id to you menu . This can be done by overriding the theme_menu_tree for a given menu. I do this for my main menu by adding the following to my template.php file:
function THEMENAME_menu_tree__main_menu($variables){
return '<ul class="menu main-menu">' . $variables['tree'] . '</ul>';
}
hope this helps.
You should also have a look at the themer module, which gives you suggestion for template functions and more.
cheers,
Jørgen
Related
I am finding people are choosing Squarespace etc simply because the backend menu is less confusing. I love WordPress and would like to simplify the backend without a plugin.
I am starting by trying to remove icons and SVG's added by plugins. I can remove Woocommerce for example by this code I found
add_action("admin_menu", function () {
foreach ($GLOBALS["menu"] as $position => $tab) {
if ("woocommerce" === $tab["2"]) {
$GLOBALS["menu"][$position][6] = "";
break;
}
}
});
It's not ideal, and l'd like to use code to remove them in a cleaner fashion, I am aware there are plugins that do it which makes me sure that it can be done programmatically but my experience precludes me from knowing how.
While this works for Woocommerce, I'd like to remove them all as whilst I'm sure at some stage it was trendy or cute it would be nice if it was optional, I know that's a WordPress decision, but for now does anyone have a work around?
I tried adding page classes via Appearance => Menus => Screen Options => CSS Classes, but when I update my pages the classes don't show up.
I tried with another theme, it works, so my problem is theme-related. I didn't develop this theme, I took it back from another developer. Can someone explain me what I should look for in the code to make it back to normal?
Thank you for the help.
It could be a couple of things, where to look first.
Look for some standard functions are in the templates file such as body_class(), post_class(). As it print standard Wordpress used class within the context it needs to.
If its more menu related look for add_filters() within the functions.php filters that allow css to be added or removed such as.
add_filter('nav_menu_css_class' , 'some_function_called' , 10 , 2);
function some_function_called($classes, $item){
if(is_single() && $item->title == "Blog"){ //Notice you can change the conditional from is_single() and $item->title
$classes[] = "special-class";
}
return $classes;
}
Best of luck.
For each node preview, I want to have little flag icons at the top representing the available translations. I have seen the language switcher code, but it outputs all the languages all the time. That is annoying because people will click their language and then find that the page is only available in English anyway (I have a site with many articles in a great variety of languages). I have seen this done though. I'm relatively new to Drupal programming. Can anyone give me a pointer?
Thanks!
Figured it out by myself, and noting it here because I know I'm not the only one with this issue.
The template I'm working off is called scaccarium, so I went to /themes/scaccarium/template.php and added the following function:
function scaccarium_preprocess_node(&$vars) {
$node = $vars['node'];
$translationlinks = array();
// Move translation links into separate variable
foreach ($node->links as $key => $value) {
if ($value['attributes']['class'] == 'translation-link') {
$translationlinks[$key] = $value;
// unset($vars['node']->links[$key]);
}
}
$vars['translationlinks'] = theme('links', $translationlinks, array('class' => 'links translationlinks inline'));
}
If your template is called something else, you should obviously go to a different folder and also change the first word of the function name. And if your theme comes with an existing _preprocess_node function, carefully modify it.
Then, I went to my template's node.tpl.php and I added
<?php if ($translationlinks) {
print $translationlinks;
} ?>
next to the title.
Then I had to clear the Drupal cache (even though caching was disabled!) in Performance > Caching in order to get this to work.
Done!
...
To add language links at the top of full nodes, I had to add another "print $translationlinks" at a different place in node.tpl.php as well, as the h3 title thing was just for node previews. Then, to remove the redundant language links at the bottom of full nodes, I tried that unset line that you see commented out in template.php - I found that it had no effect even though another website had recommended it. So what I ended up doing was using CSS for this, adding the following to my template's CSS file:
.node-links .translation-link {
display: none;
}
I hope that my experience will help someone else with the same problem.
Trying to modify the menu in the dashboard a bit.
I'm trying to remove the toggle option everywhere it's present, and find someway to force the menus to always be expanded, is this possible? (toggle button: http://dl.dropbox.com/u/3618143/toggle.png)
Also want to remove the minimize option (which lets you only show icons in the menu bar). I've been able to remove the actual icon, but the functionality is still there (invisible link). So removing the actual image is not the problem, I've managed to remove that, the functionality however is still there.
(http://dl.dropbox.com/u/3618143/minimize.png)
Thanks in advance
Have the same need: remove the "un/fold" functionality from the WP admin menu bar, to remove clutter, but without tinkering with the source file.
I found out in wp-admin/menu.php that the separators are stored in index 4,59,99.
Here is the function to add to your functions.php
function pxln_remove_menu_items() {
global $menu;
//an array with menus to remove (use their title)
$restricted = array(__('Posts'),__('Links'), __('Comments'), __('Media'), __('Separator'));
// keys of the unfolders
unset($menu[4]);
unset($menu[59]);
unset($menu[99]);
end ($menu);
while (prev($menu)){
$value = explode(' ',$menu[key($menu)][0]);
if(in_array($value[0] != NULL?$value[0]:"" , $restricted)) {
unset($menu[key($menu)]);
}
}
}
add_action('admin_menu', 'pxln_remove_menu_items');
I don't know where exactly the php file to edit it.
But you can use Firebug from Firefox extension, and find the html code to render the toggle option or separator then delete it.
Example: For separator html code is like this:
<li class="wp-menu-separator"><br></li>
Wordpress use cookies to store menu setting, you need to find it and set it manually.
New to php and drupal. I set up drupal and trying to customize the zen theme. Also setup Netbeans for debuggin. Everything is fine, but the menu variables are not filled as expected.
In page.tpl.php, there is a condition, <?php if ($primary_links || $navigation): ?> , which prints main menu if evaluates true. I get primary_links empty, so the menu doesn't print. According to the css provided by the zen theme, below ids should be used for customization.
/*
* Primary and Secondary menu links
*/
#main-menu {
}
#secondary-menu {
}
I may add style elements looking through firebug, but the above id may be the right place to do it. So, why primary link variable is empty for me?
thanks.
The first thing that comes to mind is that, maybe, you haven't assigned anything to the primary links list. Have you?