I've nearly finished my website here: http://www.divisionforty.com/wall/ and I've come to the final part left is to get this content to center http://www.divisionforty.com/wall/artists/cali-balles/
Here is the code:
<?php get_header(); ?>
<div class="row">
<div class="span4">
<h2><?php the_title(); ?></h2>
<p>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<?php the_content(); ?>
</div>
<?php
endwhile;
endif;
?> </p>
</div>
<div class="span8" id="thumbnails">
<?php postimage($size=thumbnail, $qty=-1) ?>
</div>
</div>
<?php get_footer(); ?>
There isn't really any style custom to that page so its basic bootstrap.
Hope someone can help,
Denver
To clarify this is what I'd like centered:
Try this
Take off the max-width:1280px from your #wrap div
on your .row div set the width to max-width:1200 and the margin to margin:0 auto
You could also add text-align: center; to your .row div so your text is centered.
That should keep your content centered as the page gets smaller. (not quite sure what you were looking for. This will make sure your header goes all the way across the page while centering the content beneath it.)
Create a new container class.
<div class="container_2">
<div class="row">
<div class="span4">
...
</div>
</div>
</div>
In your css, add this
.container_2 {
width: 1200px; //you can change this.
max-width: 100%;
margin-left: auto;
margin-right: auto;
display: block;
}
}
Related
I know that this has been posted many times, but I have truly spent close to 60 hours trying to figure this out - this is not my strong point!
Im running wordpress, standard installation, no plugins or anything at this stage.
I am simply trying to display the most recent 3 posts from the blog, or if we could go one step further, most recent 3 from catx.
Here is my code, which I believe should work.
<?php
require '/home1/digita/public_html/articles/wp-load.php'; ?>
<section class="services blog sec-normal">
<div class="container">
<div class="service-wrap">
<div class="row">
<style>.wp-block-image {
max-width: 100%;
margin-bottom: 1em;
display: none;
}
a.more-link {
display: none;
}
.services .service-wrap .service-section a {
margin-top: 0px!important;
}
</style>
<?php if (have_posts()) :
while ( have_posts() ) : the_post();
?> <!-- ***** BLOG ***** -->
<div class="col-md-4" style="width: 30%;margin-top: -7%;margin-bottom: 10%;">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
} ?>
<div class="service-section m-0" style="margin-top: 0.1%;">
<div class="title mt-0"><?php the_title(); ?></div>
<p class="subtitle"><?php the_content() ?> </p>
<hr>
Read more
</div>
</div>
<?php
// Stop the loop when all posts are displayed
endwhile;
// If no posts were found
else :
?>
<p>Sorry no posts matched your criteria.</p>
<?php
endif;
?>
</div>
</div>
</div>
</div>
</section>
The code does not return posts, and instead returns, "Sorry no posts matched your criteria." . Any advice?
Main query does not set it's data, because wp function did not run after wp-load.php in your code and main query must be set base on $_SERVER['REQUEST_URI'] that is a few complex.
But its good to use secondary query as simple way for your work:
<?php
require '/home1/digita/public_html/articles/wp-load.php';
$query = new WP_Query(array(
'post_type' => 'post',
));
?>
<section class="services blog sec-normal">
<div class="container">
<div class="service-wrap">
<div class="row">
<style>.wp-block-image {
max-width: 100%;
margin-bottom: 1em;
display: none;
}
a.more-link {
display: none;
}
.services .service-wrap .service-section a {
margin-top: 0px!important;
}
</style>
<?php if ($query->have_posts()) :
while ( $query->have_posts() ) : $query->the_post();
?> <!-- ***** BLOG ***** -->
<div class="col-md-4" style="width: 30%;margin-top: -7%;margin-bottom: 10%;">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
} ?>
<div class="service-section m-0" style="margin-top: 0.1%;">
<div class="title mt-0"><?php the_title(); ?></div>
<p class="subtitle"><?php the_content() ?> </p>
<hr>
Read more
</div>
</div>
<?php
// Stop the loop when all posts are displayed
endwhile;
// If no posts were found
else :
?>
<p>Sorry no posts matched your criteria.</p>
<?php
endif;
?>
</div>
</div>
</div>
</div>
</section>
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>
I have installed WordPress 4.5.3 and have built my custom theme. Everything works pretty well except for the fact that some pages don't show any content at all. I have tried to search on how to fix this but I can't find any solution, because my own problem has pages that don't even enter 'the loop'. I have tried to echo things within the loop to make sure that it enters but to no avail. My theme is still offline so i could not provide a link to it. Please any idea why it is not entering the loop.
<?php get_header(); ?>
<style type="text/css">
.submit input {
height: 50px;
width: 200px;
background: #f88b0c;
}
</style>
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>
<div class="col-md-12 ">
<h2 class="title ">
<center>
<?the_title()?>
<hr>
</center>
</h2>
</div>
<div class="col-md-12">
<?php if(has_post_thumbnail())?>
<?php the_post_thumbnail(); ?>
</div>
<div class="col-md-12">
<p>
<?php the_content(); ?>
</p>
</div>
<?php endwhile;?>
</div>
<?php get_footer(); ?>
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;
}
I am trying to get a sidebar to appear correctly in Wordpress framework with some effort here but I am almost their but the sidebar needs to appear to the right of the text of the blog just beside the title to the far right
You can view the page in question here http://kvalixhu.digitalthinkersni.co.uk/blog/
Image for how I want it to display
https://nimbus.everhelper.me/client/notes/share/369625/9zqAVkxFA4iFRBTqA1E5mw20uuWOqgs8/
<?php
/**
* Template Name: BlogPosts
*/
get_header();
?>
<style>
#title_wrapper{
width:488px;
}
h2{
font-size:18px;
font-familly:verdana, arial, sans-serif;
line-height:16px;
display:inline;
padding:2px;
}
#dateinfo{
font-weight:bold;
}
</style>
<div id="main-content" class="main-content">
<?php
if (is_front_page()) {
get_template_part('featured-content');
}
?>
<div class="full-width page-header">
<div class="row">
<div class="column">
<h1>Blog</h1>
</div>
</div>
</div>
<div class="row show-for-medium-up">
<div class="column breadcrumb">
<?php
if (function_exists('yoast_breadcrumb')) {
//echo __('Home',TD) . ' > ';
yoast_breadcrumb('<span id="breadcrumbs">', '</span>');
}
?>
<?php
if (function_exists('bcn_display_list_multidim_children')) {
?><ul class="breadcrumbs">
<?php
bcn_display_list_multidim_children();
?>
</ul><?php
}
?>
</div>
</div>
<div class="row">
<div class="column small-12 product">
<?php
$logo = get_post_meta(get_the_ID(), 'logo', true);
?>
<div class="post-list" style="width:80%;">
<?php
$myposts = get_posts('numberposts=-1&offset=$debut');
foreach ($myposts as $post):
setup_postdata($post);
?>
<div id="dateInfo" style="float:right;">
<?php the_date('Y.m.j'); ?> |
<?php comments_number( '0 hozzászólás', '1 hozzászólás', '% hozzászólás' ); ?>.
</div>
<div id="title_wrapper">
<h2><?php the_title(); ?></h2>
</div>
<div class="thumbnail" style="float: left; margin: 10px">
<?php the_post_thumbnail( array( 395, 195 ) ); ?>
<div class="thumbnail-arrow"></div>
</div>
<!-- Display movie review contents -->
<div class="entry-content"><?php the_content(); ?></div>
<div>
<?php
endforeach;
?>
<div class="column small-6 product " style="float:right;">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Right Sidebar')) : ?>
[ do default stuff if no widgets ]
<?php endif; ?>
</div>
<hr />
</div>
</div> </div>
</div>
<?php
get_footer();
?>
The first thing that you would want to do is move the "sidebar div" outside of the post-list div, and adding "float:left;" to the post-list div.
Also, add a width to the sidebar div with "width: 20%;" to make sure it fits.
The answer is a bit vague but hopefully you understand.
Hopefully this helps