I want popular-excerpt to be margin-bottom:20px however it won't work. I've tried doing both margin-bottom and padding-bottom but neither of them work.
Here is my code
a.popular-excerpt {
text-decoration: none;
color: #000000;
margin-bottom: 20px;
}
<div id="slider">
<?php
$carousel_cat = get_theme_mod('carousel_setting','1');
$carousel_count = get_theme_mod('count_setting','4');
$month = date('m');
$year = date('Y');
$new_query = new WP_Query( array('posts_per_page' => $carousel_count, 'meta_key' => 'wpb_post_views_count', 'orderby' => 'meta_value_num', 'order' => 'DESC','monthnum'=>$month,'year'=>$year ));
?>
<?php if ( $new_query->have_posts() ) : ?>
<?php while ( $new_query->have_posts() ) : $new_query->the_post(); ?>
<div class="item">
<?php the_post_thumbnail('popular-posts'); ?>
<h2><a class="popular-category"
<?php
$categories = get_the_category();
$separator = ", ";
$output = '';
if ($categories) {
foreach ($categories as $category) {
$output .= '' . $category->cat_name . '' . $separator;
}
echo trim($output, $separator);
}
?></a></h2>
<p>
<a class="popular-excerpt" href="<?php the_permalink(); ?>"><?php echo get_the_excerpt(); ?></a>
</p>
</div>
<?php endwhile; wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'Sorry, No Popular Posts Found ' ); ?></p>
<?php endif; ?>
</div>
Your <a> element is an inline element and top and bottom margins do not affect inline elements. You should set its display to block or inline-block.
a.popular-excerpt {
text-decoration: none;
color: #000000;
margin-bottom: 20px;
display:block;
}
Related
Recently having problems probably because of a wordpress update. This was working and now it isn't. I am using advanced custom fields to grab the category id. Any one know what is going on here?
<?php
$args = array(
'post_type' => 'messages_single',
'posts_per_page' => 10,
'cat' => '' . get_field('category') . '',
'order' => ASC,
);
$q = new WP_Query( $args);
if ( $q->have_posts() ) {
while ( $q->have_posts() ) {
$q->the_post(); ?>
<div class="series-item">
<div class="series-thumb">
<?php if ( has_post_thumbnail() ) { ?>
<img src="<?php the_post_thumbnail_url( 'full' ); ?>" alt="<?php the_title(); ?>" class="zoom" /></div>
<?php
}
else { ?>
<img src="/img/image-holder.png" alt="<?php the_title(); ?>" /></div>
<?php } ?>
<div class="series-info">
<h3><?php the_title(); ?></h3>
<div class="mspeaker">
<?php
if(get_field('other_speaker'))
{
echo '' . get_field('other_speaker') . '';
}
else {
echo '' . get_field('speaker') . '';
}
?>
</div>
</div><!-- .series-item-->
<?php }
wp_reset_postdata();
}
?>
I've done a wordpress script that displays a grid of thumbnails posts making this code:
<div class="col-sm-12 col-md-12" style="background-color: #ccc; padding-top: 30px;">
<article <?php post_class( 'article' ); ?> id="post-<?php the_ID(); ?>">
<?php
$child_pages = new WP_Query( array(
'post_type' => 'page', // set the post type to page
'posts_per_page' => 10, // number of posts (pages) to show
'post_parent' => 17, // enter the post ID of the parent page
'no_found_rows' => true, // no pagination necessary so improve efficiency of loop
'order_by' => 'title',
'order' => 'asc',
) );
if ( $child_pages->have_posts() ) : while ( $child_pages->have_posts() ) : $child_pages->the_post();
?>
<div class="col-md-6 thumbnail-frontpage clearfix">
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<a href = "<?php the_permalink(); ?>" > <img src = "<?php echo $image[0]; ?>" onmouseover="this.src='<?php the_field('rollover_image'); ?> ' " onmouseout="this.src='<?php echo $image[0]; ?>'" /> <?php the_title(); ?> </a>
</div>
<?php
endwhile;
endif;
wp_reset_postdata();
?>
<!-- <p class=""><?php the_content( ); ?></p> -->
</article>
</div>
Now I'd like to differentiate the color of the thumbnails border separating odds from evens.
How can i do it using while conditional code?
If "border color differentiation" is your only purpose here, I suggest you use CSS, not PHP.
.thumbnail-frontpage:nth-child( even ) {
border: 1px solid red;
}
.thumbnail-frontpage:nth-child( odd ) {
border: 1px solid blue;
}
You can look it up here: http://www.w3schools.com/cssref/sel_nth-child.asp
you want like this
<?php
$child_pages = new WP_Query( array(
'post_type' => 'page', // set the post type to page
'posts_per_page' => 10, // number of posts (pages) to show
'post_parent' => 17, // enter the post ID of the parent page
'no_found_rows' => true, // no pagination necessary so improve efficiency of loop
'order_by' => 'title',
'order' => 'asc',
) );
$i=0;
if ( $child_pages->have_posts() ) : while ( $child_pages->have_posts() ) : $child_pages->the_post();
if($i%2==0){
$thumbnail = 'thumbnail';
}else{
$thumbnail = 'single-post-thumbnail';
}
?>
<div class="col-md-6 thumbnail-frontpage clearfix">
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), $thumbnail ); ?>
<a href = "<?php the_permalink(); ?>" > <img src = "<?php echo $image[0]; ?>" onmouseover="this.src='<?php the_field('rollover_image'); ?> ' " onmouseout="this.src='<?php echo $image[0]; ?>'" /> <?php the_title(); ?> </a>
</div>
<?php
$i++;
endwhile;
endif;
wp_reset_postdata();
?>
<!-- <p class=""><?php the_content( ); ?></p> -->
</article>
</div>
I have this problem creating a navigation that reacts with my get_posts($args). Have tried everything, and all I can find on the web is solutions done with wp query.
I use ACF and Bootstrap, so I would really like to stick with get_posts.
The code beneath here is my current code, that works perfectly to only show 5 post. But how do I create a navigation for the pagination?
<div class="articles">
<?php
$args = array( //'numberposts' => -1
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 5,
'paged' => $paged,);
$posts= get_posts( $args );
if ( $posts ) :
$counter = 1;
foreach ( $posts as $p ) :
$classCount = 'post-'.$counter;
if( $classCount == 'post-1' ) : echo '<div class="mediumPost col-xs-12 col-sm-6 col-md-6 col-lg-6">';
elseif( $classCount == 'post-2' || $classCount == 'post-3' ) : echo '<div class="smallPost col-xs-12 col-sm-6 col-md-6 col-lg-6">';
elseif( $classCount == 'post-4' ) : echo '<div class="largePost col-xs-12 col-sm-12 col-md-12 col-lg-12">';
elseif( $classCount == 'post-5' ) : echo '<div class="mediumPost col-xs-12 col-sm-6 col-md-6 col-lg-6">';
elseif( $classCount == 'post-6' || $classCount == 'post-7' ) : echo '<div class="smallPost col-xs-12 col-sm-6 col-md-6 col-lg-6">';
else : echo '<div class="smallPost col-xs-12 col-sm-6 col-md-6 col-lg-6">';
endif; ?>
<?php $postImg = get_field('post_image', $p->ID ); if( !empty($postImg) ): ?>
<img src="<?php echo $postImg['url']; ?>" alt="<?php if(!empty($postImg['alt'])): echo $postImg['alt']; else : echo the_title(); endif; ?>" />
<?php endif; ?>
<div class="iconBox">
<?php $getIcon = get_field('post_type', $p->ID); ?>
<?php $catIcon = get_field($getIcon, 132); ?>
<?php if( !empty($catIcon) ): ?>
<img class="iconImg" src="<?php echo $catIcon['url']; ?>" alt="<?php if(!empty($catIcon['alt'])): echo $catIcon['alt']; else : echo the_title(); endif; ?>" />
<?php endif; ?>
</div>
<?php $categories = get_the_category($p->ID);
$category_id = $categories[0]->cat_ID; ?>
<?php if( $category_id == 9 ) : ?>
<h4 data-toggle="modal" data-target="#myModal-<?php echo $counter ?>"><?php echo get_the_title( $p->ID ); ?></h4>
<span class="articles-btn" data-toggle="modal" data-target="#myModal-<?php echo $counter ?>">Watch link</span>
<!-- Modal -->
<div class="modal fade" id="myModal-<?php echo $counter ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h5 class="modal-title" id="myModalLabel"><?php echo get_the_title( $p->ID ); ?></h5>
</div>
<div class="modal-body">
<div class="embed-container">
<?php // get iframe HTML
$iframe = get_field('post_embed', $p->ID);
// use preg_match to find iframe src
preg_match('/src="(.+?)"/', $iframe, $matches);
$src = $matches[1];
// add extra params to iframe src
$params = array(
'controls' => 1,
'hd' => 1,
'autohide' => 1
);
$new_src = add_query_arg($params, $src);
$iframe = str_replace($src, $new_src, $iframe);
// add extra attributes to iframe html
$attributes = 'frameborder="0"';
$iframe = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $iframe); ?>
<?php echo $iframe; ?>
</div>
</div>
</div>
</div>
</div>
<?php else : ?>
<h4><?php echo get_the_title( $p->ID ); ?></h4>
<span class="articles-btn">READ MORE</span>
<?php endif; ?>
</div> <!--postSize div-->
<?php $counter++; if ( 11 === $counter ) $counter = 1; endforeach; wp_reset_postdata();?>
<?php endif; ?>
</div>
Copy this function in your functions.php
function custom_pagination($numpages = '', $pagerange = '', $paged='') {
if (empty($pagerange)) {
$pagerange = 2;
}
/**
* This first part of our function is a fallback
* for custom pagination inside a regular loop that
* uses the global $paged and global $wp_query variables.
*
* It's good because we can now override default pagination
* in our theme, and use this function in default queries
* and custom queries.
*/
global $paged;
if (empty($paged)) {
$paged = 1;
}
if ($numpages == '') {
global $wp_query;
$numpages = $wp_query->max_num_pages;
if(!$numpages) {
$numpages = 1;
}
}
/**
* We construct the pagination arguments to enter into our paginate_links
* function.
*/
$pagination_args = array(
'base' => get_pagenum_link(1) . '%_%',
'format' => 'page/%#%',
'total' => $numpages,
'current' => $paged,
'show_all' => False,
'end_size' => 1,
'mid_size' => $pagerange,
'prev_next' => True,
'prev_text' => __('«'),
'next_text' => __('»'),
'type' => 'plain',
'add_args' => false,
'add_fragment' => ''
);
$paginate_links = paginate_links($pagination_args);
if ($paginate_links) {
echo "<nav class='custom-pagination'>";
echo "<span class='page-numbers page-num'>Page " . $paged . " of " . $numpages . "</span> ";
echo $paginate_links;
echo "</nav>";
}
}
Put this in your css
.custom-pagination span,
.custom-pagination a {
display: inline-block;
padding: 2px 10px;
}
.custom-pagination a {
background-color: #ebebeb;
color: #ff3c50;
}
.custom-pagination a:hover {
background-color: #ff3c50;
color: #fff;
}
.custom-pagination span.page-num {
margin-right: 10px;
padding: 0;
}
.custom-pagination span.dots {
padding: 0;
color: gainsboro;
}
.custom-pagination span.current {
background-color: #ff3c50;
color: #fff;
}
Put this above your arguments list in get_posts()
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
after the loop of get posts at the bottom paste this
<?php
if (function_exists(custom_pagination)) {
custom_pagination(count($posts) ,"",$paged);
}
?>
Basically I'm making a site on Wordpress using the Wordpress theme "Restaurateur". As you can see on the demo home page here http://wprestaurateur.com/ using the Alt homepage with static slider template, below the navigation is the picture slider and then below that some text. I've basically completed the site except I want the text to show up first and then have the picture slider below it. I've tried all I can think of with no luck. Any suggestions? Thanks.
EDIT: Added the .php file for the template im using for the home page.
<div id="content" class="clearfix">
<div id="main" class="clearfix sldr" role="main">
<div id="slide-wrap">
<?php if ( have_posts() ) : ?>
<div id="load-cycle"></div>
<div class="cycle-slideshow alt-static" <?php
if ( get_theme_mod('restaurateur_slider_effect') ) {
echo 'data-cycle-fx="' . wp_kses_post( get_theme_mod('restaurateur_slider_effect') ) . '" data-cycle-tile-count="10"';
} else {
echo 'data-cycle-fx="scrollHorz"';
}
?> data-cycle-slides="> div.slides" <?php
if ( get_theme_mod('restaurateur_slider_timeout') ) {
$slider_timeout = wp_kses_post( get_theme_mod('restaurateur_slider_timeout') );
echo 'data-cycle-timeout="' . $slider_timeout . '000"';
} else {
echo 'data-cycle-timeout="3000"';
}
?> >
<div class="cycle-pager"></div>
<?php while ( have_posts() ) : the_post(); ?>
<?php if ( has_shortcode( $post->post_content, 'gallery' ) ) : ?>
<?php
$gallery = get_post_gallery( $post, false );
$ids = explode( ",", $gallery['ids'] );
$hasgallery = 1;
foreach( $ids as $id ) {
$title = get_post_field('post_title', $id);
$meta = get_post_field('post_excerpt', $id);
$link = wp_get_attachment_url( $id );
$image = wp_get_attachment_image( $id, array( 1000, 640 ));
?>
<div class="slides">
<div id="post-<?php the_ID(); ?>" <?php post_class('post-theme'); ?>>
<div class="slide-thumb"><?php echo $image; ?></div>
</div>
</div><!-- .slides -->
<?php } ?>
<?php else : ?>
<?php
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID,
'orderby' => 'menu_order',
'order' => 'ASC'
);
$attachments = get_posts( $args );
if ( $attachments ) {
foreach ( $attachments as $attachment ) { ?>
<div class="slides">
<div id="post-<?php the_ID(); ?>" <?php post_class('post-theme'); ?>>
<div class="slide-thumb"><?php echo wp_get_attachment_image( $attachment->ID, array( 1000, 640 ), false, '' ); ?></div>
</div>
</div>
<?php }
} else {
?>
<div class="no-slide-image"><?php _e('Images added to this page will appear here', 'restaurateur'); ?></div>
<?php
} ?>
<?php endif; ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
<?php $content = restaurateur_content(9999); ?>
<?php $content = preg_replace(array('{<a[^>]*><img}','{/></a>}'), array('<img','/>'), $content); ?>
<?php $content = preg_replace('/<img[^>]+./', '', $content); ?>
<?php $content = preg_replace('#<p>\s*+(<br\s*/*>)?\s*</p>#i', '', $content); ?>
<div class="intro-content">
<?php echo $content; ?>
</div>
</div> <!-- end #main -->
</div> <!-- end #content -->
Well we need to see the php file for your homepage to be able to help. But there will be a function that calls the slider, and you'll need to move it below the text content area. Or you can just add some text ahead of that slider function yourself.
I really can't figure this out. I'm trying to have posts all posts on a page from one category, but I still get all categories. This is the code I'm using now. I thought I could manage with WP_Query( array( 'posts_per_page' => -1, 'category_name' => 'resep' ) );, but it totally drives me nuts.
<?php /* Template Name: Blog */ ?>
<?php get_header(); ?>
<div id="content-wrap">
<div id="content">
<div class="post_content">
<h1 class="archive_title"><?php the_title(); ?></h1>
<?php
$query['post_type'] = 'post';
// WP 3.0 PAGED BUG FIX
if ( get_query_var('paged') )
$paged = get_query_var('paged');
elseif ( get_query_var('page') )
$paged = get_query_var('page');
else
$paged = 1;
//$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$query['paged'] = $paged;
$recipe_posts = new WP_Query( array( 'posts_per_page' => -1, 'category_name' => 'resep' ) );
while ( $recipe_posts->have_posts() ) { $recipe_posts->the_post(); }
query_posts($query);
if (have_posts()) : ?>
<?php $more = 0; ?>
<div class="posts">
<?php while (have_posts()) : the_post();
$is_recipe = in_category('Resep'); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?>>
<?php if (option::get('index_thumb') == 'on') {
get_the_image( array( 'size' => 'loop', 'width' => option::get('thumb_width'), 'height' => option::get('thumb_height'), 'before' => '<div class="post-thumb">', 'after' => '</div>' ) );
} ?>
<div class="details">
<h2 class="title"><?php the_title(); ?></h2>
<?php if ( option::get('display_meta') == 'on' ) { ?>
<div class="meta">
<?php
if ( $is_recipe ) {
$fields = get_fields();
if ( !empty( $fields ) ) echo $fields;
} else { ?>
<p><strong><img src="<?php echo get_template_directory_uri() . '/images/person.png'; ?>" /><?php _e('Author', 'wpzoom'); ?>:</strong><?php the_author_posts_link(); ?></p>
<p><strong><img src="<?php echo get_template_directory_uri() . '/images/clock.png'; ?>" />
<?php _e('Posted', 'wpzoom'); ?>
:</strong> <?php echo get_the_date(); ?></p>
<?php } ?>
</div>
<?php } ?>
<div class="entry">
<?php the_content('<span>'.__('Read More', 'wpzoom').' ›</span>'); ?>
</div>
<p>
<?php if ( option::get('display_readmore') == 'on' && (option::get('display_content') == 'Excerpt') ) { ?>
<a href="<?php the_permalink(); ?>" class=" clean more-link">
<?php _e( ( $is_recipe ? 'Lihat Resep' : 'Read More' ), 'wpzoom' ); ?>
</a>
<?php } ?>
<?php edit_post_link( __('Edit', 'wpzoom'), ' <small>', '</small>' ); ?>
</p>
</div>
<div class="cleaner"> </div>
</div>
<!-- /.post -->
<?php endwhile; ?>
</div>
<div class="cleaner"> </div>
<?php get_template_part( 'pagination' ); ?>
<?php wp_reset_query(); ?>
<div class="cleaner"> </div>
<?php endif; ?>
</div><!-- / .post_content -->
</div><!-- / #content -->
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
You're making it far too complex, just specificy the stuff you need inside the while loop:
$recipe_posts = new WP_Query( array( 'posts_per_page' => -1, 'category_name' => 'resep' ) );
while ( $recipe_posts->have_posts() ) {
$recipe_posts->the_post();
echo '<li>' . get_the_title() . '</li>';
}
wp_reset_query();
You have entered loop inside loop, try this following with cleaning your code:
$args = array('posts_per_page' => -1 , 'category_name' => 'resep');
$recipe_posts = new WP_Query($args);
if($recipe_posts->have_posts()) :
while($recipe_posts->have_posts()) :
$recipe_posts->the_post();
?>
<h1><?php the_title() ?></h1>
<div class='post-content'><?php the_content() ?></div>
<?php
endwhile;
else:
?>
Oops, there are no posts.
<?php
endif;
?>
I cleaned the whole template, but posts from other categories were still there. In the end I managed with these lines
global $wp_query;
$args = array_merge( $wp_query->query, array( 'category_name' => 'resep' ) );
query_posts( $args );
$recipe_posts = new WP_Query($args);
$more = 0;
if($recipe_posts->have_posts()) :
while ($recipe_posts->have_posts()) : $recipe_posts->the_post();?>