Im just starting to theme on the Bones "framework", and i'd like to make the frontpage article previews link to the post, instead of just the <h1>linking.
How do i acheive this? Making the entire preview link a clickable div?
Here is the mockup for that section! :)
<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
<header class="article-header">
<h1 class="h2"><?php the_title(); ?></h1>
<p class="byline vcard"><?php _e('Posted', 'bonestheme'); ?> <time class="updated" datetime="<?php echo the_time('Y-m-j'); ?>" pubdate><?php the_time(get_option('date_format')); ?></time> <?php _e('by', 'bonestheme'); ?> <span class="author"><?php the_author_posts_link(); ?></span> <span class="amp">&</span> <?php _e('filed under', 'bonestheme'); ?> <?php the_category(', '); ?>.</p>
</header> <!-- end article header -->
<section class="entry-content clearfix">
<?php the_content(); ?>
</section> <!-- end article section -->
You can always use a JavaScript solution combined with a CSS:
<article style="cursor:pointer;" onclick="window.location='<?php the_permalink(); ?>'">
...
</article>
not sure if it complies with the HTML5 specs , but you can try moving the to wrap all the article ..:
<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
<!-- move <a> to here -->
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<header class="article-header">
<h1 class="h2"><?php the_title(); ?> </h1>
<p class="byline vcard"><?php _e('Posted', 'bonestheme'); ?> <time class="updated" datetime="<?php echo the_time('Y-m-j'); ?>" pubdate><?php the_time(get_option('date_format')); ?></time> <?php _e('by', 'bonestheme'); ?> <span class="author"><?php the_author_posts_link(); ?></span> <span class="amp">&</span> <?php _e('filed under', 'bonestheme'); ?> <?php the_category(', '); ?>.</p>
</header> <!-- end article header -->
<section class="entry-content clearfix">
<?php the_content(); ?>
</section> <!-- end article section -->
<!-- close </a> here -->
</a>
Related
I'm wanting to display Wordpress posts in a two column row using Bootstrap. Here's what I have, i feel it's close but the second post is displaying underneath the first one insead of displaying next to each other.
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
<h2 class="blog-post-title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
Any help would be appreciated!
Solved!
<div class="container">
<div class="row">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="col-lg-6 col-md col-sm-12 col-xs-12">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
<h2 class="blog-post-title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
</div>
<?php endwhile; else: ?>
<p>There are no posts to show</p>
<?php endif; ?>
</div>
</div>
I created a theme from scratch and have pagination working on the post pages using , it's working on single.php.
<?php get_header(); ?>
<?php
while(have_posts()) {
the_post();
?>
<div class="mainConent">
<div class="leftSidebar">
<div class="sidebarTitleWrapper">
<?php dynamic_sidebar('left_sidebar') ?>
</div>
</div>
<div class="recentBlogsWrapper">
<div class="blogWrapper">
<h2><?php the_title(); ?></h2>
<p><?php the_time('F j, Y') ?></p>
<?php if(has_post_thumbnail()) { ?>
<div class="card-image">
<img class="page-image" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">
</div>
<?php } ?>
<div class="card-description">
<?php the_content(); ?>
<?php wp_link_pages(); ?>
<?php comments_template(); ?>
<?php } ?>
<div class="backarrowwrap">
<a class="backhomelink" href="<?php echo site_url(); ?>" <?php if(is_front_page()) echo 'class="active"' ?>>
<img class="backarrow" src="<?php echo get_template_directory_uri(); ?>/img/backarrow.png" alt="back arrow" />
Go Back Home
</a>
</div>
</div>
</div>
</div>
<div class="rightSidebar" id="sidebar">
<div class="sidebarTitleWrapper">
<?php dynamic_sidebar('right_sidebar') ?>
</div>
</div>
I put it right below the_content(); and it's working exactly like I want it to. However, it's not working on page.php, even though it's in the same place on the page.
<?php get_header();
while(have_posts()) {
the_post();
?>
<div class="pageWrapper">
<h2><?php the_title(); ?></h2>
<?php if(has_post_thumbnail()) { ?>
<div class="card-image">
<img class="page-image" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">
</div>
<?php } ?>
<div class="card-description">
<?php the_content(); ?>
<?php wp_link_pages(); ?>
<?php } ?>
</div>
</div>
<?php get_footer(); ?>
I've included the
<!–-nextpage-–>
code in one of my pages just like I did for the blogs, but it's not paginating between the paragraphs.
What am I doing wrong?
You need at least one <!--nextpage-->, if the content of a page (or post) has at least one <!--nextpage--> tag (and this code is in The Loop), this prints linked page numbers (“Pages: 1 2 3 4 and so on...”), without a link on current page number, and by default within tags:.
I don't have much idea about wordpress. I have a blog in wordpress. In my blog page, i am showing the most recent post in top and rest of post will appear in bottom . I am getting the repitation of most recent blog in bottom as well. that means, it's appearing twice on page. I want to get rid it from bottom. Thanks
<?php if (have_posts()):?>
<!-- section -->
<section>
<div class="row justify-content-center">
<div class="col-md-5"><?php $image1 = get_field('main_image');?>
<img id="theImage" class="img-fluid" src="<?php echo $image1['url']; ?>" width="100%" height="auto" /></div>
<div class="col-md-4 base">
<div class="hero_col">
<p class="blog_content"><?php the_time('F j, Y'); ?> </p>
<span class="head_blog_content">
<?php
$thePostID = $wp_query->post->ID;
echo get_post_meta($thePostID, 'blog_desc_content', true); ?>
</span>
<div class="read_article py-3"><a class="col btn-change" style="color: white;" href="<?php the_permalink(); ?>">Read Article</a></div>
</div>
</div>
<div class="centered_cols"><span class="hero_text"><!-- post title -->
<?php the_title(); ?>
</span></div>
</div>
</section><!-- Gallery Section -->
<div class="product-container">
<div class="row justify-content-center">
<?php $Number = 1; ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="col-sm-12 col-md-3 blog-container mb-3"><a href="#">
<?php $image1 = get_field('main_image');?>
<img src="<?php echo $image1['url']; ?>" width="100%" height="auto" /></a>
<!-- post details -->
<p class="blog_date"><?php the_time('F j, Y'); ?></p>
<span class="blog_caption"><?php the_title(); ?>
</span>
<p class="blog_content"><?php
$thePostID = $wp_query->post->ID;
echo get_post_meta($thePostID, 'blog_desc_content', true); ?>
</p>
<div class="column-bottom"><span class="read_article">
<a class="col btn-change" style="color: white;" href="<?php the_permalink(); ?>">Read Article</a></span></div>
</div>
<!-- /post details -->
<!-- article -->
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(array(120,120)); // Declare pixel size you need inside the array ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>
<!-- /article -->
<?php $Number++; endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h2><?php _e( 'Sorry, nothing to display.' ); ?></h2>
</article>
<!-- /article -->
<?php endif; ?>
I guess, since you don't know much about wordpress, its easier to create a counter to skip output in first item, something like this:
while (have_posts()) : the_post();
$Number = 1; //initial value
if ($count != 1) : ?>
//all your post content here
<?php endif;
$Number++; // incrementing counter by 1
It seems you came up with the counting (I've set the var name as Number based on your code), you're just missing the conditional aparently.
I am working on the default blog home page code. I have 4 posts in each blog page. Now they are showing vertically (one after another, up and down). I want to show these 4 posts into 2 rows and each row will contain 2 posts each. Here is the code of the blog page. I have used normal CSS to make them 2 columns.
<div class="amplify-content w-100 align-items-stretch order-0">
<div class="content-list">
<div class="mb-4"><strong class="text-uppercase">Category</strong> Graphic Design Lab</div>
<div class="columncontent">
<div class="row gutter-30 mb-4">
<div class="col-12 col-md-6">
<main role="main">
<!-- section -->
<section class="bl">
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- post thumbnail -->
<span class="blgimg"><?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(); // Fullsize image for the single post ?>
</a>
<?php endif; ?></span>
<!-- /post thumbnail -->
<!-- post details -->
<br/>
<span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>
<!-- /post details -->
<!-- post title -->
<h2 style="font-family: Journal-Regular;color: #d20a1e !important;text-transform: uppercase!important;" class="blgg">
<?php the_title(); ?>
</h2>
<!-- /post title -->
<!-- button -->
<b>READ MORE</b><br/>
<!-- /button -->
<!-- <span class="write" style="width:80% !important;"><?php the_excerpt(); // Dynamic Content ?></span> -->
<br/>
<?php comments_template(); ?>
</article>
<!-- /article -->
<?php endwhile; ?>
<?php get_the_posts_pagination(); ?>
<?php else: ?>
<!-- article -->
<article>
<h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>
</article>
<!-- /article -->
<?php endif; ?>
</section>
<!-- /section -->
</main>
</div>
<div class="col-12 col-md-6">
</div>
</div>
</div>
</div>
</div>
Alright. Try this and lmk how it goes.
<div class="amplify-content w-100 align-items-stretch order-0">
<div class="content-list">
<div class="mb-4"><strong class="text-uppercase">Category</strong> Graphic Design Lab</div>
<div>
<div>
<div class="col-12">
<main role="main">
<!-- section -->
<section class="bl row">
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- article -->
<article id="post-<?php the_ID(); ?>" class="col-xs-12 col-sm-6">
<!-- post thumbnail -->
<span class="blgimg"><?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(); // Fullsize image for the single post ?>
</a>
<?php endif; ?></span>
<!-- /post thumbnail -->
<!-- post details -->
<br/>
<span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>
<!-- /post details -->
<!-- post title -->
<h2 style="font-family: Journal-Regular;color: #d20a1e !important;text-transform: uppercase!important;" class="blgg">
<?php the_title(); ?>
</h2>
<!-- /post title -->
<!-- button -->
<b>READ MORE</b><br/>
<!-- /button -->
<!-- <span class="write" style="width:80% !important;"><?php the_excerpt(); // Dynamic Content ?></span> -->
<br/>
<?php comments_template(); ?>
</article>
<!-- /article -->
<?php endwhile; ?>
<?php get_the_posts_pagination(); ?>
<?php else: ?>
<!-- article -->
<article>
<h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>
</article>
<!-- /article -->
<?php endif; ?>
</section>
<!-- /section -->
</main>
</div>
<div class="col-12 col-md-6">
</div>
</div>
</div>
</div>
</div>
Also, you should go into your index file and replace line 53 with .blgimg img{width: 100%;} instead of .blgimg img{width: 250px;height:250px;}
Why does <!--nextpage--> work on pages, but not on Custom Post Types?
Here is the code of the single-custom_type.php file.. I added the "<?php wp_link_pages(); ?>" by myself. I hoped that would work, but it doesn't. There is nothing more to say actually.
<?php get_header(); ?>
<div id="content">
<div id="inner-content" class="wrap clearfix">
<div id="main" class="eightcol first clearfix" role="main">
<?php include(TEMPLATEPATH . '/template-logo.php'); ?>
<div class="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
<header class="article-header">
<h2 class="h2"><?php the_title(); ?></h2>
</header> <!-- end article header -->
<section class="entry-content clearfix">
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { ?>
<a href="<?php the_permalink(); ?>" title="Permanent Link to <?php the_title(); ?>">
<?php the_post_thumbnail(array(200,200), array("class" => "alignleft post_thumbnail")); ?>
</a>
<?php } ?>
<?php the_content(); ?>
<?php wp_link_pages(); ?>
<hr>
</section> <!-- end article section -->
<footer class="article-footer">
<p class="tags"><?php the_tags('<span class="tags-title">Tags:</span> ', ', ', ''); ?></p>
</footer> <!-- end article footer -->
<?php // comments_template(); // uncomment if you want to use them ?>
</article> <!-- end article -->
<?php endwhile; ?>
<?php else : ?>
<article id="post-not-found" class="hentry clearfix">
<header class="article-header">
<h1><?php _e("Oops, Post Not Found!", "bonestheme"); ?></h1>
</header>
<section class="entry-content">
<p><?php _e("Uh Oh. Something is missing. Try double checking things.", "bonestheme"); ?></p>
</section>
<footer class="article-footer">
<p><?php _e("This is the error message in the single-custom_type.php template.", "bonestheme"); ?></p>
</footer>
</article>
<?php endif; ?>
[...]