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.
Related
I want to load page2 with AJAX in my dynamic posts loop. I searched for some possible ways and found this guide https://unicorntears.dev/snippets/load-more-posts/ but it didn't come out to be working.
I want to load the next page in the post loop by AJAX, by simply clicking a load more button.
Archive.php I am currently using is
<?php get_header(); ?>
<main class="main-content">
<div class="inner">
<?php if(have_posts()): ?>
<ul class="product-list">
<?php while(have_posts()):the_post(); ?>
<li class="list-product">
<a href="<?php the_permalink(); ?>">
<div class="product-thumbnail">
<img class="lazyload" data-src="<?php the_post_thumbnail_url(); ?>" />
</div>
<h2 class="product-title"><?php the_title(); ?></h2>
<span class="product-price"><?php if($product->is_type('variable')){echo variable_price_html();}elseif($product->is_type('simple')){echo simple_price_html();} ?></span>
</a>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
</div>
</main>
<?php get_footer(); ?>
Since I am not familiar with JS, I want someone's help. Please someone help me make this happen.
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 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.
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 did this to show 5 posts of a diferent category in my wordpress page:
<?php $archive_query = new WP_Query('category_name=anc&showposts=5');
while ($archive_query->have_posts()) : $archive_query->the_post(); ?>
<div class="collection">
See All
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-image">
<img src="<?php echo catch_that_image(); ?>">
<span class="card-title"><?php the_title(); ?></span>
</div>
<div class="card-content">
</div>
<div class="card-action">
Ver más
</div>
</div>
</div>
</div>
<?php endwhile; ?>
It worked, however, now my another pages don´t work, they show posts from that category when i click on those pages instead of showing their respectives posts, what could be the issue?
You can reset data in the global $post object after endwhile;
<?php
while( $your_query->have_posts() ):
...
endwhile;
wp_resest_postdata(); ?>
I came to a solution, after the following line:
<?php endwhile;?>
I wrote this:
<?php wp_reset_query();?>
It resets the query so like that the main loop ( because it´s depend of the main loop ) can work perfectly, i hope this helps everyone, this code is an easy way to show any post of a different category.