how can I display and create box with newest post outside the loop in Wordpress? I showed this on the picture in this link http://i.imgur.com/UbBvlnE.png. I'm talking about this in the red frame ;)
Sorry for my english.
I use a Masonry CSS for all my post on homepage http://sickdesigner.com/masonry-css-getting-awesome-with-css3/
This is a code for the loop:
<div class="all_center">
<?php query_posts($query_string."&orderby=post_date"); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<?php the_post_thumbnail('mediumImageCropped'); ?>
<div class="entry">
<?php the_excerpt(); ?>
<div class="postmetadata">
</div>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<h2>Not Found</h2>
<?php endif; ?>
</div>
$recent_posts = wp_get_recent_posts( array( 'numberposts' => '1' ) );
echo get_the_post_thumbnail($recent_posts[0]['ID'], 'thumbnail');
echo $recent_posts[0]['post_content'];
Related
Every time I inspect my code, there is a circle that appears. Does anyone know what this is?
Edit 1:
Thank you to Sam I now know that they are text nodes. I am having a little trouble identifying where they are in my code. If anyone can spot them and point them out to me it would be much appreciated.
<?php get_template_part( 'parts/shared/header' ); ?>
<?php
if(have_posts()) : ?>
<div id="main-content">
<div id="inside">
<div class="content">
<div class="container">
<div class="padding_30">
<h1 class="page_header_blog">Blog</h1><br>
<div class="blog_wrapper">
<?php while(have_posts()) : the_post(); ?>
<div class='post'>
<div class='thumbnail'>
<?php the_post_thumbnail(); ?>
<?php echo get_avatar( get_the_author_meta( 'ID' ) , 32 ); ?>
</div>
<h2 class='each_blog_info' id='post-<?php the_ID(); ?>'></h2>
<div class='blog_info'>
<small><i class='fa fa-calendar-o' aria-hidden='true'></i>
<?php the_time('F jS, Y') ?> ❘
<i class='fa fa-user' aria-hidden='true'></i>
<?php the_author() ?> ❘
<?php the_category( ', ' ); ?>
</small>
</div>
<h2 class='blog_title_link'><a href='<?php the_permalink() ?>' rel='bookmark' title='Permanent Link to <?php the_title_attribute(); ?>'>
<?php the_title(); ?></a></h2>
<div class='excerpt'>
<?php the_excerpt(); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif;?>
<div class="text-center"><?php
the_posts_pagination( array(
'prev_text' => __( 'Previous page', 'spafix' ),
'next_text' => __( 'Next page', 'spafix' ),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'spafix' ) . ' </span>',
) );
?></div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php get_template_part( 'parts/shared/footer' ); ?>
This is the code from my index.php page where the text nodes are apprearing in inspector. They appear after the loop with the div class of 'post'.
This is "text nodes", they are generated by not accurate PHP and contain " ".
These are due to white spaces... Generally when two or more nodes which inline-block property comes together
So I want to show my content showing over my image, but only slightly. So in a sense the image would look like it was partly the background of the page. I do not want my content box to stretch over the full width of the page like the image currently does however.
This is the page I am working on; http://outside.hobhob.uk/test/?portfolio=mind-the-gap-2
This is what I am aiming to have it look similar to (focusing just on how the content text box is slightly over the image): https://s32.postimg.org/ytavty67p/13340631_10154339496581336_223276410_o.jpg
Is there a way I can achieve this with maybe changing the css of the content box slightly? Maybe changing the position or z-index?
The code of the page is currently working in a typical way, I am also using Visual Composer to lay out the content in the page, so this may help me achieve this in a easier way?
<div class="pagewidth">
<div class="content single single-portfolio">
<div class="post-content">
<article id="post-<?php the_ID(); ?>" <?php post_class("post post-content-full"); ?>>
<div class="portfolio-attachment">
<?php
$pi_data = get_port_item_content(get_the_ID());
$n = 0;
the_post_thumbnail();
if ($pi_data) {
foreach ($pi_data as $content_info) {
switch ($content_info->type) {
case "image":
?>
<div class="item image"><img
src="<?php echo $content_info->url?>"/></div>
<?php
break;
case "youtube":
//check to see if the video has any options, the ? sign
$has = strstr($content_info->url, "?");
if (!$has) {
$embed = explode('"', $content_info->url);
// insert enablejsapi option
$embed[5] .= "?wmode=transparent";
$embed = implode('"', $embed);
} else {
// insert enablejsapi option
$embed = str_ireplace("&", "&", $content_info->url);
$embed = str_ireplace("?", "?wmode=transparent&", $embed);
}
// get original dimensions
$pattern = "/height=\"[0-9]*\"/";
preg_match($pattern, $embed, $matches);
$origHeight = preg_replace("/[^0-9]/", '', $matches[0]);
// compute new height
//$newHeight = $origHeight + 25;
$newHeight = $origHeight;
// adjust embed code
$pattern = "/height=\"[0-9]*\"/";
$embed = preg_replace($pattern, "height='" . $newHeight . "'", $embed);
// insert an id for the iframe
$id = '<iframe id="ytplayer' . $n . '" ';
$embed = str_ireplace("<iframe ", $id, $embed);
?>
<div class="item youtube fitvid"><?php echo $embed?></div>
<?php
break;
case "vimeo":
$embed = $content_info->url;
?>
<div class="item vimeo fitvid"><?php echo $embed?></div>
<?php
break;
}
//end switch
$n++;
} //end for each
}//end if
?>
</div>
</div></div></div>
<div class="pagewidth-single">
<div class="content single single-portfolio">
<div class="post-content">
<header class="content-headarea">
<div class="content-headarea-title">
<h1 class="post-title"><?php the_title(); ?></h1>
<ul class="portfolio-meta">
<?php $client = get_post_meta(get_the_ID(), 'client', true); ?>
<?php if (!empty($client)) : ?>
<li class="client">
<span class="portfolio-meta-heading"><?php _e('Client: ', 'framework'); ?></span>
<span><?php echo $client ?></span>
</li>
<?php endif; ?>
<?php $date = get_post_meta(get_the_ID(), 'date', true); ?>
<?php if (!empty($date)) : ?>
<li class="date">
<span class="portfolio-meta-heading"><?php _e('Date: ', 'framework'); ?></span>
<span><?php echo $date ?> </span>
</li>
<?php endif; ?>
<?php $lproj = get_post_meta(get_the_ID(), 'url', true);
if (!empty($lproj)) :
?>
<li class="launch">
<span class="portfolio-meta-heading"><?php _e('url', 'framework'); ?></span>
<a href="<?php echo get_post_meta(get_the_ID(), 'url', true); ?>"
class="superlink"
title="<?php echo get_post_meta(get_the_ID(), 'url', true); ?>">
<?php echo get_post_meta(get_the_ID(), 'url', true); ?>
</a>
</li>
<?php endif; ?>
</ul>
</div>
</header>
<div class="blog-post">
<div class="full-post">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else:?>
<?php endif; ?>
</div>
</div>
<?php get_template_part( '/includes/share'); ?>
<?php comments_template(); ?>
<nav id="post-nav">
<div class="post-nav-inner">
<div class="nav-previous"><?php next_post_link( '%link', __( 'Next Post →', 'framework' ) ); ?></div>
<div class="nav-next"><?php previous_post_link( '%link', __( '← Previous Post', 'framework' ) ); ?></div>
<div class="clearfix"></div>
</div>
</nav>
</article>
</div>
</div>
</div>
So I am looking to start the overlay on the <header> section, from the page title onwards, while keeping the featured image as the full width background'ish half section. I want to avoid having the image basically cover the screen and so you can begin to see the content starting without needing to scroll down.
Is there a way I can achieve this with maybe changing the css of the
content box slightly? Maybe changing the position or z-index?
Yes, you can change the position pretty easily with position: relative and top: {n}px. Try adding this CSS:
div.pagewidth-single div.post-content {
position: relative;
top: -150px;
}
I have 9 posts showing up on a page. I'm only showing the featured images from the post and the images are set to a background image. I want to be able to click the images and have the image show up in a new window. I'm having a little trouble figuring this out. I want to wrap the div in an link.
This is the code I have:
<article <?php post_class('col-md-4 site-content'); ?>>
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id(
$post->ID ), 'large' );
$image = $image[0]; ?>
<?php endif; ?>
<div class="coupons-post" style="background-image: url('<?php echo
$image; ?>')">
<?php /*?><div class="entry-thumbnail">
<a href="<?php the_permalink(); ?>"><?php
the_post_thumbnail('large' , array( 'class' => 'img-responsive') ); ?></a>
</div><?php */?>
<!-- <div class="post-content">
<div class="entry-meta">
<p class="date">News / <?php the_time('n.j.Y') ?></p>
</div>
<h2 class="entry-title">
<?php the_title(); ?>
</h2>
<div class="entry-summary">
<p></p><p><?php $excerpt = get_the_excerpt(); ?>
<?php echo substr($excerpt, 0, 100); ?>...</p>
<p></p>
<a class="read-more" href="<?php the_permalink(); ?>">Read More</a>
</div>
</div>-->
</div>
</article>
I want to wrap the div "coupons-post" with the link.
Like this?
<article <?php post_class('col-md-4 site-content'); ?>>
<?php
if (has_post_thumbnail( $post->ID ) ) {
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
$image = $image[0];
}
?>
<a href="<?= $image; ?>" target="_blank">
<div class="coupons-post" style="background-image: url('<?php echo $image; ?>')">
</div>
</a>
</article>
What I am trying to achieve
<div>
posts from category "vitejte"
</div>
<div>
posts from category "novinky"
</div>
This is my index.php code
<?php get_header(); ?>
<div class="body_resize">
<div class="body">
<div class="body_small2">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if ( in_category('vitejte') ) { ?>
<h2><?php the_title(); ?></h2>
<img src="wp-content/themes/trywp/images/img_1.jpg" alt="picture" width="353" height="102" />
<?php the_content('Read More...'); ?>
<div class="clr"></div>
<?php } else { ?>
<?php _e('Prosím vytvořte článek v kategorii "vitejte"'); ?>
<?php } ?>
<div class="line"></div>
</div>
<?php endwhile; else: ?>
<?php _e('Prosím vytvořte článek v kategorii "vitejte2"'); ?>
<?php endif; ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="body_small">
<h2>Novinky</h2>
<?php if ( in_category('novinky') ) { ?>
<p class="data"> 20 / May / 09</p>
<div class="clr"></div>
<p><?php the_content('Read More...'); ?> >></p>
<div class="clr"></div>
<?php } else { ?>
<?php _e('Prosím vytvořte článek v kategorii "novinky"'); ?>
<?php } ?>
<div class="line"></div>
</div>
<?php endwhile; else: ?>
<?php _e('Prosím vytvořte článek v kategorii "vitejte2"'); ?>
<?php endif; ?>
<?php get_footer(); ?>
The problem is that it returns the posts as requested but it returns also
Prosím vytvořte článek v kategorii "vitejte"
and
Prosím vytvořte článek v kategorii "novinky"
which are in the else statement and should not be returned
BTW: the text means smt like "please create a post in "vitejte" category
thanks for help
Once you've been though the loop once, have_posts() will be false - you're seeing the content of the else after the endwhile. Try calling rewind_posts() before the second loop (ie before the second <?php if (have_posts()) : while (have_posts()) : the_post(); ?>). That should allow you to loop through the posts again.
I'm trying to get my divs to float correctly in IE. They look great in Chrome and Firefox, but IE chews up the code. You can see the jsfiddle here: http://jsfiddle.net/vlyandra/kEm3R/ Basically, the image div does not line up horizontally with the entry div, and the table at the bottom (despite having a max width) is not resizing. The code to generate the posts is below:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="bordered centered">
<p class="negative-margin alignleft header"><?php the_title(); ?></p><p class="negative-margin alignright date"><?php the_date(); ?></p><div style="clear:both;"></div>
<?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 negative-margin">
<?php if ( has_post_thumbnail() ):?>
<div id="entry-left">
<?php $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
echo get_the_post_thumbnail($post->ID, 'large');
echo '</a>';?>
</div>
<div class="entry-right">
<?php the_content( __( 'More <span class="meta-nav">→</span>', 'huckleberry' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'huckleberry' ), 'after' => '</div>' ) ); ?>
</div><div style="clear:both;"></div>
<div class="entry-right">
<table class="fixed-height fixed-width">
<tr>
<td class="valigned"><h3 class="date">Details</h3>
<?php the_field('details');?>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?>
</a>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'tertiary-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'tertiary-image'); endif; ?>
</a>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'fourth-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'fourth-image'); endif; ?>
</a>
</td>
</tr>
</table>
</div>
<?php else : ?>
<?php the_content( __( 'More <span class="meta-nav">→</span>', 'huckleberry' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'huckleberry' ), 'after' => '</div>' ) ); ?>
</div>
<?php endif; ?>
<?php endif; ?>
Any help would be greatly appreciated!
I'm not seeing it. Can you send a link to your site?
Also, have you tried applying .alignleft to the images?