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(); ?>
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'm creating a Wordpress template from scratch and I am already in the process of adding sidebars. But I'm having a few problems with the sidebar positioning/placements.
What I want vs What I have
I'm not sure if I'm doing something wrong with the sidebar.php or with the container blocks.
But here's my css code:
/* Sidebar modules for boxing content */
.sdbrcont {
float: left;
background-color: black;
}
My sidebar.php code:
<div class="sdbrcont">
<?php if ( is_active_sidebar( 'left_sdbr' ) ) : ?>
<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'left_sdbr' ); ?>
</div><!-- #primary-sidebar -->
<?php endif; ?>
</div>
and if the problem is on my index.php, here's the code:
<div class="row">
<?php get_sidebar( 'left-sdbr' ); ?>
<div id="contentcont">
<div class="blog-main">
<div class="blogtitle">
<p>PAKU SQUAD
<span class="subheader1">
BLOG
</span>
</p>
<hr>
</div>
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;?>
<nav>
<ul class="pager">
<li> <?php next_posts_link( 'Older Posts >>>' ); ?> </li>
<li> <?php previous_posts_link( '<<< Newer Posts' ); ?></li>
</ul>
</nav>
<?php
endif;
?>
</div> <!-- /.blog-main -->
</div>
</div> <!-- /.row -->
This is my firt time creating a wordpress template and I would really appreciate all the help I can get. Thank you in advance.
You need to pay attention to Layout grid system in bootstrap: http://getbootstrap.com/docs/4.0/layout/overview/
Because you need to determine the width of the container, else will be all the body.
<div class="container">
<div class="row">
<div class="col">
Sidebar
<div>
<div class="col">
Content
<div>
</div>
</div>
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 was reading Wordpress's coding standards
The only confusing part for me is the vertical spacing between HTML code for instance:
Default Wordpress Theme 3.03:
sidebar.php:
<li id="search" class="widget-container widget_search">
<?php get_search_form(); ?>
</li>
<li id="archives" class="widget-container">
<h3 class="widget-title"><?php _e( 'Archives', 'twentyten' ); ?></h3>
<ul>
<?php wp_get_archives( 'type=monthly' ); ?>
</ul>
</li>
(Here's space between the two <li> tags)
header.php
<div id="masthead">
<div id="branding" role="banner">
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
(Here, there's no space between div tags)
header.php (line 79...):
</div><!-- #branding -->
<div id="access" role="navigation">
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text"><?php _e( 'Skip to content', 'twentyten' ); ?></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
(Here, there's is space between those 3 <div> tags
What's the coding standard of vertical spacing (I don't think it is random)?
Not sure i really follow you, but some examples..
Well formatted HTML
Indentation used, no excessive whitespace
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
Poorly formatted HTML - Example 1
No indentation
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
Example 2
Useless whitespace
<div class="example1">
<div class="example2">
<div class="example3"></div>
<div class="example4"></div>
</div>
</div>
This isn't really specific to WordPress, any good teacher or tutorial will encourage well formatted coding, and there's little excuse when you're using a good editor(i mean seriously, which do you find most readable and easier to understand?).
More..
Well formatted PHP
Indentation used appropriately
if( something ) {
do_something()
if( some_nested_condition )
do_something_else();
}
Poorly formatted
No indentation, harder to read
if( something ) {
do_something()
if( some_nested_condition )
do_something_else();
}
Formatting your code makes it easier to read, understand, or update/maintain(it's not something that will make a whole lot of sense until you start dealing with code on a regular basis). Then again, i'm not the best at explaining these things, so i'd suggest refering to information already available for the "why".. (i know my reasons)..
Mixed PHP and HTML example
Mock template loop, only for illustration
<div class="wrapper">
<div class="header">
<h1>My Website Heading</h1>
</div>
<div class="content">
<?php if( have_posts() ) : ?>
<div class="wrapsallposts">
<?php while( have_posts() ) : the_post(); ?>
<div class="post">
<h2><?php the_title(); ?></h2>
<div class="postcontent"><?php the_content(); ?></div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
</div>