How to add class on wp_list_pages children - wordpress

I' am using bootstrap 3. I' don't know if its possible in WordPress to add the class on function wp_list_pages on its children ul. I know it possible with jQuery.
This is what I currently have
<ul class="nav navbar-nav dropdown" role="menu" aria-labelledby="dLabel">
<?php
$args = array(
'authors' => '',
'child_of' => 0,
'date_format' => get_option('date_format'),
'depth' => 2,
'echo' => 1,
'exclude' => '5, 141, 143, 145',
'include' => '',
'link_after' => '',
'link_before' => '',
'post_type' => 'page',
'post_status' => 'publish',
'show_date' => '',
'sort_column' => 'menu_order',
'title_li' => '',
'walker' => ''
);
?>
<?php wp_list_pages( $args ); ?>
</ul>
This is a dropdown menu, so WordPress adds a class children into its ul, but can I add bootstrap class dropdown into that children ul.

You need to create a custom walker to change the child <ul> class. There's no filter inside the default page walker to change the classes that are applied.
You don't need to include so many arguments for wp_list_pages by the way. Only the ones you change.
Here's how I'd do it:
Add to functions.php -
class WPSE_Walker_Page extends Walker_Page {
/**
* #see Walker::start_lvl()
* #since 2.1.0
*
* #param string $output Passed by reference. Used to append additional content.
* #param int $depth Depth of page. Used for padding.
* #param array $args
*/
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class='change-me children'>\n"; // MAKE SURE TO CHANGE CLASSES HERE
}
}
Then replace your existing call to wp_list_pages() with:
<?php
$args = array(
'depth' => 2,
'exclude' => '5, 141, 143, 145',
'sort_column' => 'menu_order',
'title_li' => '',
'walker' => new WPSE_Walker_Page(),
);
wp_list_pages( $args ); ?>

Okay, still didn't find what I was looking for but I found a work around without using jQuery only had to paste in the code of class dropdown-menu into my css style, thats it. Works!
CSS
.primary-menu-container > ul > li.page_item_has_children > ul.children{
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
}

Related

Understrap Theme Sub-Menu Looks Odd

I'm using the Understrap theme on my Wordpress website and trying to implement a submenu
(here www.irricad.com, the "Videos" entry in the "Support" menu).
As you can see, the submenu draws on top of the main menu obscuring some of the entries and preventing proper navigation. I'd like it to display to the right like a 'proper' sub-menu (and preferrably have the little arrow indicating a sub-menu).
The sub-menu has the same class as the main menu item, so I don't know how to make it display differently. Do I need some extra CSS? is there something I've missed in the menu configuration in the back-end? What lets Wordpress know this is a submenu, other than the nesting level, if it doesn't get a distinct class?
I figured it out. I changed my theme header menu depth to 3:
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarNavDropdown',
'menu_class' => 'navbar-nav ml-auto',
'fallback_cb' => 'Understrap_WP_Bootstrap_Navwalker::fallback',
'menu_id' => 'main-menu',
'depth' => 3,
'walker' => new Understrap_WP_Bootstrap_Navwalker(),
)
); ?>
I changed my navwalker.php to this (to add the toggle style to a child with children):
// If item has_children add atts to <a>.
if (isset($args->has_children) && $args->has_children && 0 === $depth && $args->depth !== 1) {
$atts['href'] = '#';
$atts['data-toggle'] = 'dropdown';
$atts['aria-haspopup'] = 'true';
$atts['aria-expanded'] = 'false';
$atts['class'] = 'dropdown-toggle nav-link';
$atts['id'] = 'menu-item-dropdown-'.$item->ID;
} else {
$atts['href'] = !empty($item->url) ? $item->url : '#';
// Items in dropdowns use .dropdown-item instead of .nav-link.
if ($depth > 0) {
if ($args->has_children) {
$atts['class'] = 'dropdown-toggle';
} else {
$atts['class'] = 'dropdown-item';
}
} else {
$atts['class'] = 'nav-link';
}
}
And finally added this style to position the submenu:
.navbar-expand-md .navbar-nav ul.dropdown-menu> li > ul.dropdown-menu {
position: absolute;
top:0px;
border-radius: 0;
left: 100%;
padding-top:0;
padding-bottom:0;
min-width: 150px;
}

