I am currently trying to display a post to my homepage from a category, along with an image (featured image).
so far, I have this code which grabs the post and displays it on my homepage:
<div class="row">
<div class="col-md-6">
<?php query_posts('cat=4');
while (have_posts()) : the_post();
the_content();
endwhile;?>
</div>
This does display, but I have now attempted to set a featured image aswell.
I would like it to display like:
I have seen some suggestions such as
<?php the_post_thumbnail(); ?>
but i'm not 100% where to add this.
Super thanks in advance!
You should do something like this:
<div class="row">
<div class="col-md-6">
<?php query_posts('cat=4');
while (have_posts()) : the_post();
if ( has_post_thumbnail() ) {
the_post_thumbnail('thumbnail');
}
the_content();
endwhile;?>
</div>
You will probably need to wrap the_content and the_post_thumbnail in divs and style with CSS or use the column classes from your theme
You can try this, untested though. I left the args as an array in case you had others to add.
<div class="row">
<div class="col-md-6">
<?php
$args = array( 'cat' => 4 );
$loop = new WP_Query( $args );
while ($loop->have_posts() ) : $loop->the_post();
?>
<div style="float: left;">
<?php the_post_thumbnail( 'thumbnail' ); ?>
</div>
<?php the_content(); ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div>
</div>
Related
I'm building a theme and on my category.php page I want to show several full posts (let's say 3, but need to be able to change this to 2 or 1 easily), and then the rest of the posts in the category as title links.
I have quite a bit of HTML in my loop for styling my posts and adding custom fields so sorry about all the code, but this is what my category.php page looks like now. I've tried a few things that haven't worked so have edited this to show my original code which just has a normal list of posts. I'm somewhat new to editing The Loop so would appreciate as much explanation/clarity as possible.
<?php
/**
* The template for displaying Category Archive pages.
*/
get_header(); ?>
<div id="primary" class="<?php
$category = get_the_category();
echo $category[0]->cat_name;
?>">
<div id="feature-container" class="full-width-container">
<div class="full-width-container content-page" id="tagline-wrapper">
<div id="left-black"></div>
<div class="page-width-container">
<div id="tagline-box">
<h1 class="category-title">Transactions</h1>
</div>
</div>
</div>
</div>
<div id="content-wrapper">
<div id="project-menu" class="page-width-container">
<?php wp_nav_menu( array( 'theme_location' => 'project-types' ) ); ?>
</div>
<div id="content" role="main" >
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="story-container" class="module-container">
<div class="our-story">
<div class="story-image">
<?php
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</div>
<div class="story-text">
<article class="post" id="post-<?php the_ID(); ?>">
<div class="entry-container">
<h2><?php the_title(); ?></h2>
<div class="project-details">
<p><span class="details-location"><?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_project-location', true);
wp_reset_query();
?></span><br />
<span class="details-funding"><?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_funding-type', true);
wp_reset_query();
?> | <?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_funding-source', true);
wp_reset_query();
?></span><br />
<span class="details-value"><?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_project-value', true);
wp_reset_query();
?></span></p>
</div>
<div class="entry">
<?php the_content(); ?>
<?php wp_link_pages(array('before' => __('Pages: ','html5reset'), 'next_or_number' => 'number')); ?>
</div>
<?php edit_post_link(__('Edit this entry','html5reset'), '<p>', '</p>'); ?>
</div>
</article>
</div>
</div>
</div>
<?php endwhile; endif; ?>
</div><!-- #content -->
</div>
</div><!-- #primary -->
<?php get_footer(); ?>
You can achive above thing using following code:
First you have to loop all post and and put counter when it reach more then 2 its stop to print a content.but title will be there always.
<?php $countPost=1;?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<h2 id="post-<?php the_ID(); ?>">
<?php the_title(); ?></h2>
<?php if($countPost>2) : /*Condition for Content*/
the_content();
endif;
?>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft">
<?php posts_nav_link('','','« Previous Entries') ?>
</div>
<div class="alignright">
<?php posts_nav_link('','Next Entries »','') ?>
</div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
<?php endif; ?>
</div>
For more details please refer :
https://codex.wordpress.org/The_Loop_in_Action
I figured out a bit of a workaround solution on my own, although it relies on using plugins/widgets which isn't what I'd prefer.
I simply set the Reading settings to display 2 posts, and then below the Loop I added a widget area and used the Recent Posts Extended widget to display a list of titles/links. This widget allows you to skip a certain amount of posts in the list, so I set it to start at post #3. There was no option to show posts from the current category only, so I had to use the Widget Context plugin as well and make individual widgets with a specific category to show on each corresponding category page. As I said, a bit of a convoluted solution, but the end result is exactly what I wanted to achieve.
I have created a custom-post-type and loaded the titles on my front-page as toggle-buttons. Now I want to make sure, that the content of the toggle-div is always related to the button I clicked. I tried to realize by simply using loading the post content, but I think I need to get the post-id as a variable or something into the loop. I have simply no idea how to make this work. I am a absolute beginner in PHP, hope someone can give me a hint?
Related Website: http:www.mzk.ernst-werbeagentur.de
My Code:
<?php
$query = new WP_Query( array( 'post_type' => 'praxen' ) );
if ( $query->have_posts() ) : ?>
<div class="container-fluid wrapper-slider-head">
<div class="container-fluid slider-head fullscreen" id="img-start">
<img src="http://mzk.ernst-werbeagentur.de/wp-content/uploads/2015/10/background-start.jpg" width='1920' height='1080'>
</div>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="container-fluid slider-head fullscreen" id="img-<?php echo $countimg; ?>" style="display:none;">
<?php echo get_the_post_thumbnail( $post_id, 'full', array( 'class' => 'img-' . $countimg ) ); ?>
</div>
<?php
$countimg++;
endwhile; wp_reset_postdata(); ?>
</div>
<?php endif; ?>
<?php
$query = new WP_Query( array( 'post_type' => 'praxen' ) );
if ( $query->have_posts() ) : ?>
<div class="container links-praxen">
<div class="row">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col-sm-4"><div <?php post_class( 'jumbotron p' . $countpost ); ?>><div class="hovertogglecont"><div class="hovertogglecontinside">
<h2><?php the_title(); ?></h2>
<p><?php echo get_post_meta($post->ID, 'toggletitel', true); ?></p>
</div></div></div></div>
<?php
$countpost++; endwhile; wp_reset_postdata(); ?>
<?php endif; ?>
<div class="container-fluid wrapper-praxisinfo" style="display:none;"> <!-- This div should toggle and show the related post-content by clicking on a link from the loop above. -->
<div class="container">
<div class="close-post-content"><i class="fa fa-times" style="cursor:pointer; color:#fff;"></i></div>
<div class="post-content">
<?php
$query = new WP_Query( array( 'post_type' => 'praxen' ) );
if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<?php the_content(); ?>
<?php
endwhile; wp_reset_postdata(); ?>
<?php endif; ?>
</div>
</div>
</div>
I want tot show the related post in the third loop.
Cheers and thank you very much,
David
once you load your page content, you cannot re-run php with some parameter after JavaScript button click. You would need to use AJAX call to get post content from some new PHP file for example post-content.php with is as parameter and then place it inside your wrapper-praxisinfo.
What I would suggest instead is to output all posts as you are doing now, and just hide ones that you dont want to see with JavaScript.
<div class="container">
<div class="close-post-content"><i class="fa fa-times" style="cursor:pointer; color:#fff;"></i></div>
<div class="post-content">
<?php
$query = new WP_Query( array( 'post_type' => 'praxen' ) );
if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="post-id-<?php the_ID();?>">
<?php the_content(); ?>
</div>
<?php
endwhile; wp_reset_postdata(); ?>
<?php endif; ?>
</div>
</div>
</div>
Here every post is wrapped inside a div with post ID as a class. You just need to hide all posts and on button click show the one that was clicked by ID.
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 have created custom post types and added some things through advanced custom fields.
Usually when i don't need to select from each category i would do something like this.
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
<?php the_field('name_of_field'); ?>
endwhile; else: ?>
<?php endif; ?>
However now i have to select if it is one of two particular categories and then put category 'tjanster' in left column and 'produkter' in right column within my bootstrap grid.
So it will be 50% 'tjanster', 50% 'produkter'.
I have been searching like crazy for an solution but only found some code for functions.php that didn't work and 5years old posts that didn't work for me.
What am i suposed to to so i can have some similar output like this?
<div class="container">
<div class="row">
<div class="col-sm-6">
<!-- Output of category tjanster. -->
</div>
<div class="col-sm-6">
<!-- Output of category produkter. -->
</div>
</div>
</div>
For each column you need a WP_Query(). See codex for reference: http://codex.wordpress.org/Class_Reference/WP_Query.
<div class="container">
<div class="row">
<div class="col-sm-6">
<?php // tjanster
$args1 = array(
'category_name' => 'tjanster'
);
$query1 = new WP_Query( $args1 );
while ( $query1->have_posts() ) : $query1->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile;
wp_reset_postdata(); ?>
</div>
<div class="col-sm-6">
<?php // produkter
$args2 = array(
'category_name' => 'produkter'
);
$query2 = new WP_Query( $args2 );
while ( $query2->have_posts() ) : $query2->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile;
wp_reset_postdata(); ?>
</div>
</div>
</div>
Im just wondering is it possible to use the pagination_links() function in a foreach loop in wordpress?
When I try it nothing happens, I have looked around and it seems this is a little trickier than I was expecting...
<?php
$args = array( 'numberposts' => 6, 'post_status'=>"publish",'post_type'=>"post",'orderby'=>"post_date");
$postslist = get_posts( $args );
foreach ($postslist as $post) : setup_postdata($post); ?>
<div class="events">
<div class="newslistingblock">
<div class="newslistingblockheader"><p><?php the_title(); ?></p>
</div>
<div class="newslistingblockthumbnail">
<?php echo get_the_post_thumbnail( $post_id, 'news-thumb', $attr ); ?> </div>
<div class="newslistingexcerpt">
<?php the_excerpt( ); ?> </div>
</div>
</div>
<?php endforeach; ?>
Im basically looking for basic pagination, with "next", "prev" and numbers.
Any help on this would be great thanks.
EDIT:
I have decided to change the code to this to suit wordpress...
<?php
query_posts( 'posts_per_page=5' );
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<!-- Do suff -->
<div class="events">
<div class="newslistingblock">
<div class="newslistingblockheader"><p><?php the_title(); ?></p>
</div>
<div class="newslistingblockthumbnail">
<?php echo get_the_post_thumbnail( $post_id, 'news-thumb', $attr ); ?> </div>
<div class="newslistingexcerpt">
<?php the_excerpt( ); ?> </div>
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('← Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries →') ?></div>
</div>
<?php endif; ?>
Why are you using foreach instead of while?
The default loop with pagenation should look like this (should work with foreach as well):
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- Do suff -->
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('← Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries →') ?></div>
</div>
<?php endif; ?>
This just shows the next and previous link, but if you want pagination with numbers, I would suggest the great plugin: Wp-Pagenavi.
Good luck!
EDIT:
The error you are experiencing is that you haven't set the paged variable correctly. You need to do the following:
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('posts_per_page=5&paged=' . $paged);
?>
Then everything should work.
You can find more information in the codex: http://codex.wordpress.org/Pagination#Adding_the_.22paged.22_parameter_to_a_query