I'm trying to structure a wordpress search page to include a sidebar within a container that has the "row" class from the bootstrap css. My goal is for the posts to show up on the left side of the container and the sidebar I want to show up on the right. Currently, if the row container is within the loop, I get the same number of sidebars as I have posts. If I move the row container out of the loop, either the sidebar is at the bottom and the <"hr"> lines between each post are pushed to the right side of the container or if I use float on the sidebar containers, I don't get any <"hr"> lines at all.
Any insight is appreciated in pushing the <"hr"> lines to the left with their respective posts and keeping the sidebar on the right at full screen size. For reference, the sidebar is located within the include.php file at the bottom of the row container.
search page code:
<?php get_header(); ?>
<?php if ( have_posts() ) : ?>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><?php printf( __( 'Search Results for: %s' ), esc_html( get_search_query() ) ); ?></h1>
<ol class="breadcrumb">
<li>Home
</li>
<li class="active">Blog</li>
</ol>
</div>
</div>
<div class="row">
<?php
// Start the loop.
while ( have_posts() ) : the_post(); ?>
<div class="col-lg-8">
<h3>
<?php the_title(); ?>
</h3>
<p>Posted on <?php the_time('F j, Y'); ?> by <?php the_author_posts_link(); ?>
</p>
<p><?php the_excerpt(); ?></p>
<a class="btn btn-primary" href="<?php the_permalink(); ?>">Read More <i class="fa fa-angle-right"></i></a>
</div>
<hr>
<?php endwhile; ?>
<?php include 'include.php'; ?>
</div>
<div class="navigation"><p><?php posts_nav_link('','« Newer Posts','Older Posts »'); ?></p></div>
<?php else: ?>
<p><?php _e('Sorry, there are no posts.'); ?></p>
<?php endif; ?>
<?php get_footer(); ?>
Thanks for any help and insight :)
You need to move your <div class="col-lg-8"> outside of your while() statement so that you only have one grid column instead of each blog post being inside of its own grid column.
This is assuming that your sidebar had the class col-lg-4.
Related
I have a Wordpress website and I want a personalized text below the list of entries or articles, a static page below the list. that the page I can choose and publish it below.
Is there any way to do it?
<div class="latest-posts eightcol">
<?php the_post(); ?>
<article class="post">
<h2><a title="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h2>
<div class="entry-meta links-turquoise">
<?php the_time('F j, Y'); ?> —
<span class="author"> <?php the_author(); ?>utvecklare</span>
</div><!-- .entry-meta .links-turquoise -->
<div>
<?php the_content(); ?>
</div>
</article>
</div><!-- .latest-posts .eightcol -->
What I don't know how to write is the static part.
I want to create this template so that I can apply the same layout to more then one page.
I hope you understand what I'm looking for.
I'm trying to style my Wordpress search results so that they appear in columns (3 columns per row) but somehow it's not working. Maybe you can help me? I've googled this problem and tried placing the while loop inside the row div but that wouldn't work. The site is: www.medical-promotion.de
Thanks for your help! :)
Below is the code provided by the theme.
<?php
/**
* Search
*/
?>
<?php get_header(); ?>
<section class="site-content">
<div class="container">
<?php if( have_posts()) : ?>
<div class="row">
<?php while ( have_posts()) : the_post(); ?>
<div class="col-lg-4 col-sm-4 col-xs-12">
<div class="blog_large">
<?php
$aneeq_post_slide = get_post_meta( $post->ID, 'aneeq_all_post_slides_settings_'.$post->ID, true);
//blog option settings
$aneeq_option_settings = get_option('aneeq_blog_settings');
//feature img url
$aneeq_url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );
?>
<article class="post">
<figure class="post_img">
<a href="<?php the_permalink(); ?>">
<?php if($aneeq_url != NULL) { the_post_thumbnail(); } ?>
</a>
</figure>
<div class="post_date">
<span class="day"><?php echo get_the_date('j'); ?></span>
<span class="month"><?php echo get_the_date('M'); ?></span>
</div>
<div class="post_content">
<div class="post_meta">
<h2>
<?php the_title(); ?>
</h2>
<div class="metaInfo">
<span><i class="fa fa-user"></i> <?php esc_html_e('By', 'aneeq') ?> <?php the_author(); ?> </span>
<?php if (has_category()) : ?>
<span><i class="fa fa-th-list"></i>
<?php the_category(' , ');?>
</span>
<?php endif; ?>
</div>
</div>
<?php the_content(); ?>
</div>
</article>
</div>
</div>
</div><!--/.row-->
</div> <!--/.container-->
</section>
<?php get_footer(); ?>
Have a look at the below image. That's the output of the file you shared.
As you can see within the post_content div and underneath the post_meta div that's where the search list is located, not way up higher where the row class is.
In your code, the output of that block relates to the following statement.
<?php the_content(); ?>
So, it looks like the content of the page is pulled in dynamically. Have a look in the WordPress admin section (when you edit the search page) and see if anything there gives you a clue.
Else, search for the fsn-row full-width-row classes within the files of your theme directory. This will give you a clue which file to edit.
I'm creating a Wordpress template and need some advice. I'm using PHP inline
ul to display post results from different categories in a home page.
That works for me when I want all the posts displayed on the same size. However, I want some of the lines (categories) to include posts in different width. This is the code I use:
<ul class="posts">
<?php query_posts('category_name="category1"&showposts=4'); while (have_posts()) : the_post(); ?>
<li>
<div class="col-md-3">
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumb">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<h4 class="post-title"> <a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a> </h4>
<?php the_excerpt();?>
</div>
</li>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>
This one returns 4 inline results for Category1, all with the same width. Any suggestions on how to edit each result's width individually?
<div class="col-md-3"> tells me this theme is based on Bootstrap. It divides the page into twelve equal columns. Try changing the class to col-md-6 and it will take up half the page. Change it to col-md-4 and it will take up a third, etc.
This pastie has both the functions.php and home.php code for review. For reference, my goal is to make the image follow the same rules found in this jsfiddle.
My goal with the function is to pull the first image from a post and put it above the summary on my blog's homepage. I've been able to pull the image from the post, but it isn't following the responsive class I used in line 60. Is it that I am pulling the image itself and not the URL? How can I adjust my function to make this work? Outside of database connections and form validation, I am a complete php beginner.
Please see jsfiddle and pastie for code
Use Post_Thumbnails instead.
In your functions.php add the following:
add_theme_support( 'post-thumbnails' );
This will enable the Featured Image meta box in the sidebar of your posts and pages. You will need to set this for posts. Instead of adding an image to your post's content, you can set your desired image as the featured image.
Update your home.php to the following:
<?php get_header(); ?>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Blog</h1>
<ol class="breadcrumb">
<li>Home
</li>
<li class="active">Blog</li>
</ol>
</div>
</div>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="row">
<div class="col-md-1 text-center">
<p><?php the_time('l, F jS, Y'); ?></p>
</div>
<?php if ( has_post_thumbnail() ) : ?>
<div class="col-md-5">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'large', array( 'class' => 'img-responsive img-hover' ) ); ?>
</a>
</div>
<?php endif; ?>
<div class="col-md-6">
<h3>
<?php the_title(); ?>
</h3>
<p>by <?php the_author_posts_link(); ?>
</p>
<p><?php the_excerpt(); ?></p>
<a class="btn btn-primary" href="<?php the_permalink(); ?>">Read More <i class="fa fa-angle-right"></i></a>
</div>
</div>
<hr>
<?php endwhile; ?>
<div class="navigation"><p><?php posts_nav_link('','« Newer Posts','Older Posts »'); ?></p></div>
<?php else: ?>
<p><?php _e('Sorry, there are no posts.'); ?></p>
<?php endif; ?>
</div>
<?php get_footer(); ?>
has_post_thumbnail() checks to see if the current $post has a featured image set.
the_post_thumbnail() outputs the image tag. This functions takes a size as it's first parameter. We are setting this to large as it should satisfy your layout.
The second parameter is an array of attributes. We are able to add additional classes to the image using this parameter.
I've been making a wordpress theme recently and just now some of the code just stopped working. The post formatting disappeared and now I just have a paragraph with text inside it for each post! Here's the php code for the post:
<?php get_header(); ?>
<div id="content">
<div class="wrap">
<div id="leftcol">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="meta alignleft">
<span class="date"><?php the_time('F j, y') ?></span>
<span class="comments"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></span>
<span class="tags"><?php the_tags('', ', ', ''); ?></span>
</div>
<div class="body alignright">
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</div>
<div class="clear"></div>
</div>
<?php endwhile; ?>
<ul>
<li><?php next_posts_link('« Older Entries') ?></li>
<li><?php previous_posts_link('Newer Entries »') ?></li>
</ul>
<?php else : ?>
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
<?php endif; ?>
</div>
</div>
</div>
This is all the code in the index.php file in the theme folder. I have some metadata of the post on the left side of the post and the actual post on the right side.
This is what is outputs to the page. (This is only what is inside the #content div. There was too much for me to post everything.)
<div id="content"><div class="wrap">
<div id="leftcol">
<p>This is some random text that’s added just for effect. Thanks for the consideration. This is some random text that’s added just for effect. Thanks for the consideration. This is some random text that’s added just for effect. Thanks for the consideration. This is some random text that’s added just for effect. Thanks for the consideration. </p>
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress</p>
</div></div></div>
What happened!?
Do you mean that the only thing that gets processed is <?php the_excerpt(); ?>. Or is everything getting parsed, but you haven't posted the stuff generated by <?php the_time('F j, y') ?> between the other spans?
If the letter is the case, than it's simply a matter of using another template tag. the_excerpt only posts a small portion of a post, limited to a certain amount of characters. If you want to display the whole post, you'll need to use the_content.