I've been trying for hours trying to get this to work. The Masonry js seems to load but I end up getting a single column of my posts on the right. I am using Ebedly for my posts and they show up ok.
Here's my enqueue code
function enqueue_masonry_script() {
wp_enqueue_script( 'jquery-masonry' ); // adds masonry to the theme
}
add_action( 'wp_enqueue_scripts', 'enqueue_masonry_script' );
my css:
.item { width: 25%; }
and my html for the blog:
<?php get_header(); ?>
<div id="content" class="row">
<div class="responsive-title"><h1 class="hobo page-title a">NEWS</h1> </div>
<div id="masonry-wrapper" class="masonry">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="item">
<article <?php post_class(); ?> role="article">
<header>
<?php the_post_thumbnail( 'wpbs-featured' ); ?>
<div class="page-header"><h1 class="h2"><?php the_title(); ?></h1></div>
</header> <!-- end article header -->
<section class="post_content">
<?php the_content( __("Read more »","wpbootstrap") ); ?>
</section> <!-- end article section -->
<footer>
<p class="tags"><?php the_tags('<span class="tags-title">' . __("Tags","wpbootstrap") . ':</span> ', ' ', ''); ?></p>
</footer> <!-- end article footer -->
</article> <!-- end article -->
</div>
<?php if (function_exists('page_navi')) { // if expirimental feature is active ?>
<?php page_navi(); // use the page navi function ?>
<?php } else { // if it is disabled, display regular wp prev & next links ?>
<nav class="wp-prev-next">
<ul class="pager">
<li class="previous"><?php next_posts_link(_e('« Older Entries', "wpbootstrap")) ?></li>
<li class="next"><?php previous_posts_link(_e('Newer Entries »', "wpbootstrap")) ?></li>
</ul>
</nav>
<?php } ?>
<?php else : ?>
<article id="post-not-found">
<header>
<h1><?php _e("Not Found", "wpbootstrap"); ?></h1>
</header>
<section class="post_content">
<p><?php _e("Sorry, but the requested resource was not found on this site.", "wpbootstrap"); ?></p>
</section>
<footer>
</footer>
</article>
</div>
<?php endif; ?>
<!-- end #main -->
You missed out the itemSelector as suggested in masonry documentation. masonry.desandro.com/options.html
To fix this, you may replace your masonry-wrapper div with codes below:
<div id="masonry-wrapper" class="masonry js-masonry"
data-masonry-options='{ "itemSelector": ".item" }'>
There're also other options available like columnWidth where you might want to try it out. Take some time to read the documentation.
Related
I'm trying to implement a dedicated template for any post with a category slug of 'rentals'. There are posts in the database with a category of rentals set up and applied. I've created the template with a standard loop and called it category-rentals.php, saving it in my root folder.
It's just not working. It keeps reverting to single post template (index.php specifically).
My rendered body classes are as such:
post-template-default single single-post postid-278 single-format-standard
Am I missing a step here?
category-rentals.php:
/*
* Rental property template
*/
?>
<?php get_header(); ?>
<div class="jumbotron jumbotron-fluid" style="background-image: url('<?php bloginfo( 'template_url' ); ?>/img/bg-semi-trans.png'), url('<?php bloginfo( 'template_url' ); ?>/img/bg-jumbotron.jpg');">
<div class="container">
<div class="headline text-center animated fadeInUp">
<p><?php wp_title(''); ?></p>
</div>
</div>
</div>
<section>
<div class="container">
<div class="row">
<div class="col-12">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; else : ?>
<p><?php esc_html_e( 'Sorry, no content matched your criteria.' ); ?></p>
<?php endif; ?>
<hr>
← Go Back | Contact Us
</div>
</div>
</div>
</section>
<?php get_footer(); ?>
I'm creating a Wordpress template from scratch and I am already in the process of adding sidebars. But I'm having a few problems with the sidebar positioning/placements.
What I want vs What I have
I'm not sure if I'm doing something wrong with the sidebar.php or with the container blocks.
But here's my css code:
/* Sidebar modules for boxing content */
.sdbrcont {
float: left;
background-color: black;
}
My sidebar.php code:
<div class="sdbrcont">
<?php if ( is_active_sidebar( 'left_sdbr' ) ) : ?>
<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'left_sdbr' ); ?>
</div><!-- #primary-sidebar -->
<?php endif; ?>
</div>
and if the problem is on my index.php, here's the code:
<div class="row">
<?php get_sidebar( 'left-sdbr' ); ?>
<div id="contentcont">
<div class="blog-main">
<div class="blogtitle">
<p>PAKU SQUAD
<span class="subheader1">
BLOG
</span>
</p>
<hr>
</div>
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;?>
<nav>
<ul class="pager">
<li> <?php next_posts_link( 'Older Posts >>>' ); ?> </li>
<li> <?php previous_posts_link( '<<< Newer Posts' ); ?></li>
</ul>
</nav>
<?php
endif;
?>
</div> <!-- /.blog-main -->
</div>
</div> <!-- /.row -->
This is my firt time creating a wordpress template and I would really appreciate all the help I can get. Thank you in advance.
You need to pay attention to Layout grid system in bootstrap: http://getbootstrap.com/docs/4.0/layout/overview/
Because you need to determine the width of the container, else will be all the body.
<div class="container">
<div class="row">
<div class="col">
Sidebar
<div>
<div class="col">
Content
<div>
</div>
</div>
What I am trying to achieve is to create a grid with bootstrap inside a wordpress page and display 30 posts as thumbnails. By clicking on the thumbnail a modal box will be displayed with the image in full size.
What am I doing right now is that the modal pops up but displays the same image every time. I am trying to set the href value in the tag that will display the of the post in the modal.
<?php get_header(); ?>
<div id="content" class="clearfix">
<div id="main" class="clearfix" role="main">
<?php $counter = 0; ?>
<div class="row-fluid">
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php if ($counter < 4): ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix thumbnail-post span3'); ?> role="article" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<a href="#myModal" data-toggle="modal" >
<?php the_post_thumbnail( 'graphix-thumbnail' ); ?>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
</a>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class='modal-body'>
<img src="<?php echo $url; ?>" />
</div>
</div>
<div class="page-header"><h3 itemprop="headline"><?php the_title(); ?></h3></div>
</header> <!-- end article header -->
<section class="post_content clearfix">
<?php the_content(); ?>
</section>
</article> <!-- end article -->
<?php $counter +=1; ?>
<?php else: ?>
</div>
<?php $counter = 0; ?>
<div class="row-fluid">
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
</div>
<?php endif; ?>
</div> <!-- end #main -->
</div> <!-- end #content -->
<?php get_footer(); ?>
See this question. Its pretty easy to pass data to a modal with jQuery.
What I did wrong was that the modal's identifier was the same and the id has to be unique. So I changed the id of the modal to "#myModal-" and each one got its own unique id !
The code below should display the content of the page followed by certain page content.
<!-- Section -->
<section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- Article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- Posts for homepage -->
<?php
if ( is_front_page() ) { ?>
<?php the_content(); ?>
<!-- Show page content according to page ID -->
<div class="title-home clearfix">
<div class="four title-home-text">Services Spotlight</div>
<div class="four title-home-text" style="margin-left: 115px;">Industry Expertise</div>
<div class="four title-home-text" style="margin-left: 125px;">Features & Benefits</div>
</div>
<div class="four-wrapper clearfix">
<div class="four-container">
<div class="four-col line">
<?php
query_posts('page_id=40');
while (have_posts()): the_post();
the_content();
endwhile;
?>
</div>
read more
</div>
<div class="four-container">
<div class="four-col line">
<?php
query_posts('page_id=41');
while (have_posts()): the_post();
the_content();
endwhile;
?>
</div>
read more
</div>
<div class="four-container">
<div class="four-col line">
<?php
query_posts('page_id=42');
while (have_posts()): the_post();
the_content();
endwhile;
?>
</div>
read more
</div>
<div class="four-container">
<div class="four-col line">
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-area-3')) ?>
</div>
</div>
</div>
<?php
}
else {
?>
<h1><?php the_title(); ?> </h1>
<?php the_content(); ?>
<?php } ?>
<!-- end post homepage -->
<br class="clear">
<?php edit_post_link(); ?>
</article>
<!-- /Article -->
<?php endwhile; ?>
<?php else: ?>
<!-- Article -->
<article>
<h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>
</article>
<!-- /Article -->
<?php endif; ?>
</section>
<!-- /Section -->
<?php get_footer(); ?>
However, it displays the last query as loop.
Output Code:
<article id="post-6" class="post-6 page type-page status-publish hentry">
<article id="post-42" class="post-42 page type-page status-publish hentry">
post-42 should not be displayed in the article.
Also, I know the code is not simplified for using while loop. I want to fix the article problem and simplify this code.
The codex advises against using query_posts for secondary loops as per Codex Query Posts Page
It looks like you are stomping on the main loop (article) since query_posts alters the main loop. If you want to use query_posts it is recommended that you call wp_reset_query() when done. The preferred method is to use WP_query().
So I've got a custom post type, all working fine.
Goes to single-portfolio, but it won't paginate.
I can't, no matter what I try get pagination to work on the single page.
Here's my code.
<?php get_header(); ?>
<div class="main-content">
<div class="portfoliopost">
<div class="col-full">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<div class="port-left-single">
<h2><?php the_title(); ?></h2>
<div class="projecttype">
<ul>
<?php
$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
echo '<li>' .$tag->name. '</li>';
}
}
?>
</ul>
</div>
<?php the_field('main_portfolio_meta'); ?>
</div> <!-- end div port-left-single -->
<div class="port-right-single">
<?php the_content(); ?>
</div>
<div style="clear:both;"></div>
</div> <!-- end div post-class -->
<div class="navigation">
<div class="next-posts"><?php next_posts_link('Older Posts') ?></div>
<div class="prev-posts"><?php previous_posts_link('Newer Posts') ?></div>
</div>
<?php endwhile; endif; ?>
</div> <!-- end div col-full -->
</div> <!-- end div portfolipost -->
<div style="clear:both;"></div>
</div> <!-- end div main content -->
<?php get_footer(); ?>
It's inside the loop, so what gives?