I am using Bootstrap and WordPress to create a website. I have a my main content that is 8 columns and then my sidebar which is 4. On my normal pages I put them both in one row so they align correctly, however with this page, I used the WordPress loop to create many rows with content in, this means my sidebar is then not in the same row as my content and gets pushed to below it on the screen. Is it possible to align them horizontally?
Here is the code I’m using.
<?php if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<div class="row case-studies">
<div id="page_content">
<div class="col-md-8">
<div class="case_summary_image col-md-4">
<?php the_post_thumbnail('casestudy img-responsive');?>
</div>
<div class="case_summary col-md-8"></a>
<a style="font-size:18px; line-height:30px; color:#666666; font-weight:bold; text-decoration:none" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php the_excerpt(); ?>
</div>
</div>
</div>
</div>
<!-- sidebar -->
<?php endwhile; endif; ?>
<div class="col-md-4">
<?php get_sidebar();?>
</div>
You still need a container or a row to encompass the content and sidebar for the columns to work like you want them to.
You must create loop main area and add class to this. So,
<div class="col-md-8">
<!-- your loop, wp query -->
</div>
<div class="col-md-4">
<!-- your theme sidebar -->
</div>
In summary, you must have one col-md-8 and one col-md-4.
Related
Here is LINK I am working on it. The About Us section is not displaying full contents and showing more button to go to next page whereas I want to show full contents of About Us page instead of short summary.
I checked a lot but not found any option in the theme to fix it
UPDATE:
I found this in (page-template/custom-home-page.php)
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="row">
<div class="col-lg-8 col-md-7">
<h3><?php the_title(); ?></h3>
<hr>
<p><?php the_excerpt(); ?></p>
<div class="more-btn">
<?php esc_html_e('MORE','vw-one-page'); ?>
</div>
</div>
<div class="col-lg-4 col-md-5">
<img src="<?php the_post_thumbnail_url('full'); ?>"/>
</div>
</div>
<?php $i++; endwhile;
wp_reset_postdata();?>
<?php else : ?>
<div class="no-postfound"></div>
<?php endif;
endif;?>
</div>
</section>
Best regards
That code inside your theme with high probability.
Try to search inside theme files "/wp-content/themes/your_theme_name", something like that:
<div class="col-lg-8 col-md-7">
<h3>About Us</h3> <!-- Or <?php the_title(); ?> -->
<hr>
<?php the_exerpt(); ?>
<div class="more-btn">
MORE <!-- Or something like <?php the_permalink( ... ) ?> -->
</div>
</div>
This is an example. After all, I can't know how it is done in your theme.
Then <?php the_exerpt(); ?> change to <?php the_content(); ?>. and remove or hide:
<div class="more-btn">
...
</div>
But if this is not your personal WordPress theme, then it is better to do through Child Theme
I'm very new to php and wordpress and need help. I'm trying to change my bootstrap responsive grid with php. >992px I should have 3 columns, >768px I should have only 2 columns and <767px I should have only one. How can I do this with php? Really appreciate the help.
Here's my code:
<div class="row">
<?php $i = 1; while(have_posts()) : the_post();?>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="cover-card">
<?php the_post_thumbnail('full', array('class' => 'image img-responsive')); ?>
<div class="overlay">
<div class="text">
<strong><?php the_title(); ?></strong>
<?php the_content(); ?>
Comprar
</div> <!-- /.text -->
</div> <!-- /.overlay -->
</div> <!-- /.cover-card -->
</div> <!-- /.col-md-4 -->
<?php if ( $i % 3 === 0 ) { echo '</div> <!-- /.row -->
<div class="row">'; } ?>
<!-- store item -->
<?php $i++; endwhile; wp_reset_query(); ?>
</div>
This is what happens with my loop on the sm resolution:
<div class="col-lg-4 col-md-6 col-sm-12"></div>
The grid system is based off the idea that there are 12 columns. In the documentation it will describe what width pertains to the xs, sm, md, and lg classes.
The above solution should work because it will place three cards per row if the display is greater than 992px, two if greater than 768px, and one if less.
Here's a little example
I'm currently working on a Wordpress site, using the Rhythm theme - it's default template has four columns built into the footer, and I'd like to only have three.
So in my child theme, I went into the widget section and removed a column from the php code, so it looks like this:
if (ts_get_opt('footer-widgets-enable') == 1): ?>
<!-- Divider -->
<hr class="mt-0 mb-0"/>
<!-- End Divider -->
<!-- Widgets Section -->
<section class="footer-sidebar page-section">
<div class="container relative">
<div class="row multi-columns-row">
<div class="col-sm-8 col-md-4 col-lg-4">
<?php if (is_active_sidebar( ts_get_custom_sidebar('footer-1', 'footer-sidebar-1') )): ?>
<?php dynamic_sidebar( ts_get_custom_sidebar('footer-1', 'footer-sidebar-1') ); ?>
<?php endif; ?>
</div>
<div class="col-sm-8 col-md-4 col-lg-4">
<?php if (is_active_sidebar( ts_get_custom_sidebar('footer-2', 'footer-sidebar-2') )): ?>
<?php dynamic_sidebar( ts_get_custom_sidebar('footer-2', 'footer-sidebar-2') ); ?>
<?php endif; ?>
</div>
<div class="col-sm-8 col-md-4 col-lg-4">
<?php if (is_active_sidebar( ts_get_custom_sidebar('footer-3', 'footer-sidebar-3') )): ?>
<?php dynamic_sidebar( ts_get_custom_sidebar('footer-3', 'footer-sidebar-3') ); ?>
<?php endif; ?>
</div>
</div>
</div>
</section>
<!-- End Widgets Section -->
The problem I'm having is that the page is still referencing the code with four columns instead. So I'm guessing my issue is in my footer.php file, or the template-parts.php file and that it's not pointing to the proper file.
My biggest concern is that I didn't set up my child theme correctly, and now the coding is trying to reference two different themes.
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.
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.