So, I am using infinite scroll (http://infiniteajaxscroll.com/docs/getting-started.html).
However when the main content is inside of "mdl-js-layout" the infinite scroll function does not work (shown below)
So, if I remove the mdl-js-layout in the most outer div, then infinite scroll works otherwise it does not work.
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-drawer">
<header class="mdl-layout__header">
Head
</head>
<main class="mdl-layout__content">
<div class="rfp_hide" id="rhm_post_show">
<?php
if ( get_query_var('paged') ) {
$paged = get_query_var('paged');
} elseif ( get_query_var('page') ) {
$paged = get_query_var('page');
} else {
$paged = 1;
}
$args = array(
'paged'=>$paged,
'posts_per_page' => 5,
'orderby' => 'date',
'order' => 'DESC'
);
$loop = new WP_Query( $args );
global $post, $paged;
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="rhm_post_container">
Post
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>
<nav id="rh_nav_below">
<ul>
<li class="rh_nav_previous"><?php previous_posts_link( '« PREV', $loop->max_num_pages) ?></li>
<li class="rh_nav_next"><?php next_posts_link( 'NEXT »', $loop->max_num_pages) ?></li>
</ul>
</nav>
</main>
</div>
<script>
var container = document.querySelector('#rhm_post_show');
var msnry = new Masonry( container, {
// options
itemSelector: '.rhm_post_container',
gutter: 10
});
var ias = $.ias({
container: '#rhm_post_show',
item: '.rhm_post_container',
pagination: '#rh_nav_below',
next: '.rh_nav_next a',
delay: 100
});
ias.on('render', function(items) {
$(items).css({ opacity: 0 });
});
ias.on('rendered', function(items) {
msnry.appended(items);
});
ias.extension(new IASSpinnerExtension());
ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>You reached the end!</em></p></div>'}));
</script>
I asked the developer and got the following response:(https://github.com/google/material-design-lite/issues/1584#issuecomment-139060676)
MDL is targeting static content for now, so use-cases with infinite scroll are not supported by us right now. However, there are people who have made MDL work with dynamic sites and you can probably get valuable help by heading over to StackOverflow and using the material-design-lite tag.
Does anyone what I should try?
Thanks!
I also had some issues with dynamic websites and mdl.
On their website I found the following paragraph about dynamic websites, which helped in my case:
https://getmdl.io/started/index.html#dynamic
Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function.
They also provide an example, how to use the function.
This solved the issue on my side:
Material design locks the main wrappers height to 100%;
.mdl-layout__container .mdl-js-layout
this avoid masonry to keep loading more elements
so in your custom CSS add:
.mdl-layout__container, .mdl-js-layout{
height: auto;
}
Related
I am trying to add custom divs into my index page and I created some page templates, that i was thinking of using as a way to filter out the pages. So basically if the post uses 'Media template' it would be displayed in that div.
But I am struggling in writing the proper php code that would loop trough all the posts and find the post that uses this template.
In the end I want to find a post/page that uses 'Media template' and post it's content in the folowwing div:
<div class="home-media-content col-sm-3 px-1 pb-2">
<div class="embed-responsive embed-responsive-16by9">
<?php
$pages = get_pages();
foreach ($pages as $page) {
echo $page->post_title; //Posting just for the test
echo $page->template; //SHOULD GET THE TEMPLATE and if the template name is 'Media template' display post content
}
?>
</div>
</div>
I am not sure if it is the best way of displaying custom things so any better suggestions are welcome!
Edited to use WP_Query
See below for how I'd do it, using the setup_postdata() and get_page_template() functions. I think you should be able to get this info from the '_wp_page_template' meta for each page if you don't want to setup postdata, but if you're going to be doing a proper loop anyway then the latter is probably easiest.
<div class="home-media-content col-sm-3 px-1 pb-2">
<div class="embed-responsive embed-responsive-16by9">
<?php
$my_query = new WP_Query(
array(
'post_status' => 'publish',
'post_type' => 'page',
)
);
if ( $my_query->have_posts() ) {
while ( $my_query->have_posts() ) {
$my_query->the_post();
the_title(); // Posting just for the test
if ( get_page_template() === 'media-template.php' ) { // This needs to be the file slug rather than template name
do_something();
} else {
do_something_else();
}
}
}
wp_reset_postdata(); // Reset postdata back to normal
?>
</div>
</div>
I'm trying to create a slide out box with 4 localisations shown on maps. Each localisation on one map.
I have created a custom post type with custom post fields lat and lng. I'm getting the custom post fields through
<?php
$args = array(
'post_type'=> 'localisations',
'posts_per_page' => 4,
'orderby' => 'date',
'order' => 'DESC',
);
query_posts($args);
if ( have_posts() ) :
while ( have_posts() ) : the_post();
$meta = get_post_meta( $post->ID, 'real_estate_location_details', true );
?>
In my next step I'm adding to div.mapholder an ID with increment using jQuery
jQuery(function($){
var i=0;
$('.mapholder').each(function(){
i++;
var newID='map'+i;
$(this).attr('id',newID);
$(this).val(i);
});
});
<div id="map-container">
<div class="mapholder"></div>
</div><!-- #map-container -->
and at the end I'm creating the map
function initialize() {
var latVariable = "<?php echo $meta['lat']; ?>";
var lngVariable = "<?php echo $meta['lng']; ?>";
var mapOptions = {
center: {lat: latVariable, lng: lngVariable},
zoom: 5
}
var map = new google.maps.Map(document.getElementById('map'+i), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
the console outputs some errors:
`You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.` - I think its because the increment in `var map new google.maps.Map(document.getElementById('map'+i), mapOptions);` doesn't work, but I don't know how to fix this.
Uncaught SyntaxError: Unexpected token new - Got this one. I was missing `=` between map and new
Could you please help me out whit this?
You have the issues because you are adding Google Api scripts inside of the loop - that is why they are getting loaded so many times and you have the error displayed.
It would be hard to present you with working example without being able to actually run it so please do not treat it as a final working solution but rather as a direction.
First of all you do not need this script which creates the IDs as it doesn't help in your scenario and it can be done easily while running PHP loop.
Second thing would be to change the way the callback is called on window load. By defining the function in the loop you are actually redefining it each time.
Third thing is to extract google API script outside of the loop.
Please find the code in this pastebin.
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5rsZHHAmzP_pOuHGKEUtarn2QideIyUM"></script>
<div id="real-estate-box" class="slideout">
<div class="real-estate-box-wrapper">
<p class="real-estate-box-title">For sale</p>
</div>
<div class="slideout-inner">
<?php
$args = array(
'post_type'=> 'real-estete',
'posts_per_page' => 4,
'orderby' => 'date',
'order' => 'DESC',
);
query_posts($args);
?>
<div class="see-all-real-estate col-xl-12">
<?php echo 'see all'; ?>
</div>
<ul>
<?php
$map_id = 1;
if ( have_posts() ) :
while ( have_posts() ) : the_post();
$meta = get_post_meta( $post->ID, 'real_estate_location_details', true );
?>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var map new google.maps.Map(document.getElementById('map-<?= $map_id ;?>'), {
center: {
lat: "<?= $meta['lat']; ?>",
lng: "<?= $meta['lng']; ?>"
},
zoom: 5
});
});
</script>
<li class="col-xl-3">
<a class="real-estate-title" href="<?php the_permalink() ?>">
<?php the_title(); ?>
</a><!-- .real-estate-title -->
<div id="map-container">
<div class="mapholder" id="map-<?= $map_id ;?>"></div>
</div><!-- #map-container -->
see more
</li><!-- .col-xl-4 -->
<?php
$map_id++;
endwhile; ?>
</ul>
<?php
else:
echo '<p class="no-real-estete">We don\'t have any real estates for sale on the moment</p>';
endif;
?>
</div>
</div>
https://pastebin.com/5Tz9Ueaa
Actually I would strongly recommend going in completely other direction with your code as you will have some issues with that approach.
Nevertheless code form pastebin should work in your case.
I'm creating a wordpress top-down website by sections and i don't know which is the best way to get the pages into different sections.
I also want to take into account the charging performance
<section id="about">
<!-- Content of page -->
</section>
<section id="services">
<!-- Content of page -->
</section>
<section id="contacts">
<!-- Content of page -->
</section>
Thank's
I would use a simple WP_Query instance here, and use the following code:
<?php
// Set the WP_Query arguments
$args = array(
'post_type' => 'page',
// You need to change this to match your post IDs
'post__in' => array( 10, 20, 30 ),
'order_by' => 'post__in',
'order' => 'DESC' // Might need to change this to "ASC"...
);
// Create the page section query
$page_section_query = new WP_Query( $args );
// Simple check...
if( $page_section_query->have_posts() ) :
while( $page_section_query->have_posts() ) :
$page_section_query->the_post();
global $post;
// Print out the section!
?>
<section id="<?php echo esc_attr( $post->post_name ) ?>" <?php post_class( array( esc_attr( 'page-section-' . $post->post_name ) ) ); ?>>
<!-- contents of the page section -->
</section>
<?php
endwhile;
wp_reset_postdata();
endif;
?>
Simple and effective, 1 query is all that this needs. Just keep adding more post IDs if you want more sections.
If you want to avoid using post IDs as an ordering parameter you could use: menu_order instead. And if you would like to avoid using post__in parameter you could add all the pages to a page parent and use the parent post ID and get all the page children for the sections. This would make the solution a little more modular.
Read more about WP_Query here: https://codex.wordpress.org/Class_Reference/
I have a wordpress site, that need to show pages using swipe, I choose to use Jquery Mobile, and I get it working fine. Now, we have 2 languages on site, using wpml plugin. And my Swipe Code works well, except when we use Change language button swipe fails.
Details on issue.
We have only 3 Text Only page in our website, in 2 language. And in Footer we have link to change language. Also client hate to have Ajax page loading, so what I did is I create three Div with data-role=page and put data-next, data-prev as #div-$postid. So the navigation works absolute fine. I put footer outside from data-role=page.
Now, when I click change button in footer, it load the english page [I saw it using Fiddler] and then take first data-role=page from server and replace /slide its content. However since it only pick the first data role, all other english page doesn't get in HTML [it just update DOM and doesn't navigate to english version]. so swipe fails as other english pages are not in dom.
Also, footer is not changing, so what I want is: can we simple force a Link to navigate instead of going swipe way? Jquery Mobile is enforcing swipe on all A tags, I do not want swipe to works anything outside data-role=page.
Hope I make sense.
Edit here is code: [not sure if this code will help at all]
<?php
get_header();
global $post;
$args = array('post_type' => 'mobile_slide','showposts' => '-1', "order" => "DESC");
$the_query = new WP_Query($args);
if($the_query->have_posts()){
while($the_query->have_posts()) { $the_query->the_post();
$prev =get_previous_post();
$next =get_next_post();
if($prev) {
$prev = "#page-" . $prev->ID; //get_permalink($prev->ID);
} else {
$prev='';
}
if($next) {
$next = "#page-".$next->ID; //get_permalink($next->ID);
} else {
$next='';
}
if (has_post_thumbnail( $post->ID ) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'slider_image' ); ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>" style="background-image:url('<?php echo $image[0]; ?>'); background-position:center center; background-color:#000; background-repeat:no-repeat; ">
<?php } else { ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>">
<?php } ?>
<div class="post_box">
<h2><blockquote><?php the_title(); ?></blockquote></h2>
<div class="post_entry">
<?php the_content(); ?>
</div>
</div><!-- post_box -->
</div>
<?php }
} ?>
<?php get_footer(); ?>
This is all I have, except that get_footer use Ul li based list where on LI change based on language variable, to show different images for either language.
To stop Ajax from loading pages/links, add to link anchor data-rel="external" or data-ajax="false". This will load page normally without any transition.
Reference: jQuery Mobile - Links
For those who have similar problem, I fix it by using following:
1) I add a "noswipe" class to A Tag so I can refer it in Jquery
2) I add following code
$(function(){
$(".noswipe").click(function(){
window.location.href= $(this).attr("href");
return false;
});
});
The above code simply enforce to skip the Mobile's parsing and calling and works for my case.
I'm a newbie, to wordpress, stackoverflow and php and am trying to build an original theme in wordpress.
I have set up my main menu under the name 'Standard Menu', which i've specified both in the admin menu panel, functions.php and header.php, but my submenu's are not being generated. I've checked the depth and it's set to three (3). I've googled for a few hours but all solutions that I find have to do with css or html issues (something is generated and it is not showing up correctly) vs. something is not being generated. I've checked my menu and it's named correctly, it has three levels of menu (Parent, Child, Grandchild), but only the parent is generated.
I am using bootstrap, but i don't believe that this is/has anything to do with my CSS, rather its that wordpress isn't outputting the child elements (submenu).
Here is the associative array which is lines 1-10 of my header file:
<?php
// Create associative array
$mainMenu = array( //format parameters for menu(s) in header/sidebars/things
"theme_location" => "Standard Menu", //
"container" => "", //
"menu_class" => "dropdown-menu",
"container_class" => "", // left empty, could be container_id;
"container_id"=> "main_nav",
"depth" => 3 ); //Depth is how many levels of menu - main, child, subchild
?>
Here is the head portion of the header code, lines 54 -79:
<header>
<!--<h1><?php bloginfo("name"); ?></h1>-->
<!--<h1><?php bloginfo("description"); //Descript access tagline ?></h1>-->
<!-- navigation -->
<div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="homelink" href="<?php bloginfo('url'); ?>"><?php bloginfo("name"); ?></a>
<ul class="nav">
<?php if (function_exists('getNavMenu')): ?>
<?php echo getNavMenu('Standard Menu'); ?>
<?php endif; ?>
</ul>
</div>
</div>
</div>
</div><!-- /.navbar-wrapper -->
<div class="clear"><a name="top"></a></div>
</header>
here is the functions file:
<?php
/* Hi Portia - There is a kitty hidden somewhere in this theme - enjoy! */
//register_nav_menu("main_menu", "Main Navigation Menu");
/* How to remove 'tight' coupling in menu dashboard */
// ..._menu for one or menus for more then one
// first name -> used to call menu in script/code
// second name -> used by dashboard
$menuList = array (
//Changed 'Menu' to 'Standard Menu' to match admin menu panel/header
"main_menu" => "Standard Menu", // name based on usability
"util_menu" => "Util Menu: Upper Right", //Named where it appears
"footer_menu" => "Footer Menu: Bottom"
);
register_nav_menus($menuList);
/* =====----- Adds login/logout link to nav -----+++++ */
add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2);
function add_login_logout_link($items, $args) {
ob_start();
wp_loginout('index.php');
$loginoutlink = ob_get_contents();
ob_end_clean();
$items .= '<li class="login" '. $loginoutlink .'</li>';
return $items;
}
/* =====----- LOAD CSS -----+++++ */
//function artisan_load_styles() {
//if (!is_admin()) {
//wp_enqueue_style('main', get_template_directory_uri() . '/style.css');
//wp_enqueue_style('bootstrap', get_template_directory_uri() . '/_css/bootstrap.css');
//wp_enqueue_style('responsive', get_template_directory_uri() . '/_css/bootstrap-responsive');
//wp_enqueue_style('ieSucks', get_template_directory_uri() . '/_css/ieresp.css');
//wp_enqueue_style('base', get_template_directory_uri() . '/_css/base.css');
//}
//}
//add_action('get_header', 'artisan_load_styles');
?>
URL: Wordpress site
What is the getNavMenu() function is? In Wordpress, the function to generate the menu is wp_nav_menu(). With this function, everything is supposed to work out of the box.