I am using Bootstrap based starter theme "Understrap", which incorporates bootsrap into Underscores.
My goal would be to display my latest posts on the front page in three columns horizontally, so:
1 2 3
4 5 6
7 8 9
...
I'm a beginner, so i'm having a hard time figuring out how to approach this with Understrap.
My Index.php code is shown below. Any help would be greatly appreciated!
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* #package understrap
*/
get_header();
$container = get_theme_mod( 'understrap_container_type' );
$sidebar_pos = get_theme_mod( 'understrap_sidebar_position' );
?>
<?php if ( is_front_page() && is_home() ) : ?>
<?php get_template_part( 'global-templates/hero', 'none' ); ?>
<?php endif; ?>
<div class="wrapper" id="wrapper-index">
<div class="<?php echo esc_html( $container ); ?>" id="content" tabindex="-1">
<div class="row">
<!-- Do the left sidebar check and opens the primary div -->
<?php get_template_part( 'global-templates/left-sidebar-check', 'none' ); ?>
<main class="site-main" id="main">
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'loop-templates/content', get_post_format() );
?>
<?php endwhile; ?>
<?php else : ?>
<?php get_template_part( 'loop-templates/content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
<!-- The pagination component -->
<?php understrap_pagination(); ?>
</div><!-- #primary -->
<!-- Do the right sidebar check -->
<?php if ( 'right' === $sidebar_pos || 'both' === $sidebar_pos ) : ?>
<?php get_sidebar( 'right' ); ?>
<?php endif; ?>
</div><!-- .row -->
</div><!-- Container end -->
</div><!-- Wrapper end -->
<?php get_footer(); ?>
You can use the row / columns class from Bootstrap, and a counter ($i) to restart a row after 3 columns. Here is a idea of changes based on your code :
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* #package understrap
*/
get_header();
$container = get_theme_mod( 'understrap_container_type' );
$sidebar_pos = get_theme_mod( 'understrap_sidebar_position' );
?>
<?php if ( is_front_page() && is_home() ) : ?>
<?php get_template_part( 'global-templates/hero', 'none' ); ?>
<?php endif; ?>
<div class="wrapper" id="wrapper-index">
<div class="<?php echo esc_html( $container ); ?>" id="content" tabindex="-1">
<div class="row">
<!-- Do the left sidebar check and opens the primary div -->
<?php get_template_part( 'global-templates/left-sidebar-check', 'none' ); ?>
<main class="site-main" id="main">
<?php if ( have_posts() ) : ?>
<?php $i = 1; ?>
<div class="row">
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="col-sm-4">
<?php
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'loop-templates/content', get_post_format() );
?>
</div><!-- /.col -->
<?php
if( $i == 3 ){
echo '</div><div class="row">';
$i = 0;
}
$i++;
?>
<?php endwhile; ?>
</div><!-- /.row -->
<?php else : ?>
<?php get_template_part( 'loop-templates/content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
<!-- The pagination component -->
<?php understrap_pagination(); ?>
</div><!-- #primary -->
<!-- Do the right sidebar check -->
<?php if ( 'right' === $sidebar_pos || 'both' === $sidebar_pos ) : ?>
<?php get_sidebar( 'right' ); ?>
<?php endif; ?>
</div><!-- .row -->
</div><!-- Container end -->
</div><!-- Wrapper end -->
<?php get_footer(); ?>
Hope I will help !
Related
I'm not too famiiar with WordPress but, I've created the following page to display custom post types single-opportunities.php:
<?php
/**
* The Template for displaying single opportunities posts.
**/
get_header();
global $accesspresslite_options, $post;
$accesspresslite_settings = get_option( 'accesspresslite_options', $accesspresslite_options );
$post_class = get_post_meta( $post -> ID, 'accesspresslite_sidebar_layout', true );
?>
<div class="ak-container">
<?php
if ($post_class=='both-sidebar') { ?>
<div id="primary-wrap" class="clearfix">
<?php }
?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'single' ); ?>
<?php // accesspresslite_post_nav(); ?>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || '0' != get_comments_number() ) :
comments_template();
endif;
?>
<?php endwhile; // end of the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php
get_sidebar('left');
if ($post_class=='both-sidebar') { ?>
</div>
<?php }
?>
</div>
<?php get_footer(); ?>
I've added a custom post type and this page is displaying the information OK, but the layout has a sidebar on the right. I'm not sure why it is displaying the sidebar on the right? Can this default option be changed.
Ideally I'd like to edit the template above so the layout has a left sidebar, that I can then add a custom menu into.
Looks like youre calling the sidebar after the main body of the post/page. Call it before to have it show up on the left side.
/**
* The Template for displaying single opporunities posts.
*
*/
get_header();
global $accesspresslite_options, $post;
$accesspresslite_settings = get_option( 'accesspresslite_options',
$accesspresslite_options );
$post_class = get_post_meta( $post -> ID, 'accesspresslite_sidebar_layout', true );
?>
<div class="ak-container">
<?php
if ($post_class=='both-sidebar') { ?>
<div id="primary-wrap" class="clearfix">
<?php }
get_sidebar('left');
?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'single' ); ?>
<?php // accesspresslite_post_nav(); ?>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || '0' != get_comments_number() ) :
comments_template();
endif;
?>
<?php endwhile; // end of the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php
if ($post_class=='both-sidebar') { ?>
</div>
<?php }
?>
I have read the other answers on SOF, and cannot find out where my error is at. On my homepage and other pages selected to no have a sidebar have the footer credits moving up into the side of my site! :(
Added 4/11/17:
Here is the footer.php:
<div class="site-info">
Proudly created by Ryan Anderson
<br>
Privacy Policy
</div><!-- .site-info -->
Here is the index.php that I created recently that might have issues??
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'template-parts/content', get_post_format() );
?>
<?php endwhile; ?>
<?php the_posts_navigation(); ?>
<?php else : ?>
<?php get_template_part( 'template-parts/content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php if (!is_front_page()) {
get_sidebar();
} ?>
<?php get_footer(); ?>
Found what I needed. Stylesheet needed this added to stop the float:
.site-info {
clear: both
}
Not sure what is wrong here as have found the same fix all over the place for my issue. Read more tags are not showing on my page that pulls in the latest posts. I have researched that simply adding this code will fix that.
<?php
global $more;
$more = 0;
?>
//The code must be inserted ahead of the call to the content
<?php the_content('Continue Reading'); ?>
However I can't seem to get it to work. Any other ideas or am I just using the code wrong, quote possible! Here is an idea of my page, any help in identifying where to insert the code would be much appreciated. Thanks very much guys!
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php if ( has_post_thumbnail() ) : ?>
<div class="entry-page-image">
<?php the_post_thumbnail(); ?>
</div><!-- .entry-page-image -->
<?php endif; ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar( 'front' ); ?>
<?php get_footer(); ?>
try this.code.check wether you have given insert more tag in admin for pages and post
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php if ( has_post_thumbnail() ) : ?>
<div class="entry-page-image">
<?php the_post_thumbnail(); ?>
</div><!-- .entry-page-image -->
<?php endif; ?>
<?php
global $more;
$more = 0;
get_template_part( 'content', 'page' ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar( 'front' ); ?>
<?php get_footer(); ?>
I'm doing "page of post" in twenty eleven theme. Problem is that the_content function ignores more tag and show the whole post. It work just fine in index page.
My code:
/*
Template Name: Page Of Posts
*/
?>
<?php get_header(); ?>
<div id="primary">
<div id="content" role="main">
<?php
$args= array(
'category_name' => '');
query_posts($args);
if ( have_posts() ) : ?>
<?php twentyeleven_content_nav( 'nav-above' ); ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<?php twentyeleven_content_nav( 'nav-below' ); ?>
<?php else : ?>
<article id="post-0" class="post no-results not-found">
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
</header><!-- .entry-header -->
<div class="entry-content">
<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
</article><!-- #post-0 -->
<?php endif; ?>
</div><!-- #content -->
</div><!-- #primary -->
Please help!
Can you list a file you are requesting with get_template_part('content', get_post_format() ) it should be in the theme folder named like content-gallery.php(or any other post_format).
Anyway, you can try the good old:
<?php global $more; $more = 0; ?>
Place it before the call for the content.
I'm using the twentyeleven default template and I use
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
To get the Posts.
What I want is to have this:
<div id="wrapper">
<div id="first">
//first post
<?php get_template_part( 'content', get_post_format() ); ?>
</div>
<div id="second">
//second post
<?php get_template_part( 'content', get_post_format() ); ?>
</div>
<div id="third">
//third post
<?php get_template_part( 'content', get_post_format() ); ?>
</div>
</div><!-- end wrapper -->
Can somebody help me with this?
Could you use post-1 instead of first, post-2 instead of second, etc.? If so, dead easy. Create a variable that increments each time through the loop and tracks the number of posts.
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php $count = 0; /* <- create the counter variable */?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php echo $count; /* <- prints the variable */ $count++; /* <- increments the counter */ ?>">
<?php get_template_part( 'content', get_post_format() ); ?>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
From your question I'm not sure if you realize that everything between the while and endwhile bits gets inserted into the HTML for every post. That's why it's called "the loop." It loops over that section until every post on the page has been displayed.
You may also want to use the built-in post class function to add relevant classes to every post. Here is the above with the post class function added:
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php $count = 0; /* <- create the counter variable */?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php echo $count; $count++;?>" <?php post_class(); ?>>
<?php get_template_part( 'content', get_post_format() ); ?>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>