I have a WP blog with a theme based on F5 (Reverie). Currently using a child theme for handling the custom styles, etc.
In addition, I'm using Infinite Scroll (part of JetPack plugin) to manage pagination on home and archived pages.
The issue
It looks fine on the initial loading of the first set of posts (set to 6). When I click the button to trigger infinite scroll, six more load (still looks fine). Load another and the 3-column grid starts to break (lose the float). At first I thought it might be the images using for the post. I even tried deactivating some plugins I thought could be an issue; no luck.
I have also tried adjusting the css (height, min-max) of the posts to see if helps. No go.
home.php
<div class="row" id="content-home">
<div class="small-12 columns" id="content" role="main">
<h5 style="margin-left:15px;">Latest Posts</h5>
<?php query_posts('offset=1'); ?>
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; // end have_posts() check ?>
</div>
</div>
content.php
<article id="post-<?php the_ID(); ?>" <?php post_class('index-card small-12 large-4 columns'); ?>>
<header>
<?php if ( has_post_thumbnail() ) {the_post_thumbnail('large'); } ?>
</header>
<div class="entry-content">
<h2><?php the_title(); ?></h2>
<?php bvblog_small_meta(); ?>
</div>
.row .small-12.columns#content article {
display: inline-block;
float: left !important;
min-height: 540px;
}
Related
I have created a grid to display posts on a WordPress site. The grid works great and scales to different devices using minmax and auto-fit, but the problem I'm having is that the last 2 spots in the grid on each page are always empty even if I have more posts that can fill the space. For example, on this category page: https://2ndactcostumes.com/category/fans-collars-belts/
I have two pages of posts, but space is being wasted at the bottom of the first page. Any ideas on how to remedy this? Thank you!!
(edited)
Category.php code:
<?php get_header(); ?>
<div class="page-wrapper">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<h1><?php the_archive_title( '' ); ?></h1>
<hr />
<div class="article-container">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();?>
<?php get_template_part( 'template-parts/content-posts-costume' ); ?>
<?php endwhile; else : ?>
<?php get_template_part( 'template-parts/content', 'none' ); ?>
<?php endif; ?>
</div>
<?php echo paginate_links(); ?>
</main>
</div>
</div>
<?php get_footer(); ?>
Template-parts code:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h2>', '</h2>' ); ?>
</header>
<div class="entry-content">
<?php the_post_thumbnail( $size = 'thumbnail' ); ?>
<?php the_excerpt(); ?>
</div>
</article>
CSS for the grid:
.category main .article-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
grid-template-rows: repeat(auto-fill, 1fr)
justify-content: space-between;
}
I'm trying to move the post's featured image below the post title in the Marketify theme, however I can't seem to find this hidden in the code.
Can anybody please help me find the code for the post's featured image? How do I move this below the post title?
Firstly, create a Child Theme for your WordPress Theme.
Then look in '/wp-content/themes/[theme-name], where you should find a file entitled 'single.php'. Copy this into your child theme, taking care to ensure you replicate the same directory hierarchy. The 'single.php' is usually the name of your default Blog Post Template.
Open up the 'single.php' file, which you have saved within your child theme, with a programme such as Notepad++ (Notepad will also do but is not as easy on the eye).
You should see something like:
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
}?>
<?php
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1> //This is the title of your Blog Post.
<div class="entry">
<?php the_content(); ?> //This is the content of your Blog Post.
</div>
<?php endwhile; ?>
<?php endif; ?>
There will be a slight variation in the coding but what you are looking to do is highlight:
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
}?>
and then move this coding to beneath <h1><?php the_title(); ?></h1>. You will need to play around as to where exactly you will need it but I hope this helps get you started.
The reason I have suggested that you do this within a Child Theme is that when the Theme Developer rolls out an update, it will delete any modifications you have made within the parent files.
Good Luck!
Thanks for your comment. I assumed it would be similar to code you've written too, but the title and featured image are hidden in the "do_action( 'marketify_entry_before' );".
get_header(); ?>
<?php do_action( 'marketify_entry_before' ); ?>
<div class="container">
<div id="content" class="site-content row">
<div role="main" id="primary" class="col-xs-12 col-md-8 <?php echo ! is_active_sidebar( 'sidebar-1' ) ? 'col-md-offset-2' : '' ?>">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'single' ); ?>
<?php comments_template(); ?>
<?php endwhile; ?>
None the less, for anyone else with the same problem; I figured out how to hide this section in css like so...
.single .header-outer.has-image .page-header {
display: none;
}
And then could use the standard Wordpress functions to make the title and featured image appear where I wanted.
Thanks :)
Tom
I am trying to target individual posts so I can change the css (title tags, padding, etc) of specific posts. My Wordpress site currently generates the posts in a loop.
index.php code (brings in content.php which has 'post' code)
<div>
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
get_template_part( 'content' );
?>
<?php endwhile; ?>
<div class="clearfix"></div>
<div class="col-md-12">
</div>
<?php else : ?>
<?php get_template_part( 'no-results', 'index' ); ?>
<?php endif; ?>
</div>
content.php code (gets post-title, category, and sets post-thumbnail to background-image)
<?php
if (has_post_thumbnail()) {
$thumbnail_data = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID()), 'my-fun-size' );
$thumbnail_url = $thumbnail_data[0];
}
?>
<article id="post-<?php the_ID(); ?>" style="background-image:url('<? php echo $thumbnail_url ?>')" <?php post_class('container-fluid'); ?> >
<div class="row">
<div class="col-md-12">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
functions.php (setting image size)
add_theme_support( 'post-thumbnails' );
add_image_size('my-fun-size', 'thumbnail');
The output is 'rows' 100% width with the title, category and background-image (feature-image). Stacked on top of each other. I want to be able to target the text and bg-image of different posts to make them each look different.
i think the best way to to this is by adding a custom field inside your posts, then, in your templates, you call that custom field this way:
get_post_meta($post->ID, 'name_of_your_custom_field', true);
this must be inside the loop.
I'm not a wordpress expert, so wondering if someone can help me. I created a custom page template for one page so I could aggregate and display posts from one category on that page. However, I created one post in that category so far, but it gets displayed twice on the page. The posts that get pulled in from the category get displayed in the "div id=main" div. Here is the page template code:
<?php /* Template Name: Deals Page */ ?>
<?php get_header(); ?>
</div>
//<?php while ( have_posts() ) : the_post(); ?>
<div id="title-bar">
<h1 class="bar-entry-title container"><?php the_title(); ?></h1>
</div>
<?php endwhile; ?>
<div class="container col-md-12"><!-- restart previous section-->
<div id="primary" class="content-area col-md-8">
<main id="main" class="site-main" role="main">
<?php query_posts('category_name=deals &posts_per_page=20'); ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_title( '<h2>', '</h2>' ); ?>
<?php the_content(); ?>
//<?php get_template_part( 'content', 'page' ); ?>
<?php endwhile; // end of the loop. ?>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || '0' != get_comments_number() )
comments_template();
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_sidebar('footer'); ?>
<?php get_footer(); ?>
Do you know why it is displaying the post twice? I can't see why.
You are running two loops. Your comment line is outside of the PHP on the 5th line.
Change this //<?php while ( have_posts() ) : the_post(); ?>
to this <?php // while ( have_posts() ) : the_post(); ?>
Also comment out the first <?php endwhile; ?> around line 9 or else you will get a PHP error
I have different categories where the post displayed are characterized by different elements, for this reason when I use the search in wordpress the results are not shown very well.
For this reason I would like to change the appearance of the post shown in the search results based on its category.
Example:
My search.php template look like this:
<?php get_header(); ?>
<div id="content">
<div class="padder">
<?php do_action( 'bp_before_blog_search' ); ?>
<div class="page" id="blog-search" role="main">
<?php if (have_posts()) : ?>
<?php bp_dtheme_content_nav( 'nav-above' ); ?>
<?php while (have_posts()) : the_post(); ?>
<?php do_action( 'bp_before_blog_post' ); ?>
<div class="blog-post">
// Here is displayed the blog post style and features
</div><!--blog-post-->
<div class="clear"> </div>
<?php do_action( 'bp_after_blog_post' ); ?>
<?php endwhile; ?>
<?php bp_dtheme_content_nav( 'nav-below' ); ?>
<?php else : ?>
<h2 class="center"><?php _e( 'No posts found. Try a different search?', 'OneCommunity' ); ?></h2>
<?php endif; ?>
<div style="display:inline">
<center><?php wp_pagenavi(); ?></center>
</div>
</div>
<?php do_action( 'bp_after_blog_search' ); ?>
</div><!-- .padder -->
</div><!-- #content -->
<div id="sidebar">
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar-blog')) : ?><?php endif; ?>
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar-ad-blog')) : ?><?php endif; ?>
</div><!--sidebar ends-->
<?php get_footer(); ?>
I tried to achieve the result of displaying based on the post category a different "template" for the post but without success.
I asked the same question on wordpress.stackexchange.com but without success, and there I pointed out a non working solution, hope it can help you in developing the code I need.
https://wordpress.stackexchange.com/questions/141856/different-layout-on-search-page-depending-on-category-post
Thank you very much for any help you will give, and excuse me for my english.
If I understand your question correctly, you could simply use the post_class() function:
<div <?php post_class( 'blog-post' );?> >
// Here is displayed the blog post style and features
</div><!--blog-post-->
This will render like:
<div class="post-3654 post type-post status-publish format-standard hentry category-buildings blog-post">
// Here is displayed the blog post style and features
</div><!--blog-post-->
for posts in the buildings category.
Then your CSS will take care of the rest:
.post.category-buildings {
border: 3px solid red;
}
But I think your setup/idea is only suitable for single category posts.
Ref: From the Codex:
The post_class may include one or more of the following values for the
class attribute, dependent upon the pageview.
.post-id
.post
.attachment
.sticky
.hentry (hAtom microformat pages)
.category-ID
.category-name
.tag-name
.format-name