I'm using the <!--nextpage--> function to page break and split the page on Wordpress.
The problem is, whenever <!--nextpage--> is inserted, the position of sidebar is moved to where it shouldn't be.
It's like this on page.php:
<div class="main">
<?php
if (have_posts()) :
...
?>
<?php wp_link_pages(); ?>
</div>
<?php get_sidebar(); ?>
So if I understand correctly, .main and get_sidebar are on the same level.
But when I actually make some page using this template, an output is like this:
<div class="main">
<div class="section">
...
<div class="content">
// pagination is inserted here
</div>
<aside class="sidebar">
...
</aside>
</div>
</div>
In other words, get_sidebar(aside tag) automatically moves into .section.
This is extremely confusing to me, and really don't know what to do here.
Why does Wordpress decide to put it inside of .section? Why can't it be faithful to the template?
Now the sidebar is positioned at the end of content instead of being on the right side.
What are the possible causes and solution to this issue?
Thank you for reading.
Related
Hey fellow WordPress dev's / php masters. Long story short, I am using WordPress (and I never use WordPress - sorry!) and when I go to view the individual post rendered from single.php, the 'have_posts()' function is returning false. The template is rendered and I am not having any issues with the template rendering, I am simply having an issue with 'have_posts()' showing false and not outputting the blog post.
I downloaded WordPress 5.0.3, am running on MAMP and have used this method previously without any issues. All in all, I am trying to really keep my template files organized and I am using get_template_part to retrieve sections of the theme.
My current structure is:
single.php -
<?php
get_template_part('template-parts/blog/_single/blog-post-banner'); // Renders perfect
?>
<div class="light-grey">
<div class="container">
<div class="row no-margin">
<div class="col s12 l9 mb-0-l">
<?php get_template_part('template-parts/blog/_single/blog-post'); // Renders perfect ?>
</div>
<div class="col s12 l3 mb-0-l">
<?php get_template_part('template-parts/blog/side-bar'); // Renders perfect ?>
</div>
</div>
</div>
</div>
And of course the real culprit the blog-post partial -
<?php
if (have_posts()) :
the_post(); ?>
<div class="row no-margin">
<div class="col s12 no-margin relative">
<img src="<?php the_post_thumbnail_url('medium_size'); ?>" alt="<?php the_title(); ?>" class="block">
</div>
<div class="col s12">
<div class="white p-2-s p-3-l">
<?php the_content(); ?>
</div>
</div>
</div>
<?php else :?>
<div class="col s12 no-margin">
<div class="white p-2-s p-3-l"><p>Sorry, we couldn't find the post you were looking for.</p></div>
</div>
<?php endif; ?>
Again, the templates are rendering perfect but the 'have_posts()' is returning false and spitting out my 'else' part of my statement. I have used this method in another template and it worked perfectly before (although I will admit, I love to develop in node and WordPress and php have really made me beat my head against the wall at times lol). Is there something I missed?
I have checked my functions.php which I have written from scratch, and there isn't a single thing in there that might affect the post but if you need to see it, I would be happy to share it (I have disabled each portion of the functions.php to check if it would help and no luck). I don't have any plugins added, not even the default included ones (I am a dork that wants to build most everything from scratch so I know how it works).
Am I wrong in that the output to 'have_posts()' should be true on the single.php page? Did I do something wrong with my partials? The banner does use the 'the_title()' tag and 'the_date()' tag but both php tags are properly closed. Would really appreciate some insight on why I am getting false on this. Thanks everyone!
** EDIT ** - When I went to debug the blog-post partial and var_dump the have_posts(), I placed it above the if statement and everything rendered. Looked like so:
<?php
var_dump(have_posts()); // <---------------- Added this and it rendered
if (have_posts()) :
the_post(); ?>
The var_dump output false but then if I did it a second time, it now renders true. Any ideas as to why? For the time being, I am storing a have_posts() in a random variable so there is no output and the post is now showing. While I am happy the post is now showing, I know this isn't necessarily a 'solid fix'. Any ideas with this?
So first I just want to say, #Jeppe you had it right the whole time. If I could mark your comment correct (and if you can, please show me how) I would.
To anyone else who stumbles across this post, it comes down to using the 'rewind_posts()' function. All in all, I have a loop somewhere in my code, that I can't identify as the culprit, that is essentially forcing my 'have_posts()' function to return false because I haven't reset it / rewound it according to WordPress.
My solution was to simply take my old code:
<?php
if (have_posts) :
the_post;
?>
and add the rewind_posts() function above the if statement:
<?php
rewind_posts(); // <---------- This guy right here.
if (have_posts) :
the_post;
?>
This will rewind WordPress's loop and allow have_posts() to print true.
I'm using contact form 7 plugins, I create form and then save the generated code in the contact page. But, in the preview page didn't show any form.
You just missed out the the_content function to call. Please add this code in your template file from container start to container end. Please check the HTML as per your design .
<div class="contianer"><!--container start here -->
<div class="row">
<!-- map column -->
<div class="col-lg-8 mb-4">
<!-- google map iframe goes here -->
</div>
<!-- contact details here -->
<div class="col-lg-4 mb-4">
<?php the_content(); ?>
</div>
</div>
</div> <!--container end here -->
<?php endwhile; endif; ?>
You need to add the Wordpress loop somewhere in that contact-us.php template, otherwise WP won't load what you define as content in the WP editor (which in your case is the content form)
Is there a way to only display a parent (wrapping) if it's actually been populated with content?
The reason I ask is in Wordpress I'm using Advanced Custom Fields to create additional text areas on the homepage of the website. The content is added to the page inside divs, like this:
<section class="band">
<div class="wrap">
<?php the_field('services'); ?>
</div>
</section>
If the field is left blank, obviously the markup that surrounds remains on the page and due to the margin/padding they have set on them it leaves a big empty stripe across the page.
I know little Wordpress (and PHP in general), I assume this must be possible? I've had a play around with if/else statements but had no luck.
Can anyone advise on this?
You could do it this way:
<?php if( get_field('services') ) : ?>
<section class="band">
<div class="wrap">
<?php the_field('services'); ?>
</div>
</section>
<?php endif; ?>
I haven't been able to find this specific question on here yet so I thought I might post about it on here and see if I could get some supportive feedback/help.
I need this blog to be responsive and only show so many posts and a specific screen size. I assume I need to do this within the php code. I would like to have the blog I have looping on the front page to display 3 blogs from 800PX and up (screen width), 2 blogs display 450px-800px, and 1 blog display at 300px. Roughly.
I find this easy to do with just plain html and css but I am new to this loop coding/php coding with wordpress and find this sort of confusing. I assume I need to ad some sort of "if this is this, then do this" in the php code?
In my plain demo html page I did it fine, but this is a whole new ball game.
Here is my demo site. Scroll down toward the bottom and resize your screen to see what I mean.
Here is the actual Div site. Right now I have it responsive as it will resize, but it gets too sloppy as it gets smaller and would visually loop better to display only 2 as the screen gets smaller, and then 1 for mobile.
Here is the PHP and the loop code. Can one of you awesome individuals that truly know what your doing point me in the right direction? Then, can you give me advice on a book or something I can read to get better at this stuff so I don't come here bothering you all the time.
<!-- BEGIN BLOG CALL-OUT SECTION -->
<div id="blog_section" class="clearfix">
<div class="blog_posts_container">
<?php
$rp_query = new WP_Query( 'showposts=3' );
if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>
<div class="post-wrapping-div">
<!-- Blog Thumbnail-->
<div class="blog_image image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s"><?php the_post_thumbnail('full'); ?></div>
<!-- Blog Post Date/time-->
<p class="post wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6s">
<span class="post_date">Posted <?php the_time('m/j/y g:i A') ?></span><br />
</p>
<!-- Blog Title-->
<p class="home_blog_title_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6.5s">
<span class="home_text_title"><?php the_title(); ?></span><br />
</p>
<!-- Blog Content-->
<div class="home_text_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".7s">
<?php the_excerpt(); ?>
Read More</li>
</div>
</div>
<img class="blog_divider" src="wp-content/themes/CloudPoint_Technology/img/blog_divider.png" class="image">
<?php endwhile; ?> </div>
<? endif; ?>
<?php wp_reset_postdata(); ?>
</div>
<!-- END BLOG CALL-OUT SECTION-->
Open your blog post page in Google Chrome or Firefox. Right click on one of the blog posts and click "Inspect Element" (might be slightly different in Firefox but same idea). This will show you the CSS rules that are being applied to that particular element.
Ensure you have the entire post selected in the inspector. You can do this by finding the element with the class "post" in the HTML displayed in the inspecor window. On the right hand side (using Chrome, and if the inspector window is on the bottom, not the side), you should see all the CSS rules applied to that element. One of them will be the class "post". These are the CSS rules that you want to start modifying first.
Let's say you want 3 posts to be displayed side-by-side, per line, when viewed on a desktop screen of 1024px. You might set the following rules under .post {:
.post {
display: inline-block;
width: 300px;
}
Note that you can make these changes directly in Chrome or Firefox's inspector window. They will not actually modify your site and everything will be reset when you refresh the page, but this will help you test different CSS rules before making the "permanent" changes in your CSS file(s).
Now, since 3 x 300px is less than 1024px, you should see three posts displayed side by side on a desktop size screen, then three on the next line, etc. If you resize your browser window to make it smaller, you should notice that at around 900px wide, the third post will drop down to the second line. If you resize it further to around 600px wide, you'll see the second post drop down to the second line.
Once you have that basic concept down, then you can start doing more sophisticated stuff, but that's the basic idea. The example I gave doesn't even require using media queries, just basic CSS. You can also use things like "max-width" and pixels/percentages to accomplish a lot of "responsiveness" without the need for media queries.
Also important to note is that, by doing what I mentioned in step 2, you should be able to easily determine which CSS file you need to modify, as the name of the file should be on the right next to the CSS selector. So look for something like "style.css" -- whatever ".css" file is listed next to that element is what you need to be modifying.
Here was the final working code (minus the obvious CSS I need to add to make it work).
<!-- BEGIN BLOG CALL-OUT SECTION -->
<div id="blog_section" class="clearfix">
<div class="blog_posts_container">
<?php $rp_query = new WP_Query( 'showposts=3' ); ?>
<?php $post_counter = 0; //Set an initial counter to 0 before the loop ?>
<?php if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>
<?php $post_counter++; ?>
<div class="post-wrapping-div <?php echo 'post-'.$post_counter; ?>">
<!-- Blog Thumbnail-->
<div class="blog_image image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s"><?php the_post_thumbnail('full'); ?></div>
<!-- Blog Post Date/time-->
<p class="post wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6s">
<span class="post_date">Posted <?php the_time('m/j/y g:i A') ?></span><br />
</p>
<!-- Blog Title-->
<p class="home_blog_title_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6.5s">
<span class="home_text_title"><?php the_title(); ?></span><br />
</p>
<!-- Blog Content-->
<div class="home_text_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".7s">
<?php the_excerpt(); ?>
Read More</li>
</div>
</div>
<img class="blog_divider" src="wp-content/themes/CloudPoint_Technology/img/blog_divider.png" class="image">
<?php endwhile; ?> </div>
<? endif; ?>
<?php wp_reset_postdata(); ?>
</div>
<!-- END BLOG CALL-OUT SECTION-->
Okay, so I'm developing a site in wordpress and I have two file templates "Default Template" and "Shop" in both templates I have;
<?php include('breadcrumbs.php'); ?>
and inside the 'breadcrumbs.php' file I the following;
<div class="breadcrumbs">
<div class="container">
<div class="row">
<div class="col-lg-12">
<ol class="breadcrumb">
<?php
if (function_exists('show_full_breadcrumb')) {
show_full_breadcrumb();
}
?>
</ol>
</div>
</div>
</div>
</div>
Now these breadcrumbs display properly if it is in the 'default template' like this;
But on the shop page display like this and I have no idea why as they're both including the same file;
now I'm not sure if this would affect much of it but I am also using WooCommerce.
Hopefully someone can help! thanks in advance!
It's definitely a css issue. Something is overriding the styling on that shop page. Use firebug to diagnose the breadcrumbs. Or provide a link so I can look at it. But Firebug will show you the ul styling right on the breadcrumbs and you can A/B between the default and the shop template. Should be an easy fix with the CSS
Hope this helps.