WordPress color picker is not working

The color picker is still into the theme Customizing options but when i change color of links and buttons, the color is not change of buttons and links. Please help Thanks for your valuable answers.
//Customize Appearance Options
function myTheme_customize_register( $wp_customize ) {
//setting for link color
$wp_customize->add_setting('mtm_link_color', array(
'default' => '#006ec3',
'transport' => 'refresh',
));
//setting for Button color
$wp_customize->add_setting('mtm_btn_color', array(
'default' => '#006ec3',
'transport' => 'refresh',
));
//Section for standard colors
$wp_customize->add_section('mtm_standard_colors', array(
'title' => __('Standard Colors', 'MyTheme'),
'priority' => 30,
));
//Adding control for links color picker
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize,'mtm_link_color_control', array(
'label' => __('Link Color', 'MyTheme'),
'section' => 'mtm_standard_colors',
'settings' => 'mtm_link_color',
) ) );
//Adding control for buttons color picker
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize,'mtm_btn_color_control', array(
'label' => __('Button Color', 'MyTheme'),
'section' => 'mtm_standard_colors',
'settings' => 'mtm_btn_color',
) ) );
}
add_action('customize_register', 'myTheme_customize_register');
//Output Customize CSS
function myTheme_customize_css() { ?>
<style type="text/css">
a:link,
a:visited
{
color:<?php echo get_theme_mod('mtm_link_color'); ?> ;
}
.site-header nav ul li.current-menu-item a:link,
.site-header nav ul li.current-menu-item a:visited{
background-color: <?php echo get_theme_mod('mtm_link_color'); ?> ;
}
div.search #searchsubmit{
background-color: <?php echo get_theme_mod('mtm_btn_color'); ?> ;
}
</style>
<?php }
add_action('wp_haed', 'myTheme_customize_css');

DIsplay date before title using WP_LIST_PAGES

The default formatting puts the date after the title, I want the date to be displayed first and then the title, I also want to be able to separate them a little bit and make them look nice and lined up with a left justification.
The code is set to display a list of all the subpages of page.
<?php
wp_list_pages( array(
'title_li' => '',
'child_of' => 701,
'show_date' => '1',
) ); ?>
I could not find option to modify it from PHP. So, here is small CSS tweak so that you can get date in the front. Check this:
<style>
#page-list li{
float: left;
display: inline-block;
clear: both;
}
#page-list li a{
float: right;
margin-left: 10px;
}
</style>
<ul id="page-list">
<?php
wp_list_pages( array(
'title_li' => '',
'child_of' => 701,
'show_date' => '1',
) ); ?>
</ul><!-- #page-list -->

Change size of Widget Width in wordpress

I want to have two widgets on my home page next to each other. However I want the first widget to be 650 px, while the other to be 290px. This I am not being able to do.Can someone please help me?
The code I registered for my widgets in my theme functions.php file:
register_sidebar(array(
'name' => 'Slider 1',
'before_widget' => '<div id="%1$s" class="widget-area1 %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'Side Column',
'before_widget' => '<div id="%1$s" class="widget-area2 %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
Then I placed in my home page template file:
<?php
/**
* Template Name: Home Page
*/
get_header();
include('_functions/get-options.php');
?>
<?php /* Widgetised Area */ if(!function_exists('dynamic_sidebar') ||!dynamic_sidebar('Homepage')); ?>
**<div class="widget-area1">
<?php /* Widgetised Area */ if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Slider 1')); ?>
</div>
<?php /* Widgetised Area */ if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Side Column')); ?>**
<?php /* Widgetised Area */ if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage 1')); ?>
<?php /* Widgetised Area */ if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage 2')); ?>
<div class="clear"></div>
<?php get_footer(); ?>
And the css styling I placed in the stylesheet:
div.widget-area1 {
clear: both;
margin: 0 auto;
width: 650px;
}
div.widget-area3 {
clear: both;
margin: 0 auto;
width: 290px;
}
Can you please tell me what I am doing wrong?The theme that I am using is Compare if that might help.
The styles in your question like like they should work, but this is what I see in your stylesheet
#widget-area1 {
clear: both;
margin: 0 auto;
width: 650px;
}
#widget-area2 {
clear: both;
margin: 0 auto;
width: 290px;
}
These rules are in reference to an ID not to a class like you have defined in your question.
Also, you may want to remove the clear:both if you want them to sit side-by-side.

