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)
Related
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;
}
I created a header widget. I used this code:
First, I placed this code into Functions.php
function wpb_widgets_init() {
register_sidebar( array(
'name' => 'Header Widget',
'id' => 'header-widget',
'before_widget' => '<div class="hw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="hw-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'wpb_widgets_init' );
Then I added this code into header.php
<?php
if ( is_active_sidebar( 'header-widget' ) ) : ?>
<div id="header-widget-area" class="hw-widget widget-area" role="complementary">
<?php dynamic_sidebar( 'header-widget' ); ?>
</div>
<?php endif; ?>
Now my width of the widget seems to be smaller than my container width. I'd like to change that.
I tried using this code:
.header-widget {
clear: both;
margin: 0 auto;
width: 1200px;
}
But it does not seem to do anything. What am I doing wrong?
There is no class named header-widget in front end. header-widget is an ID of widget in backend. If you want to write CSS for your widget in front end then you can use header-widget-area or hw-widget widget-area as below. I tried and it worked for me in localhost.
#header-widget-area {
clear: both;
margin: 0 auto;
width: 1200px;
}
or
.header-widget {
clear: both;
margin: 0 auto;
width: 1200px;
}
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');
I'm using the below code to make wordpress search only by product titles. However, the woocommerce "Filter by Attributes" widget still shows filters as if the search was done on body text too.
So for example if I search "face" the results that show up all have "face" in the title but the Filter By Attribute widget will still show Chocolate as an attribute because there is a chocolate bar that has a description "Face it, we all love chocolate"
Then if you click the "Chocolate" filter, it will show no results, because the search is only showing results with "face" in the title.
I don't even know where to begin looking to change the behaviour of the filter by attributes widget.
// Search titles only
function __search_by_title_only( $search, $wp_query )
{
global $wpdb;
if(empty($search)) {
return $search; // skip processing - no search term in query
}
$q = $wp_query->query_vars;
$n = !empty($q['exact']) ? '' : '%';
$search =
$searchand = '';
foreach ((array)$q['search_terms'] as $term) {
$term = esc_sql($wpdb->esc_like($term));
$search .= "{$searchand}($wpdb->posts.post_title LIKE '{$n}{$term}{$n}')";
$searchand = ' AND ';
}
if (!empty($search)) {
$search = " AND ({$search}) ";
if (!is_user_logged_in())
$search .= " AND ($wpdb->posts.post_password = '') ";
}
return $search;
}
add_filter('posts_search', '__search_by_title_only', 500, 2);
I've cobbled together my own filter that plays nice with the above search (only the titles) and doesn't show any Brands that have items that don't have the keyword in the title. My only issue now is figuring out how to get the count of items.
<?php
$searchterm = htmlentities($_GET["s"]);
$filter_brand = htmlentities($_GET["filter_brand"]);
$current = $_SERVER['REQUEST_URI'];
$site_url = home_url();
$args = array(
'post_type' => 'product',
'posts_per_page' => -1,
'order' => 'ASC',
'orderby' => 'title',
's' => $searchterm
);
// The Query
$the_query = new WP_Query( $args );
if( $the_query->have_posts() ) :
echo'<div id="woocommerce_layered_nav-3" class="widget woocommerce widget_layered_nav woocommerce-widget-layered-nav">
<ul class="woocommerce-widget-layered-nav-list">';
$unique_singler = array();
while ( $the_query->have_posts() ) : $the_query->the_post();
$brand_terms = get_the_terms( $post, 'pa_brand' );
$singler = array_values($brand_terms)[0];
$name = $singler->name;
$name_string = strtolower($name);
$name_slug = str_replace(" ","-",$name_string);
// only create option if city hasn't been added yet
if( ! in_array( $name, $unique_singler ) ) :
// add city to array so it doesn't repeat
$unique_singler[] = $name;
;?>
<li class="woocommerce-widget-layered-nav-list__item wc-layered-nav-term <?php if (!($filter_brand == $name_slug) && !empty($filter_brand)) { echo 'hidden'; }?>">
<?php echo '<a class="remover ';
if ($filter_brand == $name_slug) { echo 'shown'; }
echo '" href="'.$site_url.'/?s='.$searchterm.'&tags=1&ixwps=1&post_type=product"><i class="fas fa-times"></i></a>';
?><?php
echo '<a class="dup" href="'.$current.'&filter_brand='.$name_slug.'">'.$name.'</a> <span class="count">(' .count($XXXXXXX). ')</span>';
?></li>
<?php
endif;?>
<?php endwhile;?>
</ul>
</div>
<?php else :?>
<p>Nothing to see</p>
<?php endif; ?>
<style>
li.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term a.remover {
display:none;
}
li.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term a.remover.shown {
display:inline-block;
}
li.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term.hidden
{
display:none;
}
.x-sidebar .widget ul li {
border-top: 1px solid rgba(0,0,0,0.085) !important;
}
ul.woocommerce-widget-layered-nav-list
{
border-top: 1px solid rgba(0,0,0,0.085) !important;
border-bottom: 1px solid rgba(0,0,0,0.085) !important;
}
.woocommerce-widget-layered-nav-list, li.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term {
margin-left:0 !important;
}
.x-sidebar .widget ul li a {
padding-top: 8px;
padding-bottom: 8px;
}
div#woocommerce_layered_nav-3 {
margin: 0;
}
a.remover.shown i {
text-decoration: underline !important;
margin-right:0.5em;
}
</style>
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;
}