Code show dự án dạng gird wordpress

Code show dự án dạng gird có sử dụng bootstrap.

Đầu tiên các bạn add code này vào header của website.

<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>

Đoạn php + html


<div class="container">

// Must have wp_pagenavi plugin installed. Custom Post Type names can not clash with page names or 404's will occur on /page/#/ (Utilize Custom Rewrite Slug in CPT)
            // The press release loop
            $the_press = new WP_Query(array('post_type' => 'portfolio','posts_per_page' => 9,'paged'=> get_query_var('paged') ));
            // The Loop
            while ($the_press->have_posts()) : $the_press->the_post();
				    <div class="col-sm-4">
				    	<a href="<?php the_permalink(); ?>">
							<img border="0" src="<?php the_post_thumbnail(); ?>
		                <h2><div id="tieu-de"><a href="<?php the_permalink(); ?>"><?php the_title(); ?> </a></div></h2>

            <?php endwhile; ?>
            <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(array('query'=> $the_press));} ?>
			<?php wp_reset_postdata();?>


<?php get_footer(); ?>

Đoạn css của dự án

.container [class*="col-"] img {
    max-width: 100%;
    height: 300px;
    width: 100%;
    padding: 5px;

div#tieu-de {
    font-size: 25px;
    font-weight: bold;
    padding: 10px 5px;

Và thành quả:

Code show dự án dạng gird wordpress
4.7 (93.33%) 9 votes

Bình luận của bạn

Hãy trở thành người đầu tiên bình luận!