I have wordpress 4.3.1 installed on the intranet with a standard theme TwentyFourteen. When I use Firefox and Chrome to view the website, everything works exactly like it should. However, on IE9 and IE11, the website is only shown in mobile version regardless of client width, the main navi dropdown does not work, and the layout is a bit off. Overall, it looks like something is not loading correct. When I check F12 Developer Tools, it gives Javascript errors for …

I'm currently creating a wordpress theme and so far all my code is working fine (my theme is based on the isotope js gallery), but I would like to transform my normal grids into masonry grids, could you help me? Here's my code: <?php /** * gallery isotope * */ ?> <div class="isotopewrapper customprimary"> <div id="filters" class="button-group"> <button class="gallery-button btn from-top" data-filter="*">All</button> <?php $terms = get_terms("rt-ga-cat"); $count = count($terms); if ( $count > 0 ){ foreach ( $terms as $term …

I have the following code that is supposed to display a masonry grid using bootstrap 4. I've tested the code but the grid will not be displayed correctly on desktop and tablets. On mobile instead there is no problem with the columns. Is there a way to fix this issue? I've loaded the masonry.js script and I've used the snippet that I've found inside the masonry official documentations. <?php $args = array( 'post_type' => 'post', 'category_name' => 'portfolio', 'post_per_page' => …

I'm trying to get the jQuery Masonry plugin to work on a site. I've updated my template files to get the proper classes where the plugin needs them. Then I enqueued my scripts like this: function masonry_scripts() { wp_enqueue_script('masonry'); wp_enqueue_script( 'masonry-script', get_template_directory_uri() . '/assets/js/masonry-script.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'masonry_scripts' ); The masonry script is loading properly, but the masonry-script.js file doesn't. I get the following error in the console: The script from “.../assets/js/masonry-script.js?ver=5.1.1” was loaded even though …

I would like to know if there exists a similar plugin to how this page lists its' products below the main banner: https://www.ycmcnc.com/en Talking about this module: https://imgur.com/a/8IUalCQ It seems to be like a masonry type grid with posts (and featured image of the post) as the blocks. Is Essential Grid capable of this? Would appreciate any help. Thank you.

I'm tearing my hair out over this. I've been tasked with some legacy work on a quite an old site. They have a template for a custom post type called resources. This template has search/filtering functionality which is working as intended, however the masonry/load more functionality is broken. The first set of resources loaded are featured resources. When clicking 'load more' the template executes query, ignoring any featured posts and loading the next batch. It does this fine on first …

Until yesterday, all 10 tiles were showing on the main page on this website. After updating 3-4 pages and adding a "blog" function to them (separated by category), only 3-6 tiles will show at any given time. The theme is Waxom and I am using WP bakery. The tiles link to portfolio items. I've tried changing the order, the max amount of tiles. I've tried filtering through categories and using pages instead. I'm at a loss of what to do. …

I need to create masonry grid containing the latest posts. I created a grid based on https://masonry.desandro.com/ - the grid displays correctly. I am asking for help in creating a wp loop that will display posts in the grid. This is my grid: <!-- grid masonry layout --> <div class="news-wrapper container"> <div class="grid"> <div class="grid-sizer"></div> <div class="gutter-sizer"></div> <div class="grid-item grid-item--width2"></div> <div class="grid-item grid-item--height2"></div> <div class="grid-item grid-item--width2"></div> <div class="grid-item"></div> <div class="grid-item grid-item--width2"></div> <div class="grid-item grid-item--width2"></div> <div class="grid-item grid-item--height2"></div> <div class="grid-item grid-item--height2"></div> …

So I noticed that I'm loading jQuery twice in my WordPress install and when I removed the CDN I added in my footer and just use the jQuery WordPress comes with my masonry stopped working and gave the error: Uncaught TypeError: $(...).masonry is not a function. so then I tried using wp_enqueue_script('masonry'); and wp_enqueue_script('jquery-masonry'); to load WordPress's version of masonry, it still didn't work and also the script file wasn't loaded either. I'm not sure whats going on any help …

I am developing a WordPress Theme using masonry. but it generates following error on index page "Bad element for masonry: undefined" and these two errors on single.php "Bad element for masonry: undefined" "Bad element for masonry: null" Here is the code i am using in my theme jQuery(window).load(function() { // MASSONRY Without jquery var container = document.querySelector('#ms-container'); var msnry = new Masonry( container, { itemSelector: '.ms-item', columnWidth: '.ms-item', }); }); $(function(){ "use strict"; var m = new Masonry($('.grid').get()[0], { itemSelector: …

I am trying to make my Wordpress theme using Isotope plugin. http://isotope.metafizzy.co/ So far, I have such a result after doing that was suggested: I believe that Isotope Masonry should not look like this. I am really puzzled as to what I am doing wrong. Below is my code: functions.php function profolio_scripts () { wp_enqueue_style( 'profolio-style', get_stylesheet_uri() ); wp_enqueue_script("isotope", get_template_directory_uri () . "/js/isotope.pkgd.min.js",array("jquery")); wp_enqueue_script("imagesLoaded",get_template_directory_uri () . "/js/imagesloaded.pkgd.min.js",array("jquery","isotope")); wp_enqueue_script("custom", get_template_directory_uri () . "/js/custom.js", array("jquery","imagesLoaded","isotope")); }; add_action("wp_enqueue_scripts", "profolio_scripts"); Javascript: jQuery(function($){ var container=$("#isotope-container").imagesLoaded(function(){ …

On a page-template, I need to display recent 10 posts. So I tried to use, wp_get_recent_posts, found here in the codex, which I think is an appropriate hook for the purpose.The rest of the code is from my archive.php which displays the post-thumbnails in masonry just fine. I simply would like to achieve the same thing with the recent posts. This is what my code looks like : <?php /* Template Name: Recent Profiles */ get_header(); ?> <h1 class="page-title"><?php the_title(); …

I'm using Masonry on a Wordpress site, to display posts from a custom post type (training_videos). As all the columns are the same width im using the singleMode = true option. The site is a responsive site using Skeleton, hence why they need to be the same width for uniform display purposes. I can get the pots to display fine, and the Masonry aspect is all good, but... ...As the training_videos post type has "more than a few" posts in …

I'm trying to build grid with Infinite scroll and Isotope. I'm using also ImagesLoaded plugin for images which overlaps each other. The problem is I still get images overlap even that I triggered ImagesLoaded for Isotope init and before Isotope relayout. Here is my JavaScript code: jQuery(document).ready(function($){ //var $ = jQuery; // init Isotope var $grid = $('#grid'); $grid.imagesLoaded().done( function() { $grid.isotope({ itemSelector: '.element-item', percentPosition: true, layoutMode: 'masonry', masonry: { columnWidth: '.grid-element-sizer', } }); }); // bind filter button click …

I am using the Baskerville theme which looks great but I haven't been able to replicate the Masonry layout on other pages. It works fine on the Home page but there is no template that facilitates this for other pages. I have tried asking on the offical Baskerville support forum but no one seems to know how to accomplish this. Here is a demo of how the Home page looks

First off I always seem to have trouble getting my JS to work with WP. Currently I need some help figuring out what is going wrong with my javascript and ultimately what I am doing wrong. I have this code: (function($) { // This works on WP site and on CodePen // $("p.click-me").click(function(){ // alert("The paragraph was clicked."); // }); // Masonry Code $('#posts').masonry({ itemSelector : '.item' }); $('#main #posts').masonry({ itemSelector : '.item' }); // This works on CodePen but …

I'm using the plugin Favorites for WordPress to allow visitor's to like products presented with a Masonry grid on the site. On the site I have a page which lets the visitor see all his or hers liked products and it loads them 20 per page with AJAX. I used This guide for my WP_Query and everything works fine as long as the visitor has liked posts, but if there are no liked posts - the page is showing all …

After enqueing scripts as per WP codex and WP Beginner tutorial the site has a Javascript error: Uncaught ReferenceError: imagesLoaded is not defined Many others also have this problem. Link: http://www.wpbeginner.com/wp-themes/how-to-use-masonry-to-add-pinterest-style-post-grid-in-wordpress/

I made a grid blog layout on my wordpress site and i got some help from a friend with some code. It shows 3 posts per row but it wont go past 2 rows so its only showing 6 posts when there is much more. I know I need to expand on my code to allow this but I'm not really sure how. Here is what I have currently for my single.php file <?php get_header(); ?> <div class="page-header"> <div class="container"> …

To be specific: I'm using Masonry to show all posts within a certain category Thumbnail images for each post are shown on the category page in a 3-column format using CSS fluid width columns I need to show the 7th thumbnail image spanning the width of all 3 columns In the past I've added a counter to posts to target the Xth post to apply a class and style accordingly. But is that possibly with Masonry, which is absolutely positioning …