I just love Ryu theme for WordPress. It is a modern, white, minimal yet elegant theme.
The one thing I am not fond of about Ryu is the archive page. I would prefer if it had a grid-based layout (using masonry, for instance). For instance, something like the Gridly theme.
So I will be teaching you how make this posible. If you don’t need so many explanations and are only interested in CSS+markup, you can just read this.
Include masonry and jQuery (if not included) in /wp-content/themes/ryu-wpcom (you can also link to them in http://ajax.googleapis.com/ajax/libs/jquery site)
Then edit /wp-content/themes/ryu-wpcom/functions.php file and add these lines after the <?php tag.
The most important function is the first one. The necessary javascript files are included (jquery.min.js will be linked to google’s website and jquery.masonry.min.js will be loaded from the js folder in the theme, /wp-content/themes/ryu-wpcom/js/). Note that there is also this /js/functions.js file which contents will be defined later.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | /* functions.php, just after php code starts */ // Load jQuery if ( !function_exists('core_mods') ) { function core_mods() { if ( !is_admin() ) { wp_deregister_script('jquery'); wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js")); wp_register_script('jquery.masonry', (get_template_directory_uri()."/js/jquery.masonry.min.js"),'jquery',false,true); wp_register_script('gridly.functions', (get_template_directory_uri()."/js/functions.js"),'jquery.masonry',false,true); wp_enqueue_script('jquery'); wp_enqueue_script('jquery.masonry'); wp_enqueue_script('gridly.functions'); } } core_mods(); } // Gridly post thumbnails add_theme_support( 'post-thumbnails' ); add_image_size('summary-image', 310, 9999); add_image_size('detail-image', 770, 9999); // hide blank excerpts function custom_excerpt_length( $length ) { return 0; } add_filter( 'excerpt_length', 'custom_excerpt_length', 999 ); function new_excerpt_more($more) { global $post; return ''; } add_filter('excerpt_more', 'new_excerpt_more'); |
Now lets create the referenced /js/functions.js file with this contents (first lines are the ones you can find in gridly theme, so just pay attention to last part, lines 57-61, which is the code we just included):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | // this is /js/functions.js (should be placed in your theme's folder, as in /wp-content/themes/ryu-wpcom/js/functions.js) // masonry code $(document).ready(function() { $('#post-area').masonry({ // options itemSelector : '.post', // options... isAnimated: true, animationOptions: { duration: 400, easing: 'linear', queue: false } }); }); // hover code for index templates $(document).ready(function() { $('#post-area .image').hover( function() { $(this).stop().fadeTo(300, 0.8); }, function() { $(this).fadeTo(300, 1.0); } ); }); // comment form values $(document).ready(function(){ $("#comment-form input").focus(function () { var origval = $(this).val(); $(this).val(""); //console.log(origval); $("#comment-form input").blur(function () { if($(this).val().length === 0 ) { $(this).val(origval); origval = null; }else{ origval = null; }; }); }); }); // clear text area $('textarea.comment-input').focus(function() { $(this).val(''); }); // mi llamada "a mano" a masonry $(document).ready(function() { $('#masonry-wrapper').masonry({ singleMode: true, }); }); |
Now, two options:
1) If we want all kind of post archives (no matter which category) to be displayed with the grid layout: modify archive.php (/wp-content/themes/ryu-wpcom/archive.php)
2) If we want only some kind of post archives (specific category) to be displayed with the grid layout, and every other kind of post archive displayed with the theme native’s archive.php, then create a category- file…
I am using the second option. Archive from posts asigned to category ID=3 (named “producto“) will be displayed using masonry-grid-layout and every other archive will be displayed using theme’s native archive layout. So I create a new category-3.php file containing:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | <?php /** * The template for displaying Archive pages of posts asigned to category ID=3. * * Learn more: http://codex.wordpress.org/Template_Hierarchy * http://www.leccionespracticas.com/informatica-web/wordpress/wordpress-custom-archive-specific-category-solved/ * * @package Ryu */ get_header(); ?> <section id="primary" class="content-area"> <div id="content" class="site-content" role="main"> <?php if ( have_posts() ) : ?> <header class="page-header" style="display:none;> <div class="wrap"> <h1 class="page-title""> <?php if ( is_category() ) : printf( __( 'Category Archives: %s', 'ryu' ), '<span>' . single_cat_title( '', false ) . '</span>' ); elseif ( is_tag() ) : printf( __( 'Tag Archives: %s', 'ryu' ), '<span>' . single_tag_title( '', false ) . '</span>' ); elseif ( is_author() ) : the_post(); printf( __( 'Author Archives: %s', 'ryu' ), '<span class="vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '" title="' . esc_attr( get_the_author() ) . '" rel="me">' . get_the_author() . '</a></span>' ); rewind_posts(); elseif ( is_day() ) : printf( __( 'Daily Archives: %s', 'ryu' ), '<span>' . get_the_date() . '</span>' ); elseif ( is_month() ) : printf( __( 'Monthly Archives: %s', 'ryu' ), '<span>' . get_the_date( 'F Y' ) . '</span>' ); elseif ( is_year() ) : printf( __( 'Yearly Archives: %s', 'ryu' ), '<span>' . get_the_date( 'Y' ) . '</span>' ); elseif ( is_tax( 'post_format', 'post-format-aside' ) ) : _e( 'Asides', 'ryu' ); elseif ( is_tax( 'post_format', 'post-format-image' ) ) : _e( 'Images', 'ryu'); elseif ( is_tax( 'post_format', 'post-format-video' ) ) : _e( 'Videos', 'ryu' ); elseif ( is_tax( 'post_format', 'post-format-quote' ) ) : _e( 'Quotes', 'ryu' ); elseif ( is_tax( 'post_format', 'post-format-link' ) ) : _e( 'Links', 'ryu' ); else : _e( 'Archives', 'ryu' ); endif; ?> </h1> <?php // Show an optional term description. $term_description = term_description(); if ( ! empty( $term_description ) ) : printf( '<div class="taxonomy-description">%s</div>', $term_description ); endif; ?> </div> </header><!-- .page-header --> <?php /* Start the Loop */ ?> <div id="masonry-wrapper"> <?php while ( have_posts() ) : the_post(); ?> <?php /* Include the Post-Format-specific template for the content. * If you want to overload this in a child theme then include a file * called content-___.php (where ___ is the Post Format name) and that will be used instead. */ get_template_part( 'content', 'producto' ); ?> <?php endwhile; ?> </div><!-- del masonry-wrapper --> <div class="clear"></div> <?php ryu_content_nav( 'nav-below' ); ?> <?php else : ?> <?php get_template_part( 'no-results', 'archive' ); ?> <?php endif; ?> </div><!-- #content --> </section><!-- #primary --> <?php get_footer(); ?> |
Pay attention to lines 73-84 and specially to line 81, in which we call get_template_part(). This call makes the need for creating a new content-producto.php file, containing:
<?php /** * @package Ryu * this is content-producto.php */ ?> <div id="post-<?php the_ID(); ?>" class="boxy"> <?php if ( has_post_thumbnail() ) { ?> <div class="gridly-image"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'summary-image' ); ?></a></div> <?php } ?> <div class="gridly-copy"><h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <?php the_excerpt(); ?> </div> </div> |
And then just edit the style.css file to add some CSS rules (in my case, 4 column masonry-grid):
/* el contenedor de masonry ocupará el 95% del área y dejará un margen del 2.5% */ #masonry-wrapper { margin-bottom: 2.5%; margin-left: 2.5%; margin-top: 2.5%; width: 95%; } /* en una "línea" del contenedor habrá 4 posts, cada uno ocupando el 24.8% y un margen por la derecha de 0.1% */ #masonry-wrapper .boxy{ width: 24.8%; margin-right: 0.1%; margin-bottom: 0.1%; } |
You can also download a full example of the theme (not depurated, just a project I am currently doing) here Ryu-theme-with-Grid-Layout
The post WordPress: adding masonry grid layout to Ryu theme [SOLVED] appeared first on Lecciones Prácticas.