I know I have to ask in Wordpress forum.
But I am sort of crazy to stackoverflow, I ask here first.
I am developing Wordpress theme from scratch. Inside my blog post, I'd like to wrap the thumbnail image inside the text.
The code I used is
<div class="row">
<?php if( has_post_thumbnail() ): ?>
<div class="col-xs-12 col-sm-4">
<div class="thumbnail"><?php the_post_thumbnail('small'); ?></div>
</div>
<div class="col-xs-12 col-sm-8">
<?php the_content(); ?>
</div>
<?php else: ?>
<div class="col-xs-12">
<?php the_content(); ?>
</div>
<?php endif; ?>
</div>
Now is the content and thumbnail image are side by side.
I like to wrap the image inside text.
The image is .
You are wrapping the thumbnail and the content in two different columns, that is why they appear side by side. Change your code to this:
<div class="row">
<?php if( has_post_thumbnail() ): ?>
<div class="col-xs-12 col-sm-12">
<div class="thumbnail"><?php the_post_thumbnail('small'); ?></div>
<?php the_content(); ?>
</div>
<?php else: ?>
<div class="col-xs-12">
<?php the_content(); ?>
</div>
<?php endif; ?>
</div>
Then float the thumbnail div to the left or right with css.
.thumbnail {
float:left;
}
Related
I'll get quickly to the point: I'm creating a Wordpress theme for my blog, using _s starter theme. I'm using the bootstrap 4 grid system, in order to achieve a 2 column post (on home page/search/archive): the post thumbnail inside a div on the left, while the post content (title, excerpt etc.) on the right.
I want to set the post thumbnail as a background-image of the div, I already achieved that, on desktop/tablet no problem, but on mobile when the thumbnail is above the post content, it won't show up, unless I set a fixed height to the image, I'm ok with that, but the issue is that some posts do not have a post thumbnail, so you can imagine that the result is pretty brutal, with blank space on post without thumbnail;
Maybe this is stupid and easy, but the question is: is there a way to solve this? Maybe it's possible to set the fixed height on mobile but only on posts that has the thumbnail?
<div class="container-fluid">
<div class="row">
<div class="post-thumbnail col-md-5" <?php echo 'style="background-image: url(' . get_the_post_thumbnail_url() . ')"' ?>>
</div>
<div class="post-content <?php echo (has_post_thumbnail())?$small:$large;?>">
</div> <!-- post content -->
</div> <!-- row -->
</div> <!-- container fluid -->
If I understood you correctly, maybe you could try something like this
<div class="container-fluid">
<div class="row">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article>
<div class="col-md-6">
<h2>
<a href="<?php the_permalink() ?>">
<?php the_title(); ?>
</a>
</h2>
<?php the_content(); ?>
</div>
<div class="col-md-6">
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumbnail" style="background: url('<?php get_the_post_thumbnail_url(); ?>') center center / cover"></div>
<?php else : ?>
<div class="post-thumbnail" style="background: url('[some fixed image url]') center center / cover"></div>
<?php endif; ?>
</div>
</article>
<?php endwhile; else: ?>
<p>There no posts to show</p>
<?php endif; ?>
</div>
</div>
Blog Posts with Grid Layout even number columns doesn't display correctly .The problem occurs with 3 column layout also: for each group of 3 posts
<div class="main" role="main">
<div id="content" class="content full">
<div class="container">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post();
$title = get_the_title();?>
<div class="row">
<?php if ( has_post_thumbnail() ) { ?>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="<?php echo esc_url(get_permalink(get_the_ID())) ?><?php
the_post_thumbnail('imic_600x400'); ?></a>
<?php } ?>
<?php if ( has_post_thumbnail() ) { ?><?php } ?>
<h3><a href=" <?php echo esc_url(get_permalink(get_the_ID())); ?>
<?php
echo esc_attr($title); ?>
</a>
</h3>
</div>
<?php endwhile; ?>
<!-- Pagination -->
<?php if(function_exists('imic_pagination')) { imic_pagination(); }
else { next_posts_link( 'Older Entries');
previous_posts_link( 'Newer Entries' ); } ?>
<?php endif;?>
</div>
<?php if(is_active_sidebar($pageSidebar)) { ?>
<!-- Sidebar -->
<div class="sidebar" id="sidebar-col">
<?php dynamic_sidebar($pageSidebar); ?>
</div>
<?php } ?>
</div>
</div>
</div>
Try changing the created HTML structure as follows (in Inspect Element view to verify it works):
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div><!--
--><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div><!--
--><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div>
(note the <!-- --> HTML comments)
If that solves the problem, try adding the HTML comments into your PHP code.
The reason for this behaviour is the resulting new line being interpreted as a "space" and thus the third item won't fit into the same row because of the added horizontal space.
You could also output the HTML-<div class="row">...</div> without line-breaks, eg. by concatenating the markup as one PHP string.
How to put page title over featured image in wordpress?I want the page title and page content over the featured image .
Please suggest.
You should use <div> tag in image and title; Use this code:
<?php
/*
* Template Name: yourtie
*/
get_header();
?>
<section id="cir-content-area" role="main">
<div class="container">
<div class="row">
<div class="col-md-12">
<?php while ( have_posts() ) : the_post(); ?>
<?php $featured_img_url = get_the_post_thumbnail_url($post->ID, 'full'); ?>
<div class="col-md-12" style="background:url('<?php echo $featured_img_url; ?>') no-repeat scroll center center / cover">
<?php the_title(); ?>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>
I have a nested repeater field.
The nested part is a modal window, which when open expands on the second repeater field. But when everything is filled out the modal window displays the info from the first item in the loop.
This is how it should be working:
http://pagedev.co.uk/hoppings/product-sector.php#
Here is my code:
<div class="container">
<?php while( have_rows('product_sections') ): the_row(); ?>
<div class="sector-heading">
<img src="<?php the_sub_field('section_logo'); ?>">
<div><?php the_sub_field('section_intro'); ?></div>
</div>
<?php if( have_rows('products') ): ?>
<div class="grid-wrapper">
<?php while( have_rows('products') ): the_row(); ?>
<!--Start Single Product-->
<div class="grid-item">
<div class="image-hovers">
<img src="<?php the_sub_field('thumbnail'); ?>">
<a class="js-open-modal" href="#" data-modal-id="popup"><div class="product-hover"></div></a>
</div>
<div class="grid-title">
<h2><?php the_sub_field('product_name'); ?></h2>
</div>
</div>
<!--Start Single Product Modal-->
<div id="popup" class="modal-box">
×
<div class="modal-wrap">
<div class="modal-img">
<img src="<?php the_sub_field('thumbnail'); ?>">
</div>
<div class="modal-content">
<h2><?php the_sub_field('product_name'); ?></h2>
<p><strong><?php the_sub_field('product_size'); ?></strong></p>
<hr>
<?php the_sub_field('product_description'); ?>
<div class="modal-stockist">Find a Stockist</div>
<div class="modal-literature">Literature</div>
</div>
</div>
</div>
<!--Close Single Product Modal-->
<?php endwhile; // end of the loop. ?>
</div>
<!--End Grid Wrapper-->
<?php endif; ?>
<!-- Close product repeater field -->
<?php endwhile; // end of the loop. ?>
</div>
<!--End Container-->
Any help would be great!
Lee
I figured it out. Something so simple!
My modal window needed a unique ID for each product!
All solved :)
Hi What i'm trying to do is in the page.php file set up a bunch of if statements for each page for example if page == aboutus display the about us content and so on. at the moment no matter what page i'm on it's displaying everything in the page.php file i'm sure its just something with the way i have written it. does anyone know what i'm doing wrong?
heres what i have so far
<?php get_head(); ?>
<?php is_page($page); ?>
<?php is_page('about-us'); ?> {
<div id="container">
<?php get_header(); ?>
<?php get_banner(); ?>
<div class=" center content" role="main">
<div id="posts">
<span class="title">About Us</span>
<div class="msghead">
<?php query_posts('cat=7&showposts=1&orderby=date'); while (have_posts()) : the_post(); the_content();
endwhile;?>
</div>
</div>
<div id="sidebardiv">
<?php get_sidebar(); ?> </div>
<div class="clear"> </div>
</div>
</div>
<?php get_footer(); ?>
</div>
}
<?php is_page('classes'); ?> {
<div id="container">
<?php get_header(); ?>
<?php get_banner(); ?>
<div class=" center content" role="main">
<div id="posts">
<span class="title">Classes</span>
<div class="msghead">
<?php query_posts('cat=7&showposts=1&orderby=date'); while (have_posts()) : the_post(); the_content();
endwhile;?>
</div>
</div>
<div id="sidebardiv">
<?php get_sidebar(); ?> </div>
<div class="clear"> </div>
</div>
</div>
<?php get_footer(); ?>
</div>
}
You are not actually checking the page, you are just running the is_page() function, then displaying the content.
Additionally, when you use The Loop, you should first check that there are posts to display, to avoid errors.
And just as a tip - if the only difference in the pages is the posts that are shown, you can set your arguments before the loop, that way you can cut out quite a lot of your code. Here is a link to a Pastebin with an example of that method, taking the below. Furthermore, if the template is page.php, then the Page that you are viewing is already in the Loop, so you can make use of that to show the Page title. This is untested, but should get you started.
<?php get_head(); ?>
<?php if(is_page('about-us')) : ?>
<div id="container">
<?php get_header(); ?>
<?php get_banner(); ?>
<div class=" center content" role="main">
<div id="posts">
<span class="title">About Us</span>
<div class="msghead">
<?php
query_posts('cat=7&showposts=1&orderby=date');
if(have_posts()) : while (have_posts()) : the_post();
the_content();
endwhile;
endif;
?>
</div>
</div>
<div id="sidebardiv">
<?php get_sidebar(); ?> </div>
<div class="clear"> </div>
</div>
</div>
<?php get_footer(); ?>
</div>
<?php elseif(is_page('classes')) : ?>
<div id="container">
<?php get_header(); ?>
<?php get_banner(); ?>
<div class=" center content" role="main">
<div id="posts">
<span class="title">Classes</span>
<div class="msghead">
<?php
query_posts('cat=7&showposts=1&orderby=date');
if(have_posts()) : while (have_posts()) : the_post();
the_content();
endwhile;
endif;
?>
</div>
</div>
<div id="sidebardiv">
<?php get_sidebar(); ?> </div>
<div class="clear"> </div>
</div>
</div>
<?php get_footer(); ?>
</div>
<?php endif; ?>
An easier approach will be to use is_page('about-us') to check your current page.
Codex: http://codex.wordpress.org/Function_Reference/is_page
You're missing an if statement.
e.g.
<?php if( is_page('about-us') ): ?>
<p>about-us page here</p>
<?php elseif( is_page('classes') ): ?>
<p>classes page here</p>
<?php endif; ?>
A more straightforward way is to create new templates for page-about-us.php and page-classes.php