I'm just wondering if there's a way to add a class to any navigation lists for things like sub-pages, categories, archives, meta?
I can't find anywhere in my templates to add a class as I guess it's all autogenerated?
My parent theme (html5blank) has a section of code (below) where this is referenced but I think it targets all lists in the sidebar...
if (function_exists('register_sidebar'))
{
// Define Sidebar Widget Area 1
register_sidebar(array(
'name' => __('Widget Area 1', 'html5blank'),
'description' => __('Description for this widget-area...', 'html5blank'),
'id' => 'widget-area-1',
'before_widget' => '<div id="%1$s" class="%2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
// Define Sidebar Widget Area 2
register_sidebar(array(
'name' => __('Widget Area 2', 'html5blank'),
'description' => __('Description for this widget-area...', 'html5blank'),
'id' => 'widget-area-2',
'before_widget' => '<div id="%1$s" class="%2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
}
I realised I can add a class to a parent div by amending the before_widget line to read something like:
'before_widget' => '<div id="%1$s" class="%2$s CUSTOM-CLASS-HERE">',
That does add a class but I still thing it'll be added to any and every widget that's added to the sidebar?
Presumably that will mean any widget that contains a ul will inherit styles applied to that class, which will break the widget's appearance?
Hope someone can help with this :)
You can add classes to menu items (or to menus) from WP Dashboard.
Appearance > Menus > Screen Options
Show Advanced > CSS Classes
Click any menu item to expand and add classes.
In CSS, you can always prefix those the classes with a specific id or class of a widget area, to only apply styles in specific sidebars/widget areas.
if you need to add a class to all your menu items programatically, use the
nav_menu_link_attributes hook:
function add_your_menu_classes( $atts, $item, $args ) {
if( /* condition based on $args or $item (WP_Post object)
* (in case you only want this when a particular condition
* is met). If not, just remove the condition */ ) {
$atts['class'] = 'some-class';
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_your_menu_classes', 10, 3 );
I think if ur widgets, displays a kind of navigation you have to use a custom NavWalker to modify link classes
https://github.com/wp-bootstrap/wp-bootstrap-navwalker
Related
I created a code that displays a link to open a modal window.
The problem is that the text comes out of the window.
When I inspect the code of my page, there is an online style style="max-height: 570px;"
If I add the following code to my style sheet, it works. But is there another solution? I make a mistake in my code :
div#drupal-modal--content[style] {
max-height: none !important;
}
How to remove the online style of modal ?
public function buildPaneForm(array $pane_form, FormStateInterface $form_state, array &$complete_form) {
$store_name = $this->order->getStore()->getName();
$store_id = $this->order->getStoreId();
$pane_form['#attached']['library'][] = 'core/drupal.dialog.ajax';
$attributes = [
'attributes' => [
'class' => 'use-ajax',
'data-dialog-type' => 'modal',
'data-dialog-options' => Json::encode([
'width' => auto,
]),
],
];
The export dropdown and toggle dropdown do not appear on click. I can't see any errors in console of developer tool.
I have used exactly same code in another project and that seems to work, the only difference is in the column set.
<?php
$exportColumns=[
'name',
'email',
'username',
];
echo ExportMenu::widget([
'dataProvider' => $dataProvider,
'columns' =>$exportColumns,
'dropdownOptions' => [
'label' => 'Export All',
'class' => 'btn btn-secondary'
]
]);
?>
I had a similar issue with my own Yii2 project. In my project the dropdown menu worked, but the buttons that appeared were unresponsive and the entire page froze without any console error.
My own mistake was that I required two bootstrap versions in my composer.json (I left in yiisoft/yii2-bootstrap in my case, removed the other).
Double Bootstrap
It contains
Home,
Company,
Help & Support,
Products,
Pricing, and
Sign In.
I use this in the navbar in the header and i will be using it on the footer. In footer it will only display all of the menu items excluding Sign in. What should i do? Im new to wordpress.
<?php
wp_nav_menu( array(
'menu' => 'primarynav',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav')
);
?>
Step 1: login to your cpanel root directory of WordPress then open wp-content -> themes -> your theme -> functions.php
Step 2: In functions.php file create secondary navigation something like this
register_nav_menus( array(
'secondary' => __('Secondary Navigation', 'twentyten')
) );
put your theme name instead of twentyten
Step :3 now open wp-content -> themes -> your theme -> footer.php
where you would like to call footer menu use this code
<?php
wp_nav_menu( array(
'menu' => 'Secondary Navigation',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav')
);
?>
Step:4 log in to your admin end and appearance -> menus -> create new menu -> add the menus exclude sign in and tick the box Secondary Navigation
Thats it
Answer given by Minal Chauhan is correct. That is the one way by which you can do the things that you want.
Another way is keeping the same menu in admin, you just need to add class to "sign in" menu.
Here is the screenshot to describe how you can give class to particular menu item
If you are not able to view CSS Classes field, you have to enable it from screen option which is located in top right corner.
Here is the screenshot how to enable Class option for menu items:
Now, after giving class you need to write following jQuery code:
jQuery(document).ready(function() {
jQuery('footer .test').closest('li').remove(); // here .test is the class which I gave to my menu item. And Footer is parent div element from where I want to apply this jQuery code. // these selectors you may need to change as per your HTML code.
});
Please let me know if you need any further help.
Thanks!
i have form with two pjax. (one inside two) when clicked link in second PJAX send query to server but in field "X-PJAX-Container" write ID first container.
Pjax::begin([
'id' => 'register-form'
]);
...
Pjax::begin([
'id' => 'que'
]);
echo yii\helpers\Html::a('update', ['/portal/que/gr-usl/');
Pjax::end();
...
Pjax::end();
location after click update : /portal/que/gr-usl?_pjax=%23register-form
request header
X-PJAX:true
X-PJAX-Container:#register-form
X-Requested-With:XMLHttpRequest
if set data-pjax for link #que request header not changed.
for all link in inside pjax disabled data-pjax an href change to onclick with function
$.pjax({url: $(el).attr('link'), container: '#pjax-grusl'});
links has code
echo yii\helpers\Html::a('update', null,[
'data-pjax' => 'false',
'link' => \yii\helpers\Url::to(['/portal/que/gr-usl/',
'ids' => $ids,
'filter' => $filter,
'gr' => $gr
]),
'onclick' => 'selGr(this)'
]);
but its should work from box :( i don't understand why click by link don't find first pjax container from dom tree.
I want to use and tags as well as some custom tags (<oembed>) with HTMLPurifier. I used
$config->set('HTML.Allowed','oembed');
to add those tags but it didn't work
I also try this
$def = $config->getHTMLDefinition(true);
$def->addAttribute('a', 'data-id', 'Number');
$def->addElement( 'oembed', //name
'Inline', //content set
'Inline', //allowed children
'I18N', //attribute collection
array( 'src*' => 'URI',
'height*' => 'Pixels',
'width*' => 'Pixels')
);
How can I do that?