Wordpress pagination url 404 error with WP-PAGINATE

Would anyone happen to know why the WP-PAGINATE plugin for Wordpress Multisite is repeating one site's home url in the links for page numbers and previous/next arrows? The page is a default posts page which uses no custom posts. All pagination links with the plugin are generating a 404. I've tried updating the permalinks.
Here is an example of the URL that it's giving:
http://www.site.com/a_site_name/a_site_name/page/2
It should be:
http://www.site.com/a_site_name/page/2
Thanks.
I know this post is slightly old...but oh well if it helps someone it helps. I tried using the WP Paginate plugin and it didn't do jack diddly for me so I went with this alternative which solved everything for me.
HTML/PHP:
<?php
//Fix homepage pagination
if ( get_query_var('paged') ) { $paged = get_query_var('paged'); } else if ( get_query_var('page') ) {$paged = get_query_var('page'); } else {$paged = 1; }
$temp = $wp_query; // re-sets query
$wp_query = null; // re-sets query
$args = array( 'post_type' => array('assignment', 'student-post'), 'orderby' => 'date', 'order' => 'DESC','posts_per_page' => 15, 'paged' => $paged);
$wp_query = new WP_Query();
$wp_query->query( $args );
while ($wp_query->have_posts()) : $wp_query->the_post();
?>
This allows several things. One it checks if your on home, page, or single and tells the $paged variable how to react in turn. It also allows you to query your pagination with custom post types. Also by not using query_post you get to avoid some really funky stuff that you sometimes get when using it.
Inside your functions.php
function paginate() {
global $wp_query, $wp_rewrite;
$wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
$pagination = array(
'base' => #add_query_arg('page','%#%'),
'format' => '',
'total' => $wp_query->max_num_pages,
'current' => $current,
'show_all' => true,
'type' => 'list',
'next_text' => '»',
'prev_text' => '«'
);
if( $wp_rewrite->using_permalinks() )
if ( is_home() ) {
//fixes index.php weird error on how it displays the pagination URL which causes errors only on index.php
$pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . '?page=%#%/', 'paged' );
} else {
$pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );
}
if( !empty($wp_query->query_vars['s']) )
$pagination['add_args'] = array( 's' => get_query_var( 's' ) );
echo paginate_links( $pagination );
}
This originally came from http://bavotasan.com/2011/simple-pagination-for-wordpress/ with me slightly modding it to get the pagination to work on the homepage.
This, again, does several things. It paginates your page with each page getting it's own link (which I find nice) and it also re-writes the URL to allow for pretty permalinks. The For some reason wordpress gives a 404 page on the index.php so I changed 'page/%#%/', 'paged' ); to '?page=%#%/', 'paged' ); and wrapped it in a conditional for is_home(). This fixed my issues with pagination and pretty permalinks.
Optional Styling of Pagination
ul.page-numbers {
margin: 20px 0 10px;
width: 100%;
padding: 0;
font-size: 12px;
line-height: normal;
clear: both;
float: left;
}
ul.page-numbers li {
float: left;
}
ul.page-numbers a,
ul.page-numbers span {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: -webkit-gradient(linear, left top, left bottom, from(#E4E3E3), to(#FFFFFF));
background: -moz-linear-gradient(top, #E4E3E3, #FFFFFF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E4E3E3', endColorstr='#FFFFFF');
padding: 3px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #ccc;
color: #666;
}
ul.page-numbers a:hover,
ul.page-numbers span.current {
border: 1px solid #666;
color: #444;
}
To fix this, what I did is open up wp-includes/link-template.php and comment out line 1389 replacing it with the following:
//$home_root = preg_quote( trailingslashit( $home_root ), '|' );
$home_root = preg_quote( $home_root, '|' );
(Wordpress version used is 3.3.1)

Resources