Problem page: www.kendraschaefer.com/mandapop (problem with images in thin middle column)
Hi,
I'm working on a new Wordpress template, and I've run into an issue with Fancybox. I'm trying to get the pictures in the thin middle column of the page above to, when clicked on, pop up in fancybox with attached post data.
It's mostly working OK - on first click, no problem. Click an image, post pops up in a fancybox. But close the fancybox and try again, and you'll notice that the post loads once, then loads again. Click on aother, and this time the post loads multiple times. (Don't click too many times, your browser will freak). Sounds like a recursion problem, but I'm not sure where I'm going wrong.
I tried using other pop-up plugins, like Facebox and Lightbox, with the same problem, so it must be my loop or something. I also commented out all other javascript on the page to see if there was a conflict - still had the problem.
Here's my code (there are two loops - one for the gallery images and one for the blog entries):
<div id="homeGalleryCol">
<div id="homeGalleryContent">
<?php
query_posts('post_type=galleryimage&posts_per_page=7');
if(have_posts()) : while(have_posts()) : the_post(); ?>
<div class="singlePhotoPost">
<h3 class="galleryListDate"><?php the_time('M d'); ?></h3>
<?php the_post_thumbnail('gallery-pic-thumbnail'); ?>
</div><!-- end singlePhotoPost -->
<?php endwhile; ?>
<?php endif; ?>
</div><!-- end homeGalleryContent -->
</div><!-- end homeGalleryCol -->
<div id="thinRightCol">
<div id="rightColContent">
<div id="blogListColWrapper">
<div id="blogListCol">
<?php
query_posts('posts_per_page=3');
global $more;
$more = 0;
if(have_posts()) : while(have_posts()) : the_post(); ?>
<div class="singlePost">
<h3 class="blogListDate"><?php the_time('M d'); ?></h3>
<?php the_post_thumbnail(); ?>
<h2 class="postTitle"><?php the_title(); ?></h2>
<?php the_content('<span class="moretext"> </span>'); ?>
</div><!-- end singlePost -->
<?php endwhile; ?>
<?php endif; ?>
</div><!-- end blogListCol -->
</div><!-- end blogListColWrapper -->
</div><!-- end rightColContent -->
</div><!-- end thinRightCol -->
Thanks much.
It seems that you've removed the actual output. Can you restore it and I'll let you know what's going on? Thanks.
Try with this function <?php wp_reset_postdata(); ?>
Because this function is used to restore the global $post variable of the main query loop after a secondary query loop using new WP_Query. It restores the $post variable to the current post in the main query.
Example: http://pastebin.com/kSEg5JPg
Pay attention to <?php wp_reset_postdata(); ?>
Hope that will help you
Related
I am creating my own custom theme from scratch and have run into a bit of trouble. On the blog page, each time a new post is displayed, it is smaller than the last. This is due to me setting the width of the blog post to 33.3%. Also each blogpost gets displayed slightly right of the one previous to it. How can I have each blog post be 33.3% of the content area and be displayed side by side, 3 per row? I am using wordpress functions to call each blog post. I am only displaying the blog posts thumbnail and when you click the thumbnail it takes you to the post. So basically 3 images side by side.
[BONUS]: How could I get text to display horizontally and vertically on hover over each blog post image?
I know this is a lot to ask, but I have been trying to work this out for days. A JS Fiddle or Codepen would be greatly appreciated.
Index.php:
<?php get_header(); ?>
<div class="blog-posts">
<?php while (have_posts()) : the_post(); ?>
<div id="page-content">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<h3><?php the_title(); ?></h3>
</a>
<?php endwhile; ?>
</div>
</div>
<?php get_footer(); ?>
You should use bootstrap and do something like this :
<?php get_header(); ?>
<div class="blog-posts">
<?php while (have_posts()) : the_post(); ?>
<div class="col-md-4">
<div id="page-content">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<h3><?php the_title(); ?></h3>
</a>
</div>
</div>
<?php endwhile; ?>
</div>
<?php get_footer(); ?>
Take care to remove the width: 33.33%; CSS rule and close your <div> tags in the loop, not after.
Hope it helps
[EDIT]
See this link for more information about how to use column classes with bootstrap : grid example basic
[EDIT #2]
You could do it without bootstrap but it will be a bit more difficult. You'll have to set the "display" to "inline-block" and set the width of the divs with taking care of the inherit margin of these tags. In this example, I had to set it to 32%. Here is the fiddle
I am following along with this tutorial and what I have made so far is not working as it should. I have gotten to the point where I am starting to use the loop - this is my code:
index.php
<?php get_header(); ?>
<div class="row">
<div class="col-sm-8 blog-main">
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile; endif;
?>
</div><!-- /.blog-main -->
<?php get_sidebar(); ?>
</div><!-- /.row -->
<?php get_footer(); ?>
</div><!-- /.container -->`
content.php
<div class="blog-post">
<h2 class="blog-post-title"><?php the_title(); ?></h2>
<p class="blog-post-meta"><?php the_date(); ?><?php the_author(); ?></p>
<?php the_content(); ?>
</div><!-- /.blog-post -->
I have two posts but only the latest post is getting displayed (by the loop) and within the post that gets displayed - the only part that is displayed is the title. So it seems like the_date(), the_author(), and the_content() functions are not working for some reason, and the loop is only getting one of the posts (the latest one).
What is wrong? Thanks.
I'm not sure what I did, but I went to WP admin and clicked "customize" for the theme, and it loaded correctly in the theme editor - and then I went to the site, and it was working. I think maybe I didn't save a file, and I didn't realize it - and as I was trying to figure it out, I ended up saving the file, and it started working.
I am trying to modify a child theme based on wp-foundation and I'm trying to edit the front page.
This is the front page code in the main theme;
<?php
/*
Template Name: Homepage
*/
?>
<?php get_header(); ?>
<div id="content">
<div id="main" class="twelve columns" role="main">
<article role="article">
<?php
$orbit_slider = of_get_option('orbit_slider');
if ($orbit_slider){
?>
<header>
<div id="featured">
</div>
</header>
<?php } ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<section class="row post_content">
<div class="home-main eight columns">
<?php the_content(); ?>
</div>
</section> <!-- end article header -->
<footer>
<p class="clearfix"><?php the_tags('<span class="tags">Tags: ', ', ', '</span>'); ?></p>
</footer> <!-- end article footer -->
</article> <!-- end article -->
<?php
// No comments on homepage
//comments_template();
?>
<?php endwhile; ?>
</article>
<?php endif; ?>
</div> <!-- end #main -->
</div> <!-- end #content -->
<?php get_footer(); ?>
Whenever I try to delete some code (I want to get rid of the built in orbit slider and use a plugin for example) but when I delete this piece;
<?php
$orbit_slider = of_get_option('orbit_slider');
if ($orbit_slider){
?>
The page just goes blank. I thought I was doing this in a 'clean' way, though I am not so familiar with PHP so I don't get why the page goes blank. I want to delete more of the php codes (basically I want a clean empty page to start with.) but they all give the same result; a blank page.
Why can't I just remove these pieces, why does this error occur?
May be you have removed if ($orbit_slider){, but you have left the closing curly brace <?php } ?>
Remove that line just after the header closing tag.
</header>
remove this ----> <?php } ?>
in your wp-config.php look for
define('WP_DEBUG', false);
and replace it with
define('WP_DEBUG', true);
which will show errors instead of blank screen (only for development)
for this piece of code you are getting error because
if ($orbit_slider){
starts an if loop. try removing only
$orbit_slider = of_get_option('orbit_slider');
For my portfolio site, I would like to add anchor links to both the 'work' and 'blog' sections so that when clicked through to the next page it goes to the respective section. I noticed this is possible using jQuery from this question: WordPress pagination - Adding an Anchor link, but am unsure how this would work with two loops on the same page?
my current loops look like this, just replacing categories for each section:
<?php $paged = (get_query_var('page')) ? get_query_var('page') : 1;
$args=array('category_name'=>'portfolio','posts_per_page'=>4,'paged'=>$paged);
query_posts($args);
if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="blog-post">
<div class="thumbnail">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
<a class="details" href="<?php the_permalink(); ?>">
<h6><?php echo get_the_excerpt(); ?></h6>
</a><!-- DETAILS -->
</div><!-- THUMBNAIL -->
<div class="aside">
<h4><?php the_title(); ?></h4>
</div><!-- ASIDE -->
</div><!-- BLOG - POST -->
<?php endwhile; ?>
<div class="navigation">
<h3><?php posts_nav_link('∞','« Newer Posts','Older Posts »'); ?></h3>
</div><!-- PAGED-NAVIGATION -->
<?php wp_reset_query(); ?>
Ah I see what you mean; actually you are better off using wordpresses $args for the paginate_links() function. You can see it here: http://codex.wordpress.org/Function_Reference/paginate_links .
The one you want to change is 'format'=>'?page=%#%', (which is the page number) and changing it to something like 'format' => '?page=%#%#work', and 'format' => '?page=%#%#blog',
So you can do:
echo paginate_links(array('format' => '?page=%#%#work')); which should make clicking the link jump back down to the work anchor.
The problem is, you will still have a page jump if the user isn't scrolled exactly to the position of the anchor link. You are best to implement an Ajax solution so there is no reload of the page at all. Here is a good tutorial to get you started: http://wp.tutsplus.com/articles/getting-started-with-ajax-wordpress-pagination/
Where you have your first <div class="navigation">
Add an id="work" and to the second id="blog"
so you would have
<div class="navigation" id="work">
</div>
<div class="navigation" id="blog">
</div>
Somewhere on your page.
Then you need a small modification to the jquery from the question you referred to to make the correct anchor link:
<script type="text/javascript">
$(document).ready(function() {
$('.pagenavi a').each(function(i,a){
$(a).attr('href',$(a).attr('href')+'#'+a.parents('.navigation').attr('id'));
//$(a).attr('href',$(a).attr('href')+'#blog') <-- instead of this
});
});
</script>
The parents('.navigation').attr('id') tells jquery to move up the dom intil it finds the navigition tag, and just grab it's ID to use as the text for the achor text
If you already have the ids blog and work on the page, you could use rel="work" instead and then you would in the jquery use attr('rel')
When I'm logged in to my site, viewing an individual post, the right sidebar displays perfectly, but when I log out on the same page (via the sidebar widget), the right sidebar suddenly ends up below my comments. This only happens with I'm viewing individual posts. Any ideas what causing this?
I've double checked the CSS, and as far as I can tell being logged out doesn't add or change any class attributes. Also - the theme I'm working with doesn't have a posts.php file...
Post: http://www.wespeakfashion.com/cool-sunglasses
page.php...
<?php include (TEMPLATEPATH . '/header.php'); ?>
<div id="content">
<?php include(TEMPLATEPATH."/l_sidebar.php");?>
<div id="contentleft">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_content(__('Read more'));?><div style="clear:both;"></div>
<!--
<?php trackback_rdf(); ?>
-->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
<?php posts_nav_link(' — ', __('« go back'), __('keep looking »')); ?>
</div>
<?php include(TEMPLATEPATH."/r_sidebar.php");?>
</div>
<!-- The main column ends -->
<?php get_footer(); ?>
The right sidebar appears to be in the main content div. This is suspicious because the left sidebar is a sibling of the main content div. Try taking the right sidebar out of there, and putting it as a sibling of the left sidebar and main content div.