Create a full-width post every 4 post grids - Wordpress Loop - php

How can I create a full-width post every 4 post grids? As in the following picture.
Here is my code wordpress loop.
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('col-sm-6 grid-item '); ?>>
<div class="entry-image">
<?php the_post_thumbnail('grid-thumb'); ?>
<?php unbranded_entry_footer(); ?>
</div>
<header class="entry-header">
<?php
the_title( '<h3 class="entry-title">', '</h3>' );
if ( 'post' === get_post_type() ) : ?>
<div class="entry-meta">
<?php unbranded_posted_on(); ?>
</div><!-- .entry-meta -->
<?php
endif; ?>
</header><!-- .entry-header -->
<div class="entry-content">
<p><?php echo unbranded_string_limit_words(get_the_excerpt(), 18); ?>…</p>
</div><!-- .entry-content -->
</article>
<?php endwhile; endif; ?>

May I know are you using visual composer or creating custom template?
If using visual composer you can do it from back-end or place the condition to disable the sidebar from right using
above the sidebar in page.php
<?php if(!is_page('your-page-slug' or ID)) { ?>
/*sidebar code*/
<?php } ?>

Related

Post content is not displaying ACF

Why can't I see the post content where as I can easily see the post title if I do a wordpress search. I have a custom post type "Artist" and I am using ACF.
<?php
if ( have_posts() ) : ?>
<?php
/* Start the Loop */
while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( sprintf( '<h2 class="entry-title">', esc_url( get_permalink() ) ), '</h2>' ); ?>
</header><!-- .entry-header -->
<div class="entry-summary">
<?php the_content(); ?>
</div><!-- .entry-summary -->
<footer class="entry-footer">
<?php edigital_entry_footer(); ?>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
You need to put "the content" function call inside the WordPress loop in order for it to output your content to the page like the following.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
Hope that helps, Cheers!!!

How add list post title wordpress in table?

