All of a sudden the "full left secondary-bg" background div on this page: http://goo.gl/OU4MkW is not going to the full width of the screen, and I cannot understand why. It's a WordPress based site built on skeleton framework. Here's the php for the body area of the page:
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if (!is_page_template('onecolumn-page.php')) { ?>
<?php if (is_front_page() && !get_post_meta($post->ID, 'hidetitle', true)) { ?>
<div class="full left secondary-bg">
<div class="container">
<div class="sixteen columns alpha">
<div class="eight columns alpha hp">
<?php the_content()?>
</div>
<div class="seven columns offset-by-one omega">
<div class="post-area">
<h2><?php the_field('featured_art_title'); ?></h2>
<div class="featured-post-wrap">
<img src="<?php the_field('featured_art_image'); ?>" alt="Featured Art Post" />
</div>
<p>
<?php the_field('featured_art_description'); ?> View More
</p>
</div>
</div>
</div>
</div><!-- container -->
</div>
<?php } elseif (!get_post_meta($post->ID, 'hidetitle', true)) { ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php } else {
echo '<br />';
} ?>
<?php } ?>
<!--<div class="full left">
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'skeleton' ), 'after' => '</div>' ) ); ?>
<?php edit_post_link( __( 'Edit', 'skeleton' ), '<span class="edit-link">', '</span>' ); ?>
</div> .entry-content -->
<?php comments_template( '', false ); ?>
Any help would be greatly appreciated!
change skeleton.css, please change the following line in css add width line
.column, .columns
{ float: left; display: inline;
/*margin-left: 10px; margin-right: 10px;*/
/* add width to 100% */
width: 100%;
}
Related
I need help with a product category page in Wordpress. Original code was made by someone else, and I'm fairly new to php. I may need help with looking for a way to make the product sort by date published. right now, here is the code that I have.
category-books.php
<?php
/**
* Template Name: Store Template
* #package WordPress
*/
get_header(); ?>
<div id="page-title">
<!-- 960 Container Start -->
<div class="container">
<div class="sixteen columns">
<h1>
<?php single_cat_title( '', true ); ?>
</h1>
</div>
</div>
<!-- 960 Container End -->
</div>
<?php
get_template_part( 'content', 'product4' ); ?>
<div class="blogsidebar" style="float:left !important">
<?php dynamic_sidebar('sidebar-1'); ?>
</div>
<?php get_footer(); ?>
content-product4.php
<?php function bac_wp_strip_header_tags_only( $excerpt ) {
$regex = '#(<h([1-6])[^>]*>)#';
$excerpt = preg_replace($regex,'', $excerpt);
return $excerpt;
}
add_filter( 'the_content', 'bac_wp_strip_header_tags_only', 0); ?>
<div class="container">
<?php $sidebar_side = get_post_meta($post->ID, 'incr_sidebar_layout', true);
if($sidebar_side == "left-sidebar") {
get_sidebar();
} ?>
<!-- Blog Posts ================================================== -->
<div class="twelve columns" style="float:right !important;">
<div class="product-container">
<?php $posts = query_posts($query_string . 'orderby=date&order=DESC&cat=238'); ?>
<?php while (have_posts()) : the_post(); ?>
<!-- Post -->
<div <?php post_class('post'); ?> id="product-post-2Col" > <a class="post_title" href="<?php the_permalink() ?>">
<div style="margin-bottom:10px;width: 130px;height: 180px !important; border: 2px solid #000 !important;padding: 3px;float: left;margin: 0 15px 15px 0;overlay:hidden;">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail( 'medium', array( 'class' => 'store-featured-image' ) );
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/product-image.png" alt="<?php the_title(); ?>" />
<?php } ?>
</div>
<div style="min-height:40px !important;width:50% !important;float:left;">
<h4>
<?php the_title(); ?>
</h4>
</a> </div>
<?php?>
<div class="product-description-2col">
<?php the_excerpt()?>
<a style="margin-bottom: 8px;" class="post_title" href="<?php the_permalink() ?>">Learn More</a><br/>
<?php ?>
<a href="<?php the_field('buy_now_1')?>">
<div id="buybtn">Buy Now</div>
</a>
<?php ?>
</div>
<?php ?>
<p> </p>
<p> </p>
</div>
<!-- Post -->
<?php endwhile; // End the loop. Whew. ?>
</div>
<div style="text-align:center;">
<?php posts_nav_link( ' · ', 'previous page', 'next page' ); ?>
</div>
</div>
<!-- eof eleven column -->
is there a way to add something to functions.php? I've added this line but still not working:
<?php $posts = query_posts($query_string . 'orderby=date&order=DESC&cat=238'); ?>
<?php while (have_posts()) : the_post(); ?>
Thanks for the help.
Instead of using functions.php for this, create a child theme and edit a copy of the file you want to change there.
https://codex.wordpress.org/Child_Themes
In my theme I have a blog page and a homepage (without blog loop). Now I would like to add some blog posts on my homepage (like most recent).
I am using the blog page as a template for the homepage ( I copied and renamed the original), wich works good. But I can't make any changes to it without changing the original blog page (the loop is called in an external php).
I Have no idea were to start.
This is the piece on the homepage calling the blog loop:
<?php if(have_posts()) : the_post(); ?>
<div id="main">
<div class="central-wrapper clearfix">
<div id="center" class="fullwidth">
<div id="content">
<?php if($gallery_select && $gallery_position == 1) : ?>
<?php codeus_gallery($gallery_select, $gallery_size, $gallery_style); ?>
<?php endif; ?>
<div class="inner">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="pagination"><div class="page-links-title">' . __( 'Pages:', 'codeus' ) . '</div>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
<div class="bloghome">
<?php codeus_blog_list(); ?>
</div>
<?php if($quickfinder_position == 2) : ?>
<?php codeus_quickfinder($quickfinder_select); ?>
<?php endif; ?>
<?php if($portfolio_position == 2) : ?>
<?php codeus_portfolio(implode(',',$portfolio_select), $portfolio_size, $portfolio_count, $portfolio_filter, $portfolio_title); ?>
<?php endif; ?>
<?php if($gallery_select && $gallery_position == 3) : ?>
<?php codeus_gallery($gallery_select, $gallery_size, $gallery_style); ?>
<?php endif; ?>
</div>
</div><!-- #content -->
</div><!-- #center -->
</div><!-- .central-wrapper -->
</div><!-- #main -->
<?php endif; ?>
</div><!-- wrap end -->
And this is the piece in the external php called blog.php
<?php if($blog_loop->have_posts()) : ?>
<div class="blog_list">
<ul class="styled">
<?php while ( $blog_loop->have_posts() ) : $blog_loop->the_post(); ?>
<li class="clearfix">
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'codeus_post_list_image'); ?>
<div class="comment-info">
<?php echo get_the_date('d'); ?>
<div class="date-month"><?php echo get_the_date('M'); ?></div>
</div>
<div class="post-info">
<h3><?php the_title(); ?></h3>
<?php if($image_url[0]) : ?>
<div class="post-image">
<div class="image wrap-box shadow middle">
<div class="shadow-left"></div><div class="shadow-right"> </div>
<img src=" <?php echo $image_url[0]; ?>" alt="<?php the_title(); ?>" />
</div>
</div>
<?php endif; ?>
<div class="text clearfix"><?php the_excerpt(); ?></div>
<?php codeus_author_info(get_the_ID()); ?>
</div>
</div>
</li>
<?php $post = $portfolio_posttemp; wp_reset_postdata(); ?>
<?php endwhile; ?>
</ul>
<?php codeus_pagination($page_num, $pages_count); ?>
</div>
<?php endif; ?>
Remember, I don't want to make changes in the original blog.php, because the normal blog page needs to work as it is now. I would like to make the blog work on the homepage also, but just with a maximum of 3 posts showing, perhaps of a certain category.
Help would be so welcome!!
I think I found a solution, I edited the homepage template like this:
<!-- wrap start --><div class="content-wrap">
<?php if(have_posts()) : the_post(); ?>
<div id="main">
<div class="central-wrapper clearfix">
<div id="center" class="fullwidth">
<div id="content">
<div class="inner">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="pagination"><div class="page-links-title">' . __( 'Pages:', 'codeus' ) . '</div>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
<div class="bloghome">
<?php
$page_num = (get_query_var('paged')) ? get_query_var('paged') : 1;
$items_per_page = 2;
$blog_loop = new WP_Query(array(
'post_type' => 'post',
'posts_per_page' => $items_per_page,
'paged' => $page_num
));
$pages_count = ceil($blog_loop->found_posts/$items_per_page);
global $post;
$portfolio_posttemp = $post;
?>
<?php if($blog_loop->have_posts()) : ?>
<div class="blog_list">
<ul class="styled">
<?php while ( $blog_loop->have_posts() ) : $blog_loop->the_post(); ?>
<li class="clearfix">
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'codeus_post_list_image'); ?>
<div class="comment-info">
<?php echo get_the_date('d'); ?>
<div class="date-month"><?php echo get_the_date('M'); ?></div>
</div>
<div class="post-info">
<h3><?php the_title(); ?></h3>
<?php if($image_url[0]) : ?>
<div class="post-image">
<div class="image wrap-box shadow middle">
<div class="shadow-left"></div><div class="shadow-right"></div>
<img src="<?php echo $image_url[0]; ?>" alt="<?php the_title(); ?>" />
</div>
</div>
<?php endif; ?>
<div class="text clearfix"><?php the_excerpt(); ?></div>
<?php codeus_author_info(get_the_ID()); ?>
</div>
</div>
</li>
<?php $post = $portfolio_posttemp; wp_reset_postdata(); ?>
<?php endwhile; ?>
</ul>
</div>
<?php endif; ?>
</div>
</div>
</div><!-- #content -->
</div><!-- #center -->
</div><!-- .central-wrapper -->
</div><!-- #main -->
<?php endif; ?>
</div><!-- wrap end -->
Currently, I'm attempting to have a two-columned post display layout on my index page, but unfortunately, none of my tries seem to work. My idea is to have them shown like this:
Article one Article two
Article three Article four
Article five Article six
Instead, however, they're shown like this:
Article one
Article twoArticle three
And so forth. In my content.php file, the following is the code I have:
<?php
/**
* #package dazzling
*/
?>
<div class="row"> <div class="col-sm-12 col-md-6">
<div class="thumbnail" style="padding: 0px;">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="caption"><header class="entry-header page-header">
<h3><?php the_title(); ?> <small style="color: inherit;"><li class="glyphicon glyphicon-new-window"></li></small></h3>
<?php if ( 'post' == get_post_type() ) : ?>
<small class="entry-meta">
<?php dazzling_posted_on(); ?><?php if ( ! post_password_required() && ( comments_open() || '0' != get_comments_number() ) ) : ?>
<span class="comments-link"><li class="glyphicon glyphicon-comment"></li> <?php comments_popup_link( __( 'Leave a comment', 'dazzling' ), __( '1 Comment', 'dazzling' ), __( '% Comments', 'dazzling' ) ); ?></span>
<?php endif; ?>
<?php if ( 'post' == get_post_type() ) : // Hide category and tag text for pages on Search ?>
<?php
/* translators: used between list items, there is a space after the comma */
$categories_list = get_the_category_list( __( ', ', 'dazzling' ) );
if ( $categories_list && dazzling_categorized_blog() ) :
?>
<span class="cat-links"><li class="glyphicon glyphicon-folder-open"></li>
<?php printf( __( ' %1$s', 'dazzling' ), $categories_list ); ?>
</span>
<?php endif; // End if categories ?>
<?php endif; // End if 'post' == get_post_type() ?>
<?php edit_post_link( __( 'Edit', 'dazzling' ), '<li class="glyphicon glyphicon-pencil"></li> <span class="edit-link">', '</span>' ); ?>
</small><!-- .entry-meta -->
<?php endif; ?>
</header><!-- .entry-header -->
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<?php the_excerpt(); ?>
<p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>"><?php _e( 'Continue reading', 'dazzling' ); ?> <span class="glyphicon glyphicon-chevron-right"></span></a></p>
</div><!-- .entry-summary -->
<?php else : ?>
<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" style="float: left; margin-right: 10px;" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail( 'medium', array( 'class' => 'img-thumbnail' )); ?>
</a>
<div class="caption">
<?php the_excerpt(); ?>
</div>
<?php else : ?>
<?php the_excerpt(); ?>
<?php endif; ?>
<p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>"><?php _e( 'Continue reading', 'dazzling' ); ?> <span class="glyphicon glyphicon-chevron-right"></span></a></p>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">'.__( 'Pages:', 'dazzling' ),
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
'pagelink' => '%',
'echo' => 1
) );
?>
</div><!-- .entry-content -->
<?php endif; ?>
<br>
</article></div></div></div>
<!-- #post-## -->
Could you all please explain if I'm doing anything wrong here? Thank you!
The easiest solution would probably be a CSS approach. If you assign a class to each post that is printed on the page, you could then float half to the right, and half to the left. Here is an example:
Sample HTML
<div class="wrapper">
<div class="post">Sample Post 1 Content</div>
<div class="post">Sample Post 2 Content</div>
<div class="post">Sample Post 3 Content</div>
<div class="post">Sample Post 4 Content</div>
<div class="post">Sample Post 5 Content</div>
<div class="post">Sample Post 6 Content</div>
</div>
Corresponding CSS
.post:nth-child(odd) {
float:left;
width:50%;
}
.post:nth-child(even) {
float: right;
width:50%;
}
Here is a demo where you can see this approach in action.
I'm trying to paginate a current category. But when I go to the next page, wordpress not show only all post of the current category, wordpress show all post of all categories. Somebody can help me?
Category.php
<!-- loop -->
<?php $cat_ID = get_query_var('cat'); ?>
<?php query_posts('&cat=<' . $cat_ID . '&showposts=6'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="col-sm-12 col-md-6 col-xs-12 col-lg-4">
<div class="thumbnail">
<article>
<?php the_post_thumbnail('photo-thumbnail') ?>
<div class="caption">
<h3><?php the_title(); ?></h3>
<!-- añade custom field autor del relato -->
</div>
</article>
</div>
<div class="thumbnailFooter">
<div class="pull-left" style="margin-bottom: 4px;">
<?php echo get_avatar(get_the_author_meta('ID'), 32); ?>
</div>
<div class="smallFont pull-left" style="margin-left: 5px; width: 270px;">
<span class="blue bold"><?php the_author(); ?></span>
</div>
<div class="verySmallFont pull-left" style="margin-left: 5px; margin-top: -3px;">
en <?php the_category(none); ?> el <?php the_date(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
<?php my_pagination(); ?>
<?php else : ?>
<?php endif; ?>
<!-- / fin del loop -->
Function.php
<?php
if (!function_exists('my_pagination')) :
function my_pagination() {
global $wp_query;
$big = 999999999; // need an unlikely integer
echo paginate_links(
array(
'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
'format' => '?paged=%#%',
'current' => max(1, get_query_var('paged')),
'total' => $wp_query->max_num_pages,
'prev_text' => __('« Anterior'),
'next_text' => __('Siguiente »'),
)
);
}
endif;
EDIT::::::::::
After do suggested changes (but don't works). Wordpress not limit 5 post per page and the paginator not appear.
<!-- loop de post -->
<?php
$project_category = wp_get_post_categories($post->ID); ?>
<?php $query = new WP_Query(array('posts_per_page' => 5)); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="col-sm-12 col-md-6 col-xs-12 col-lg-4">
<div class="thumbnail">
<article>
<?php the_post_thumbnail('photo-thumbnail') ?>
<div class="caption">
<a href="<?php the_permalink(); ?>">
<h3 style="font-weight:bold; margin-top: 0px; line-height: 1.3;"><?php the_title(); ?></h3>
</a>
<!-- añade custom field autor del relato -->
</div>
</article>
</div>
<div class="thumbnailFooter">
<div class="pull-left" style="margin-bottom: 4px;">
<?php echo get_avatar(get_the_author_meta('ID'), 32); ?>
</div>
<div class="smallFont pull-left" style="margin-left: 5px; width: 270px;">
<span class="blue bold"><?php the_author(); ?></span>
</div>
<div class="verySmallFont pull-left" style="margin-left: 5px; margin-top: -3px;">
en <span class="bold gray"><?php the_category(none); ?></span>
el <?php the_date(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
<div style="text-align: right; padding-right: 12px;">
<?php my_pagination(); ?>
</div>
<?php else : ?>
<?php endif; ?>
<!-- / fin del loop -->
You seem to have a left angle bracket < inside your query_posts function. Try removing that.
I modifying a wordpress template to be left with two columns on the main page with the following structure:
But the first 4 are of a category and the last 4 of another
The index code is:
http://pastebin.com/dMC0saBN
The page is (Columns are made, but all they do is repeat the post. They haven't order or filter)
crossfitlascondes.cl
The solution I occurred was to create two loops on the page and separated by , one to right column and one to left column. And so I can handle the code for each loop independently without interfering with the other column.
The code of index is:
<?php get_header();?>
<div id="contentslide">
<?php
include(TEMPLATEPATH . '/slide.php');
?>
</div>
<?php
get_sidebar();
?>
<div id="content">
<div class="clear">
</div>
<div id="contentleft">
<div id="noticias">Noticias</div>
<?php if ( is_home() ) { query_posts($query_string . '&cat=-27'); } ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="postleft" id="post-<?php
the_ID();
?>">
<div class="title">
<h2><a href="<?php
the_permalink();
?>" rel="bookmark" title="Permanent Link to <?php
the_title();
?>"><?php
the_title();
?></a></h2>
</div>
<div class="postmeta">
<span class="author">Posted by <?php
the_author();
?> </span> <span class="clock"> <?php
the_time('M - j - Y');
?></span> <span class="comm"><?php
comments_popup_link('0 Comment', '1 Comment', '% Comments');
?></span>
</div>
<div class="entry">
<?php
if (has_post_thumbnail()) {
?>
<a href="<?php
the_permalink();
?>"><img class="postimgleft" src="<?php
bloginfo('stylesheet_directory');
?>/timthumb.php?src=<?php
get_image_url();
?>&h=150&w=200&zc=1" alt=""/></a>
<?php
} else {
}
?>
<?php
wpe_excerpt('wpe_excerptlength_index', '');
?>
<div class="clear">
</div>
</div>
</div>
<?php
endwhile;
?>
<?php
endif;
?>
<?php
wp_reset_query();
?>
<div class="navigation">
<div class="alignleft"><?php previous_posts_link('« Previous Entries') ?></div>
<div class="alignright"><?php next_posts_link('Next Entries »','') ?></div>
</div>
</div>
<div id="contentright">
<div id="wod">WOD Diario</div>
<?php if ( is_home() ) { query_posts($query_string . '&cat=27&'); } ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="postright" id="post-<?php
the_ID();
?>">
<div class="title">
<h2><a href="<?php
the_permalink();
?>" rel="bookmark" title="Permanent Link to <?php
the_title();
?>"><?php
the_title();
?></a></h2>
</div>
<div class="postmeta">
<span class="author">Posted by <?php
the_author();
?> </span> <span class="clock"> <?php
the_time('M - j - Y');
?></span> <span class="comm"><?php
comments_popup_link('0 Comment', '1 Comment', '% Comments');
?></span>
</div>
<div class="entry">
<?php
if (has_post_thumbnail()) {
?>
<a href="<?php
the_permalink();
?>"><img class="postimgright" src="<?php
bloginfo('stylesheet_directory');
?>/timthumb.php?src=<?php
get_image_url();
?>&h=150&w=200&zc=1" alt=""/></a>
<?php
} else {
}
?>
<?php
wpe_excerpt('wpe_excerptlength_index', '');
?>
<div class="clear">
</div>
</div>
</div>
<?php
endwhile;
?>
<div class="clear"></div>
<?php
else:
?>
<h1 class="title">Not Found</h1>
<p>Sorry, but you are looking for something that isn't here.</p>
<?php
endif;
?>
<div class="navigation">
<div class="alignleft"><?php previous_posts_link('« Previous Entries') ?></div>
<div class="alignright"><?php next_posts_link('Next Entries »','') ?></div>
</div>
<?php
wp_reset_query();
?>
</div>
</div>
<?php
get_footer();
?>
and the code CSS(summarized) is
#content {
float:left;
width: 665px;
height:100%;
padding:10px 0px 0px 0px;
margin:23px 0px 0px 15px;
display:inline;
overflow:hidden;
}
#contentleft {
float:left;
width: 50%;
height:100%;
display:inline;
overflow:hidden;
}
#contentright {
float:left;
width: 44%;
margin-left: 23px;
height:100%;
display:inline;
overflow:hidden;
}
#contentslide {
float:left;
width: 665px;
height:100%;
padding:10px 0px 0px 0px;
margin:35px 0px 0px 15px;
display:inline;
overflow:hidden;
}