WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve - Integrate jQuery Masonry (6 posts)

  1. Matija80
    Member
    Posted 1 year ago #

    Hi,

    I'm new to WordPress and looking for a way to integrate Masonry into my homepage. The goal is to give a clean Twenty Twelve child theme a Masonry index page. The rest of the site unaffected. I only managed to enqueue jQuery and call the Masonry JS script which isn't much. Tried several integration instructions with no success. I'm really a beginner at this and I'm not comfortable with PHP. Is there a simple way to make this happen or is it better for me to just go for a theme which already has the Masonry integated?

    Thanks.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Have you looked at the galleries in JetPack?

    http://jetpack.me/support/tiled-galleries/

  3. Matija80
    Member
    Posted 1 year ago #

    Tiled Galleries in Jetpack are nice example. But, if I understand correctly they organize pictures in tiles within the posts and what I'd like to get is one level up in the organization. And that is organizing posts in tiles/boxes within homepage. This theme is nice example: http://wpexplorer.me/demo.php?theme=pronto I'd like to get similar tiles/boxes on my homepage but using the default Twenty Twelve leaving the rest of the theme unchanged.

  4. Matija80
    Member
    Posted 1 year ago #

    I tried adding this to functions.php in my TwentyTwelve child theme:

    <?php
    
    function my_masonry() {
    	if (!is_admin()) {
    		wp_register_script('jquery_masonry', get_template_directory_uri(). '../../twentytwelvechild/js/jquery.masonry.min.js', array('jquery'), '2.0.110526' );
    		wp_enqueue_script('jquery_masonry');
    		add_action('wp_footer', 'add_my_masonry');
    
    		function add_my_masonry() { ?>
    			<script>
    				jQuery(document).ready(function($){
    					$('#content').masonry({
    						itemSelector: '.post',
    					});
    			  	});
    			</script>
    		<?php
    		}
    	}
    }
    
    add_action('init', 'my_masonry');
    
    ?>

    This seems to work.

  5. Mauri
    Member
    Posted 1 year ago #

    Matija80,

    Thanks, this worked great!

  6. warrentier
    Member
    Posted 1 year ago #

    Hi Matija80,

    I've tried your code (with only the script name is different)...

    But nothing gets changed.

    Do we need to change the HTML (e.g. Post content area has ID = content... Posts have class = .... post... ?

    I commented out the get_sidebar PHP... Now... The index page with the posts in reverse chronological order without blank space on the original side bar position ...

    Would you mind sharing what you did to make masonry work for twenty twelve theme?

    Many thanks ...

Topic Closed

This topic has been closed to new replies.

About this Topic