How add list post title wordpress in table
I have code in index.php wp theme like this:
<?php
/**
* #WP-Theme Twenty Twelve 1.0
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<?php if ( have_posts() ) : ?>
<?php if ( function_exists( 'page_navi' ) ) page_navi( 'items=7&prev_label=Prev&next_label=Next&first_label=First&last_label=Last&show_num=1&num_position=after' ); ?><br/>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<div><a class="judul" href="<?php the_permalink(); ?>">
<?php the_title(); ?></a>
<small><div style="text-indent: 10px;">Oleh: <?php the_tags(' '); ?> | Media: <?php the_category(', '); ?> | Terbit: <?php the_time('l, j F Y'); ?> | Dibaca: <?php if(function_exists('the_views')) { the_views(); }?></div></small>
</div>
<?php endwhile; ?>
<br/><?php if ( function_exists( 'page_navi' ) ) page_navi( 'items=7&prev_label=Prev&next_label=Next&first_label=First&last_label=Last&show_num=1&num_position=after' ); ?>
<?php else : ?>
<article id="post-0" class="post no-results not-found">
<?php if ( current_user_can( 'edit_posts' ) ) :
// Show a different message to a logged-in user who can add posts.
?>
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'No posts to display', 'twentytwelve' ); ?></h1>
</header>
<div class="entry-content">
<p><?php printf( __( 'Ready to publish your first post? Get started here.', 'twentytwelve' ), admin_url( 'post-new.php' ) ); ?></p>
</div><!-- .entry-content -->
<?php else :
// Show the default message to everyone else.
?>
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentytwelve' ); ?></h1>
</header>
<div class="entry-content">
<p><?php _e( 'Apologies, but no results were found. Perhaps searching will help find a related post.', 'twentytwelve' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
<?php endif; // end current_user_can() check ?>
</article><!-- #post-0 -->
<?php endif; // end have_posts() check ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
This result in frontpage:
I want add list post title wordpress in table like this:
What code and where I put its?
<table border="1">
<?php while ( have_posts() ) : the_post(); ?>
<tr><td colspan="2"><a class="judul" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></td></tr>
<tr><td colspan="2">Oleh: <?php the_tags(' '); ?> | Media: <?php the_category(', '); ?> | Terbit: <?php the_time('l, j F Y'); ?> | Dibaca: <?php if(function_exists('the_views')) { the_views(); }?></td></tr>
<?php endwhile; ?>
</table>
You may need to change while loop with above code.
create a <table> tag before starting while loop and close </table> after while loop.
create <tr> in while loop and <td> as per your need.
It looks like you're trying to style the list.
I suggest using a an unordered list to list your post links in this instance:
<?php if (have_posts()) : ?>
<?php if ( function_exists( 'page_navi' ) ) page_navi( 'items=7&prev_label=Prev&next_label=Next&first_label=First&last_label=Last&show_num=1&num_position=after' ); ?><br/>
<ul>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<li>
<a class="judul" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile;
endif;
wp_reset_query();
?>
</ul>
You can style accordingly:
ul {
list-style-type:none;
border: 2px solid #BCE1F1;
}
li:nth-child(odd) {
background: #95DBFE;
}
The nth-child selector above will give every odd numbered list item a different style, depending on what declarations you use. In my example, I gave every odd numbered list item a light blue background.
Hope this helps!
Please do it like this:
tr:nth-child(odd) {
background: #95DBFE;
}
tr:nth-child(even) {
background: #BCE1F1;
}

Customizing Wordpress to show posts by id in Index page

I'm having problem in showing posts in my index page in wordpress the title and contents doesnt show. Currently i'm modifying the index.php of twenty-twelve template to show the custom post by id, my goal is to show 3 posts in my index page, here's my code below:
<?php
/**
* The main template file
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* For example, it puts together the home page when no home.php file exists.
*
* #link http://codex.wordpress.org/Template_Hierarchy
*
* #package WordPress
* #subpackage Twenty_Twelve
* #since Twenty Twelve 1.0
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<br><br>
<?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 twentytwelve_content_nav( 'nav-below' ); ?>
<?php else : ?>
<article id="post-0" class="post no-results not-found">
<?php if ( current_user_can( 'edit_posts' ) ) :
// Show a different message to a logged-in user who can add posts.
?>
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'No posts to display', 'twentytwelve' ); ?></h1>
</header>
<div class="entry-content">
<p><?php printf( __( 'Ready to publish your first post? Get started here.', 'twentytwelve' ), admin_url( 'post-new.php' ) ); ?></p>
</div><!-- .entry-content -->
<?php else :
// Show the default message to everyone else.
?>
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentytwelve' ); ?></h1>
</header>
<div class="entry-content">
<p><?php _e( 'Apologies, but no results were found. Perhaps searching will help find a related post.', 'twentytwelve' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
<?php endif; // end current_user_can() check ?>
</article><!-- #post-0 -->
<?php endif; // end have_posts() check ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
The code above is the default index.php of twenty-twelve template in wordpress. I replaced this code from:
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<?php twentytwelve_content_nav( 'nav-below' ); ?>
To this, because i want to show only post 23 by id.
<?php $the_query = new WP_Query( 'page_id=23' ) ?>
<?php while ( $the_query->have_posts() ) : ?>
<?php $the_query->the_post(); ?>
<?php the_title(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
So the whole code for my new index.php is:
<?php
/**
* The main template file
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* For example, it puts together the home page when no home.php file exists.
*
* #link http://codex.wordpress.org/Template_Hierarchy
*
* #package WordPress
* #subpackage Twenty_Twelve
* #since Twenty Twelve 1.0
*/
get_header();
?>
<div id="primary" class="site-content">
<div id="content" role="main">
<br><br>
<?php if (have_posts()) : ?>
<?php $the_query = new WP_Query('page_id=23') ?>
<?php while ($the_query->have_posts()) : ?>
<?php $the_query->the_post(); ?>
<?php the_title(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<article id="post-0" class="post no-results not-found">
<?php
if (current_user_can('edit_posts')) :
// Show a different message to a logged-in user who can add posts.
?>
<header class="entry-header">
<h1 class="entry-title"><?php _e('No posts to display', 'twentytwelve'); ?></h1>
</header>
<div class="entry-content">
<p><?php printf(__('Ready to publish your first post? Get started here.', 'twentytwelve'), admin_url('post-new.php')); ?></p>
</div><!-- .entry-content -->
<?php
else :
// Show the default message to everyone else.
?>
<header class="entry-header">
<h1 class="entry-title"><?php _e('Nothing Found', 'twentytwelve'); ?></h1>
</header>
<div class="entry-content">
<p><?php _e('Apologies, but no results were found. Perhaps searching will help find a related post.', 'twentytwelve'); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
<?php endif; // end current_user_can() check ?>
</article><!-- #post-0 -->
<?php endif; // end have_posts() check ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
That's all what i have guys. Can you help me? Is there anything wrong on showing the posts? Thanks in advance guys. :)
An approach if u dont want to use Wp_query
Try this:
<div id="primary" class="site-content">
<div id="content" role="main">
<br><br>
<?php if (have_posts()) : ?>
<?php $post = get_post(23);?>
<?php echo $post->post_title; ?>
<?php echo $post->post_content; ?>
<?php else : ?>
<article id="post-0" class="post no-results not-found">
<?php
if (current_user_can('edit_posts')) :
// Show a different message to a logged-in user who can add posts.
?>
<header class="entry-header">
<h1 class="entry-title"><?php _e('No posts to display', 'twentytwelve'); ?></h1>
</header>
<div class="entry-content">
<p><?php printf(__('Ready to publish your first post? Get started here.', 'twentytwelve'), admin_url('post-new.php')); ?></p>
</div><!-- .entry-content -->
<?php
else :
// Show the default message to everyone else.
?>
<header class="entry-header">
<h1 class="entry-title"><?php _e('Nothing Found', 'twentytwelve'); ?></h1>
</header>
<div class="entry-content">
<p><?php _e('Apologies, but no results were found. Perhaps searching will help find a related post.', 'twentytwelve'); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
<?php endif; // end current_user_can() check ?>
</article><!-- #post-0 -->
<?php endif; // end have_posts() check ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
You need to display post with id 23. Right?
<?php if (have_posts()) : ?>
<?php $the_query = new WP_Query('p=23') ?>
<?php while ($the_query->have_posts()) : ?>
<?php $the_query->the_post(); ?>
<?php the_title(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
You are missing little like this :
$query = new WP_Query( 'p=7' );
ALternate you can try query_posts() for specific post in query like this:
<?php query_posts('p=23'); ?>
<?php while (have_posts()) : the_post(); ?>
<h4><?php the_title(); ?></h4>
<?php the_content(); ?>
<?php endwhile;?>
<?php get_footer(); ?>

Link Wordpress post images to post

I'm developing a wordpress theme for my blog and I'm having some difficulty.
When I make a new post, the first image of that post is displayed on the homepage. When the image is clicked, it links to the image file and shows the full size. I would like for it to automatically link to the post from which it came. I understand that you can choose what the image links to upon upload or in the editor. I would like for the images to link to their original post automatically, since I have other people writing on my blog, and I don't want them to have to do this each time.
As I understand it the content.php file controls the post format in this case. Here is the file from my theme. Or is it possible to use a function?
<?php
/**
* The default template for displaying content single/search/archive
*
* #package test
* #since test 0.1.0
*/
?>
<!-- START: content.php -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php else : ?>
<?php the_post_thumbnail(); ?>
<h1 class="entry-title">
<?php the_title(); ?>
</h1>
<?php endif; // is_single() ?>
</header><!-- .entry-header -->
<?php if ( 'post' == get_post_type() ) : ?>
<div class="entry-meta">
<?php posted_on(); ?>
<?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
<span class="label radius secondary"><?php _ex( 'Featured', 'Post format title', 'test' ); ?></span>
<?php endif; ?>
</div><!-- .entry-meta -->
<?php endif; ?>
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'test' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'test' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>
<footer class="entry-meta">
<?php if ( 'post' == get_post_type() ) : ?>
<?php get_template_part('entry-meta', get_post_format() ); ?>
<?php endif; ?>
</footer><!-- #entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->
<!-- END: content.php -->
https://codex.wordpress.org/Function_Reference/the_post_thumbnail
example 1. To link Post Thumbnails to the Post Permalink in a specific loop, use the following within your Theme's template files:
<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>

Wordpress Post Thumbnail Issue (Only 1 thumbnail on frontpage)

I'm using the below code on index.php file of twentyeleven
get_header(); ?>
<div id="primary">
<div id="content" role="main">
<?php if ( have_posts() ) : ?>
<?php twentyeleven_content_nav( 'nav-above' ); ?>
<?php query_posts('cat=4&showposts='.get_option('posts_per_page')); ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="post-thumb-title">
<?php the_post_thumbnail(array(632,305));?>
<p class="thumb-title"><?php the_title(); ?></p>
</div>
<?php endwhile; ?>
<?php twentyeleven_content_nav( 'nav-below' ); ?>
<?php else : ?>
<article id="post-0" class="post no-results not-found">
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
</header><!-- .entry-header -->
<div class="entry-content">
<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
</article><!-- #post-0 -->
<?php endif; ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
As you can see from the code above, I'm only showing the posts with Cat ID = 4 and I'm using css to overlay the title on the image thumbnail which is generated using the function "the_post_thumbnail" with a custom size.
The issue is that the frontpage is only showing the title of the posts and thumbnail only for the 1st post.
You can see the website here: http://fusion.fusionconstruction.co.uk/
Links to other posts with category ID 4 selected:
http://fusion.fusionconstruction.co.uk/fusion-media-at-revolution-round-1/
http://fusion.fusionconstruction.co.uk/fusion-launch-new-website-for-dean-downing/
I would like to display all the posts similar to the 1st one.
Thanks!
<?php query_posts('cat=4&showposts='.get_option('posts_per_page')); ?>
should probably be
<?php query_posts('cat=4&showposts='.get_option('posts_per_page')); ?>
That is, you shouldn't urlencode the ampersand. Hopefully this is what is messing up your query.
Also, the_post_thumbnail() will show the post's featured image, so for it to produce a thumbnail you need to make sure that all the posts have a featured image.

Categories