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;
}
Related
I have this code that retrieves all images for the active page:
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' =>'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
echo wp_get_attachment_image( $attachment_id, 'thumbnail' );
I need some help to open the images in a lightbox with the post/page title and navigation such as this https://simplelightbox.com/ one.
I am just learning the code so I desperately need some help.
I tried using fancy lightbox plugin but that did not work as the lightbox did not launch. For now I am hiding and showing the images using javascript.
From your code, I've created the following shortcode:
function so_all_images_lightbox() {
$output = '';
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' =>'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
$output .= '<a class="lightboximage" href="'.wp_get_attachment_url($attachment_id).'">';
$output .= wp_get_attachment_image($attachment_id, 'thumbnail');
$output .= '</a>';
}
return $output;
}
add_shortcode('all_images_lightbox','so_all_images_lightbox');
Add [all_images_lightbox] to the site you want the gallery to be on. And it will display the images with a link to the image file.
Then you'll also need a lightbox-container somewhere in your documents (preferably short before the footer to avoid stacking problems):
function so_output_lightbox_container() { ?>
<div id="imagelightbox" class="image-lightbox">
<a id="close-lightbox" title="Close Lightbox" class="close-lightbox"></a>
<div id="imagecontainer"></div>
</div>
<?php }
add_action('get_footer', 'so_output_lightbox_container');
and the styling for it (you could also put this in the customizer css or your child theme css)
function so_output_lightbox_container_css() { ?>
<style>
.image-lightbox {
display: none;
z-index: -1;
background-color: rgba(0,0,0,.90);
width: 0;
height: 0;
position: fixed;
top: 0;
left: 0;
}
.image-lightbox.active {
display: block;
z-index: 99;
width: 100%;
height: 100%;
}
#imagecontainer {
display: flex;
align-items: center;
justify-content: center; height: 100vh;
position: relative;
}
</style>
<?php }
add_action('wp_head', 'so_output_lightbox_container_css');
Finally, you'd need some javascript to load the according images to the lightbox instead of follwing the link:
function so_output_lightbox_container_js() { ?>
<script>
( function() {
lightboxInit = function () {
const lightboximage = document.getElementsByClassName('lightboximage');
const imagelightbox = document.getElementById('imagelightbox');
const imagecontainer = document.getElementById('imagecontainer');
const lightboxbclose = document.getElementById('close-lightbox');
Array.prototype.forEach.call(lightboximage, function (el) {
el.addEventListener('click', function () {
event.preventDefault();
let imgfile = this.getAttribute("href");
imagelightbox.classList.add("active");
imagecontainer.innerHTML = '<img alt="Click to close" src="' + imgfile + '">';
});
});
lightboxbclose.addEventListener('click', function () {
imagelightbox.classList.remove("active");
imagecontainer.style.height = '';
imagecontainer.style.paddingBottom = '';
});
imagelightbox.addEventListener('click', function () {
imagelightbox.classList.remove("active");
});
}
lightboxInit();
} )();
</script>
<?php }
add_action('wp_footer', 'so_output_lightbox_container_js');
Tested by quickly throwing all of it in my functions.php and adding the shortcode to a site: Works. Click anywhere to close the lightbox. The styling of the additional close-button, I'll leave to you ;-)
Update/Edit:
To run the function from a template, just call the function within the template instead of running the shortcode. Add this to the template where needed:
echo so_output_lightbox_container();
You can then remove the line
add_shortcode('all_images_lightbox','so_all_images_lightbox');
of the first code block then, or leave it in place in case you may need the shortcode as well later.
Update 2:
To use an icon as a link, try replacing the first block with:
function so_all_images_lightbox() {
$output = '';
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' =>'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
$output .= '<span class="imgbx"><a class="lightboximage" href="'.wp_get_attachment_url($attachment_id).'">';
$output .= '<i class="fas fa-camera"></i>';
$output .= '</a>';
$output .= wp_get_attachment_image($attachment_id, 'thumbnail').'</span>';
}
return $output;
}
add_shortcode('all_images_lightbox','so_all_images_lightbox');
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');
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 -->
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;
}
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)