Have got stuck on this little problem, managed to get my Wordpress looping with the correct stuff.. and all works fine. the problem i have got is when i try to target the individual item on hover. Ive got my jquery script working but it targets them all.. I know ive got to to change the loop but not sure what im surpose to do.. heres my code anyway. Would be great if you guys could help.. Thanks
Wordpres Loop
<?php $i = 0 ?>
<?php query_posts('showposts=3'); ?>
<?php if(have_posts()) : while (have_posts()) : the_post(); ?>
<?php if( $i == 3 ) : ?>
<div class="row">
<?php endif; ?>
<div class="col-lg-4 col-md-4">
<a href="<?php the_permalink(); ?>">
<div class="miniwork">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<figcaption><?php the_title(); ?></figcaption>
</div>
</a>
</div>
<?php $i++ ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
Jquery Hover
jQuery(".miniwork" ).hover(
function() {
jQuery('.miniwork figcaption').addClass('animated tada');
jQuery('.miniwork figcaption').css('visibility', 'visible');
var filterVal = 'blur(8px)';
jQuery('.miniwork img')
.css('filter',filterVal)
.css('webkitFilter',filterVal)
.css('mozFilter',filterVal)
.css('oFilter',filterVal)
.css('msFilter',filterVal);
jQuery('.miniwork figcaption').css('opacity', '0.95')
}, function() {
jQuery('.miniwork figcaption').removeClass('animated tada');
jQuery('.miniwork figcaption').css('visibility', 'hidden');
jQuery('.miniwork figcaption').css('visibility', 'hidden');
var filterVal = 'blur(0px)';
jQuery('.miniwork img')
.css('filter',filterVal)
.css('webkitFilter',filterVal)
.css('mozFilter',filterVal)
.css('oFilter',filterVal)
.css('msFilter',filterVal);
jQuery('.miniwork figcaption').css('opacity', '0')
}
);
You are targeting class "miniwork" which is being assigned to every div .. you can assign #id to each div too like --
<div class="miniwork" id="<?php echo get_the_ID(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<figcaption><?php the_title(); ?></figcaption>
</div>
Now in jQuery taget 'miniwork#id-of-the-post'
Related
I am building a child theme using Flaxseed as a parent. This theme includes several 'content styles' which can be selected using Theme > Customizer. Each of these styles has a function in the parent functions.php file that renders the CSS and wordpress content into one. I want to edit some of the Loop functions that are in here, specifically updating the_excerpt to the_content, but I want to do so in a way that works with my child theme.
Since this code is in the parent functions.php, and since the theme customizer calls it specifically by name, I cannot simply add a new function, and I cannot override it using the same function name.
My best guess is that I need to somehow remove this function from the parent functions.php before loading a new function of the same name in my child function.php, but I cannot seem to figure out how.
Below is the code from the template file where the function is loaded into the template:
<?php for ($i = 1; $i < 8; $i++)
if (get_theme_mod('flaxseedpro_fa_'.$i) != 'none') {
flaxseedpro_display_featured_area(
get_theme_mod('flaxseedpro_fa_'.$i),
get_theme_mod('flaxseedpro_fa_title'.$i),
get_theme_mod('flaxseedpro_fa_cat'.$i)
);
}
?>
Here, the $i variable is the value that is set in the Theme > Customizer screen. This file and code could be modified easily as a part of the child theme.
Below are two code snips from the parent functions.php which select the appropriate featured area code:
function flaxseedpro_display_featured_area($style, $fa_title, $cat) {
if (is_home()) :
switch ($style) {
case 'carousel':
flaxseedpro_carousel($fa_title, $cat);
break;
case 'style1':
flaxseedpro_featured_style1($fa_title, $cat);
break;
case 'style2':
flaxseedpro_featured_style2($fa_title, $cat);
break;
case 'style3':
flaxseedpro_featured_style3($fa_title, $cat);
break;
case 'style4':
flaxseedpro_featured_style4($fa_title, $cat);
break;
default:
break;
}
endif;
}
which leads to several functions such as this:
function flaxseedpro_featured_style2($fa_title, $cat) {
?>
<div class="featured-style1 featured-style2">
<?php if ('' !== $fa_title) : ?>
<h2 class="featured-section-title container">
<?php echo esc_html($fa_title); ?>
</h2>
<?php endif; ?>
<div class="featured-posts-inner container">
<?php
$args = array(
'posts_per_page' => 5,
'cat' => $cat,
);
$fa_posts = new WP_Query($args);
if ($fa_posts->have_posts()) :
$counter = 0;
while ($fa_posts->have_posts()) :
$fa_posts->the_post();
$counter++;
if (1 === $counter) {
?>
<div class="feat-col1 md-6 sm-6">
<div class="md-12 pr-0 pl-0">
<article id="post-<?php the_ID(); ?>" <?php post_class('featured-post-item'); ?>>
<div class="item-container mb-3">
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail('medium-large', array('class' => 'featured-post-thumbnail-primary')); ?>
<?php else : ?>
<img src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/placeholder.png'); ?>">
<?php endif; ?>
</div>
<div class="post-title-parent">
<a class="post-title title-font" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<div class="post-author">
<?php esc_html_e('By', 'flaxseed-pro'); ?> <?php the_author(); ?> <i class="fa fa-clock-o"></i> <?php the_time('F j, Y'); ?>
</div>
<div class="entry-excerpt body-font mb-3"><?php the_excerpt(); ?></div>
</div>
<?php _e('Read More','flaxseed-pro') ?>
</article>
</div>
</div>
<?php
} else {
?>
<div class="feat-col2 md-6 sm-6">
<article id="post-<?php the_ID(); ?>" <?php post_class('featured-post-item'); ?>>
<div class="md-4 xs-4">
<div class="item-container">
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail('medium', array('class' => 'featured-post-thumbnail-secondary')); ?>
<?php else : ?>
<img src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/placeholder.png'); ?>">
<?php endif; ?>
</div>
</div>
<div class="md-8 xs-8">
<div class="post-title-parent">
<a class="post-title title-font" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<br><small><?php esc_html_e('By', 'flaxseed-pro'); ?> <?php the_author(); ?> <i class="fa fa-clock-o"></i> <?php the_time('F j, Y'); ?></small>
</div>
</div>
</article>
</div>
<?php
}
endwhile;
endif;
wp_reset_postdata();
?>
</div>
</div>
<?php
}
This is the the code I've been trying to override but unable to find a solution as a part of the child theme. All of the answers I've found seem to require a hook, which I cannot discern from this code.
This is solved.
I changed the function name that is called in my template file (flaxseedpro_display_featured_area >> flaxseedpro_display_featured_area2), then redefined the switch function to replace 'style3' with a new 'style5'. Then added the new 'style5' function with updated CSS code.
My 'hero' element is taking most of the top page, and an user would have to manually scroll past it to get to the content.
I want to change it so that clicking the links will scroll past the image and down to the posts title. At the minute, clicking the post reloads the page and the hero element is on top. But if you click 'more' tag, it scrolls nicely.
How do I make it so that clicking the link will scroll the page down in Wordpress? I don't mean 'more' tag. Maybe there is a way to update the link functions in WP so the links will create anchor like 'more' tag?
I haven`t got a code that creates a link, as they are created by WP (they are post links).
<div class="big">
</div>
<article><div class="post">
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
</div></article>
.big {
height: 1200px;
width: 900px;
background-color: grey;
}
JS Fiddle: https://jsfiddle.net/tvue1mwo/
single.php code:
<?php
if (is_single()) {
// Currently using get_header('posts'), so I can hide hero element by css and unhide it with js
get_header('posts');
// If I understand right, here should go the ANCHOR link?
}
else {
// Loads normal hero withou extra css class
get_header();
}
?>
<div class="main-section wrapper">
<?php
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<div class="post-content u-cf">
<h2 class="post"><a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a></h2>
<p class="post-info"><i class="fa fa-folder-open" aria-hidden="true"></i>
<?php
$categories = get_the_category();
$separator = ", ";
$output = '';
if ($categories) {
foreach ($categories as $category) {
$output .= '' . $category->cat_name . '' . $separator;
}
echo trim($output, $separator);
}
?>
|
<i class="fa fa-clock-o" aria-hidden="true"></i> <?php the_time('j/m/Y'); ?>
</p>
<div class="banner-image"><?php the_post_thumbnail('banner-image'); ?></div>
<?php the_content(); ?>
<?php endwhile; ?>
</div>
<?php
else :
echo '<p> No Content found</p>';
endif; ?>
</div>
<?php get_footer(); ?>
index.php:
<?php
if (have_posts()) :?>
<?php $count = 1;
while (have_posts()) : the_post(); ?>
<div class="post-content u-cf">
<?php if (has_post_thumbnail()) {
?>
<div class="post-thumbnail u-cf"><a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('small-thumbnail') ?></a>
</div>
<?php } ?>
<h2 class="post">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
<p class="post-info"><i class="fa fa-folder-open" aria-hidden="true"></i>
<?php
$categories = get_the_category();
$separator = ", ";
$output = '';
if ($categories) {
foreach ($categories as $category) {
$output .= '' . $category->cat_name . '' . $separator;
}
echo trim ($output, $separator);
}
?>
|<i class="fa fa-clock-o" aria-hidden="true"></i> <?php the_time('j/m/Y'); ?>
</p>
<?php the_content(); ?>
<hr>
<?php if ( 2 === $count ) { ?>
<div class="main-content-advert">
<p>Lorem ipsum</p><p>Lorem impsum</p>
</div>
<hr>
<?php }
$count++; ?>
<?php endwhile; ?>
</div>
<?php
else :
echo '<p> No Content found</p>';
endif; ?>
If you are using index.php to display the homepage & archives, you can do the following:
<?php
/* 1. define the name of the anchor to jump to */
$anchorname = "skipheroimage";
$count = 0;
if (have_posts()) :
while (have_posts()) : the_post();
?>
<?php
$count++; /* increment the count so that each anchor is unique on the page */
/* 2. add the anchor to the permalink so it will jump directly to the anchor */
$linkwithanchor = get_permalink()."#".$anchorname.$count;
?>
<div class="post-content u-cf">
/* 3. use our $linkwithanchor variable to create the link */
<h2 class="post"><a href="<?php echo $linkwithanchor; ?>">
<?php the_title(); ?></a></h2>
/* no change to the code that was here, so keep it as it was...
... I just removed it to make my changes easier to find */
<div class="banner-image"><?php the_post_thumbnail('banner-image'); ?></div>
/* 4. add our anchor - this is where the link will jump to */
<a id="<?php echo $anchorname.$count; ?>" name="<?php echo $anchorname.$count; ?>"></a>
<?php the_content(); ?>
</div> /* NOTE - you had this in the wrong place. */
<?php endwhile; ?>
<?php
else :
echo '<p> No Content found</p>';
endif; ?>
This will create an anchor directly after the banner image, and add the anchor name to the link so that it will jump directly to it.
I have commented and numbered each step directly in the code.
You will need to do this for any templates you have that displays the links (e.g. archive.php)
In my theme WordPress to display the post uses this (code #1):
function inner($posts, $td_column_number = '') {
$buffy = '';
if (!empty($posts)) {
foreach ($posts as $post) {
$td_module_17 = new td_module_17($post);
$buffy .= $td_module_17->render($post);
}
}
return $buffy;
}
I need to show posts using this code (code #2):
<?php
$custom_query = new WP_Query('posts_per_page= 5');
while($custom_query->have_posts()):
$custom_query->the_post();
?>
<div class="post-1">
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<h3><?php the_title(); ?></h3>
<div class="float-tags">
<div class="bb-td-post-small-box clearfix">
<?php the_tags('','',''); ?>
</div>
</div>
<div class="post-2">
<?php the_content(); ?>
</div>
</div>
</div>
<?php
endwhile;
wp_reset_postdata(); // reset the query
?>
If I insert code #2 into module 17, then the posts are output immediately all in one block, and not one at a time.
Solved a problem. The code was looped. Here is the working code.
<?php
class td_module_17 extends td_module {
function __construct($post) {
//run the parrent constructor
parent::__construct($post);
}
function render($Post = false) {
ob_start();
?>
<div class="post-1">
<div
<?php //post_class(); ?> id="post-<?= $Post->ID; ?>">
<h3><?= $Post->post_title; ?> </h3>
<div class="float-tags">
<div class="bb-td-post-small-box clearfix">
<?php $tags = get_the_tags($Post->ID); ?>
<? foreach ($tags as $tag) : ?>
<?= $tag->name; ?>
<? endforeach; ?>
</div>
</div>
<div class="post-2">
<?= apply_filters('the_content', $Post->post_content); ?>
</div>
</div>
</div>
<?php return ob_get_clean();
}
}
I managed to implement infinite scroll with masonry in WordPress and it's working but I have a couple of bugs:
The posts are supposed to be opened in ajax, but it's not working for the added items now, only for the first few ones.
After all the posts are displayed the console outputs the error:
GET http://www.jcvergara.com/working/page/3/?_=1431138637809 404 (Not Found).
I'm not sure what it is related to. I would appreciate any ideas how to fix it.
Here is my code:
<div class="main">
<div id="content" class="container">
<div class="right-line"></div>
<!-- List of categories, only on the first page -->
<?php
$cur_url = $_SERVER['REQUEST_URI'];
if ($cur_url == '/working/') {
echo '<div class="item tags">';
echo '<div class="item-title">';
echo '<span class="tag">Tags</span>';
echo '<ul><li>All</li>';
wp_list_categories('orderby=term_group&title_li=');
echo '</ul></div></div>';
}
?>
<!-- Posts -->
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php $category = get_the_category(); ?>
<div class="item <?php echo $category[0]->slug; ?>">
<a class="mask post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>"></a>
<div class="item-title">
<span class="tag">
<?php echo $category[0]->cat_name; ?>
</span>
<h4><?php the_title(); ?></h4>
</div>
<div class="item-img">
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<div class="thumb" style="background-image: url('<?php echo $image[0]; ?>'); "></div>
<?php endif; ?>
</div>
<div class="item-text">
<?php the_excerpt(); ?>
<span class="more">Read more...</span>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<div class="clear"></div>
</div>
<?php the_posts_navigation(); ?>
</div>
The code for opening posts in ajax:
$(document).ready(function(){
$.ajaxSetup({cache:false});
$('.post-link').click(function(){
$('.openarticle').css('display', 'block');
var post_link = $(this).attr('href');
$('#openthis').html('<div class="title"><h2>Loading..</h2><div class="text"></div>');
$('#openthis').load(post_link);
$('<a></a>', {
text: 'Close',
class: 'close',
id: 'close',
href: '#'
})
.prependTo($('.openarticle .main'))
.click(function() {
$('.openarticle').css('display', 'none');
$('#close').remove();
});
return false;
});
});
Here is the link: http://www.jcvergara.com/working/
Thanks in advance.
You need to add the code for opening your posts in infinite-scroll's callback function. (BTW, You should actually include the specific code for infinite-scroll and your code to open the post in your question, not just give a link.)
Here is the part of the infinite-scroll code that should help:
function( newElements ) {
var $newElems = $( newElements );
$container.masonry( 'appended', $newElems );
//add this to your code
$('.post-link').click(function(){
$('.openarticle').css('display', 'block');
var post_link = $(this).attr('href');
$('#openthis').html('<div class="title"><h2>Loading..</h2><div class="text"></div>');
$('#openthis').load(post_link);
$('<a></a>', {
text: 'Close',
class: 'close',
id: 'close',
href: '#'
})
.prependTo($('.openarticle .main'))
.click(function() {
$('.openarticle').css('display', 'none');
$('#close').remove();
});
return false;
});
}
Your error message relates to there not being a page 3 to load by infinitescroll
I am trying to use the post_tags reference to get the tag associated with a post and use it as a class for a div. I just cant seem to get it working... any advice?
<div id="workarchives_items">
<?php
global $post;
$myposts = get_posts('numberposts=100&offset=news&category_name=portfolio');
foreach($myposts as $post) :
setup_postdata($post);
?>
<div class="workitem <?php $posttags = get_the_tags(); ?> ">
<div class="workitem_photo"><?php the_post_thumbnail('150,200'); ?></div>
<div class="workitem_title"><?php the_title();?></div>
<div class="workitem_description"><?php the_excerpt(); ?></div>
<a class="workitem_projectdetails" href="<?php the_permalink(); ?>" style="display:none;">Project Details</a>
</div>
<?php endforeach; ?>
</div>
I've used this:
<?php
$posttags = get_the_tags();
$count=0;
if ($posttags) {
foreach($posttags as $tag) {
$count++;
if (1 == $count) {
echo $tag->name . ' ';
}
}
}
?>
But it only shows the first tag, how can I modify it to show them all.
Try getting rid of this line (and the equivalent closing curly brace):
if (1 == $count) {