I'm using Wordpress for my website. What I'm trying to achieve is that if I hover on a specific post, it should show the title of that very post. But what it does right now, is that if I hover on one post, it displays the title of all the posts.
The code:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<div>
<div class="post-header"><a href="<?php the_permalink() ?>">
<?php if ( p75HasThumbnail($post->ID) ) { ?>
<img src="<?php echo p75GetThumbnail($post->ID, 200, 108); ?>" alt="<?php the_title(); ?>" width="200" height="108" />
<?php } ?>
</a></div>
<div class="post-content" style="display:none;">
<h2><?php the_title(); ?></h2>
</div>
<div class="post-footer">
<small>
In: <?php the_category(' | ') ?>
</small>
</div>
</div>
</div>
<!-- -->
<?php endwhile; ?>
<?php next_posts_link('<div class="post archiveTitle "><div>← Older</div></div>') ?>
<?php previous_posts_link('<div class="post archiveTitle "><div>Newer →</div></div>') ?>
<?php else : ?>
<div class="post">
<div>
<h1>Not Found</h1>
<p>Sorry, but you are looking for something that isn't here.</p>
</div>
</div>
<?php endif; ?>
JS:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('.post-header').hover(function(){
$('.post-content').show();
}, function(){
$('.post-content').hide();
});
});
</script>
I'm not sure, if it's this, what you want to achieve:
$('.post-header').hover(function(){
$('.post-content', $(this).parent()).show();
}, function(){
$('.post-content').hide();
});
Now only the post-content of the currently hovered post is shown.
Related
I created the design that will be used to show first post differently from the others. It's not that easy because the first post needs to be in his own div id, which is completely different from the other posts.
Here is the code I currently use in wordpress php:
<?php get_header(); ?>
<!-- Begin Content -->
<div id="content-wide">
<div class="post">
<div class="imgwide" style="background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8)), url(<?php echo catch_that_image() ?>); background-repeat: no-repeat; background-size: 100%; background-position: center;">
<div class="p-heading">
<h1>
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h1>
<div class="p-content">
Excerpt text of the first post goes here but php the_excerpt doesnt work for this wide paragraph
</div>
</div>
</div>
</div>
</div>
<div id="content-a">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<div class="imgdiv"><img src="<?php echo catch_that_image() ?>" width="250"></div>
<div class="p-heading">
<h1>
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h1>
</div>
<div class="p-content">
<?php the_excerpt(); ?>
</div>
<div class="p-info">
<?php the_time('j.m.Y') ?> |
<?php the_category(', '); ?> | <img src="http://www.virmodrosti.com/wp-content/uploads/comments.png" alt="Komentarji" width="26" height="12">
<?php $totalcomments = get_comments_number(); echo $totalcomments; ?>
</div>
</div>
<?php endwhile; ?>
and here is my site url http://www.virmodrosti.com/zdravje/
All I want is that first post isn't displayed twice, but is only moved to the wide post design. The big post is in content-wide. Let me know how to do that. Thank you.
try to add a counter that starts in zero and increment it inside your while loop, then use if else statement to check the value of counter if zero display the first post else the other posts.
EDITED
<?php $counter = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php if($counter == 0) { ?>
<div id="content-wide">
<div class="post">
<div class="imgwide" style="background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8)), url(<?php echo catch_that_image(); ?>); background-repeat: no-repeat; background-size: 100%; background-position: center;">
<div class="p-heading">
<h1><?php the_title(); ?></h1>
<div class="p-content">
<?php the_excerpt(); ?>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
<?php if($counter > 0) { ?>
<div class="post">
<div class="imgdiv"><img src="<?php echo catch_that_image() ?>" width="250"></div>
<div class="p-heading">
<h1><?php the_title(); ?></h1></div>
<div class="p-content">
<?php the_excerpt(); ?>
</div>
<div class="p-info">
<?php the_time('j.m.Y') ?> |
<?php the_category(', '); ?> | <img src="http://www.virmodrosti.com/wp-content/uploads/comments.png" alt="Komentarji" width="26" height="12">
<?php $totalcomments = get_comments_number(); echo $totalcomments; ?>
</div>
</div>
<?php } ?>
<?php $counter ++; ?>
<?php endwhile; ?>
I created my own template in WordPress, but the loop entries does not work. I would like to entries work on one of the subpages. I also added entries.
This is my code of my subpage. Please help me. I don't know what is wrong. I added a picture under the code.
<?php include 'header.php'; ?>
<main class="subpage-blog">
<div class="subpage-banner">
<div class="container">
<h3>BLOG SIDEBAR</h3>
<div class="breadcrumbs">
</div>
</div>
</div>
<aside class="side-menu col-md-4">
<div class="search">
<h4>Search blog</h4>
<input type="text" value="Search">
</div>
<!-- .search -->
<div class="categories">
<h4>Blog Categories</h4>
<ul class="categories-blog-ul">
<li>Inspirtation</li>
<li>Work</li>
<li>Tech</li>
<li>Creative</li>
</ul>
</div>
<!--.categories-->
<div class="recent-posts">
<h4>Recents posts</h4>
<ul>
</ul>
</div>
<!-- .recent-posts-->
<div class="tags-spot">
<h4>Tags</h4>
<div class="tag"></div>
</div>
<!-- .tags-spot-->
</aside>
<!-- .side-menu-->
<article class="content">
<div class="container">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="news-box">
<div class="news-list-content">
<a href="">
<h3><?php the_title(); ?></h3>
<?php the_content('czytaj dalej'); ?>
</a>
</div>
<!-- .news-list-content-->
<div class="image-box-news">
<img src="<?=get_template_directory_uri(); ?>/images/ikona-wpisu.png" alt="" />
</div>
</div>
<!-- .news-box-->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
<!-- .container-->
</article>
<!-- .content-->
</main>
<?php include 'footer.php'; ?>
The problem is that:
if (have_posts()) : while (have_posts()) : the_post();
is using the current page's have_posts query.. That means that it probably will just show whatever that current page template's content would be.
Instead, you'll want to create an entirely new query object and call these functions on it like so:
<?php
$the_query = new WP_Query( array('posts_per_page' => 10 ) ); //Create our new custom query
if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="news-box">
<div class="news-list-content">
<h3><?php the_title(); ?></h3>
<?php the_content('czytaj dalej'); ?>
</div>
<!-- all your other markup goes here.... -->
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php wp_reset_postdata(); //Restore the original postdata for this page, if needed later ?>
Is it possible to add next and previous post links to a page that is querying posts from one category and displaying one post of that category per page?
This is what I currently have:
<?php query_posts('cat=2&posts_per_page=1'); ?>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- article -->
<article class="overlay" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="inner">
<div class="gallery" style="background-image: url(<?php the_field('image'); ?>);">
<div class="close" data-home="<?php echo home_url(); ?>">
<span class="oi" data-glyph="x"></span>
</div>
</div>
<div class="copy">
<h2><?php the_title(); ?></h2>
<?php the_field('news_content'); ?>
Next
</div>
</div>
</article>
<!-- /article -->
<?php endwhile; ?>
You can try with next_post_link()
<?php next_posts_link(); ?>
This seemed to be the only solution that worked for me, if anyone needs a template:
<?php get_header(); ?>
<main role="main">
<!-- section -->
<section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- article -->
<article class="overlay" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="inner">
<div class="copy">
<h2><?php the_title(); ?></h2>
<?php the_field('news_content'); ?>
<?php the_field('copy'); ?>
<br>
<br>
<?php next_post_link( '%link', 'Next', TRUE, 'post_format' ); ?> | <?php previous_post_link( '%link', 'Previous', TRUE, 'post_format' ); ?>
</div>
</div>
</article>
<!-- /article -->
<?php endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>
</article>
<!-- /article -->
<?php endif; ?>
</section>
<!-- /section -->
</main>
<?php get_footer(); ?>
I'm actually trying to display the post thumbnail inside the loop just before the content by using the_post_thumbnail(); function.
It works like a charm in anywhere in my page before I call the function
<?php get_sidebar(); ?>
After that impossible to show the post thumbnail.
I've tried with
<?php the_post_thumbnail(); ?>
and also
<?php echo get_the_post_thumbnail(); ?> but nothing happens.
Here is my whole code :
<?php
/**
* The Template for displaying all single posts
*
* #package WordPress
*/
get_header(); ?>
<div id="pageHeader" >
<div id="pageHeader-inner"> <span class="shadow"></span><img src="<?php bloginfo('template_url'); ?>/images/header_01.jpg" /></div>
</div>
<div class="container" id="pageTitle">
<h1><?php the_title(); ?></h1>
</div>
<!--Begin of content-->
<div class="grey-bg">
<div class="container">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="row">
<div class="col-sm-3 sidebar">
<!-- Sub Nav -->
<?php if ( is_page() ) { ?>
<?php
if($post->post_parent)
$children = wp_list_pages('title_li=&child_of='.$post->post_parent.'&echo=0'); else
$children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0');
if ($children) { ?>
<div class="sidebar-module sub-menu">
<ul>
<?php echo $children; ?>
</ul>
</div>
<?php } } ?>
<!--Works perfectly till here -->
<?php get_sidebar(); ?>
<!--Broken till here-->
</div> <!-- /.sidebar -->
<div class="col-sm-9">
<div class="content-main">
<div class="content white-bg left-stroke <?php echo $post->post_name; ?>">
<?php if ( has_post_thumbnail() ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else : ?>
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<h1>Not Found</h1>
</div>
<?php endif; ?>
</div> <!-- /.content -->
</div><!-- /.content-main -->
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<?php get_footer(); ?>
Thank's a lot for your responses.
You are trying to use function the_post_thumbnail() outside WordPress loop. To use this function outside loop you have to specify "post ID". Documentation for this function http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail
For example to get thumbnail for post ID 4 you have to use function with parameter 4 like the_post_thumbnail(4) or store ID in variable.
This question already has answers here:
why do my recent post titles replace the page title i am posting on [closed]
(2 answers)
Closed 9 years ago.
Hi guys i posted a question earlier about how my blog posts kept replacing my page titles in wordpress
https://stackoverflow.com/questions/20541544/why-do-my-recent-post-titles-replace-the-page-title-i-am-posting-on/20542610?noredirect=1#20542610
but i did not understand the way my questions were answered as i have no php experience so i thought id post my code here so if anyone could pin point were in the wordpress code it has a fault ?
this is the code for the page in which its title "Latest News" is being replaced
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the wordpress construct of pages
* and that other 'pages' on your wordpress site will use a
* different template.
*
*/
?>
<?php get_header(); ?>
<div class="page-heading">
<h1 class="page-title"><?php the_title(); ?></h1>
<div class="clear"></div>
</div>
<!--Start Page Content -->
<div class="page-content-container">
<div class="page-content">
<div class="grid_16 alpha">
<div class="content-bar">
<?php if (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<div class="clear"></div>
<?php wp_link_pages(array('before' => '<div class="page-link"><span>' . __('Pages:', 'black-bird') . '</span>', 'after' => '</div>')); ?>
<?php endif; ?>
<!--Start Comment box-->
<?php comments_template(); ?>
<!--End Comment box-->
</div>
</div>
<div class="grid_8 omega">
<!--Start Sidebar-->
<?php get_sidebar(); ?>
<!--End Sidebar-->
</div>
</div>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>
and this is the code for the posts of which each new post title replaces the page title
<?php
/**
* The Template for displaying all single posts.
*
*/
?>
<?php get_header(); ?>
<!--Start Page Heading-->
<!--Start Page Content -->
<div class="page-content-container">
<div class="page-content single">
<div class="grid_16 alpha">
<div class="content-bar">
<!-- Start the Loop. -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!--post start-->
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post_content">
<?php the_content(); ?>
<div class="clear"></div>
<h1 class="post_title single" ><span><?php the_title(); ?><span></h1>
<?php wp_link_pages(array('before' => '<div class="page-link"><span>' . __('Pages:', 'black-bird') . '</span>', 'after' => '</div>')); ?>
<?php if (has_tag()) { ?>
<div class="tag">
<?php the_tags(__('Post Tagged with ', ', ', '')); ?>
</div>
<?php } ?>
</div>
<ul class="post_meta clearfix">
<li class="posted_by"><span><?php _e('Posted by', 'black-bird'); ?></span> <img src="<?php echo get_template_directory_uri(); ?>/images/admin.png" /><?php the_author_posts_link(); ?></li>
<li class="post_category"><span><?php _e('Posted in', 'black-bird'); ?></span> <?php the_category(', '); ?></li>
<li class="post_date"><img src="<?php echo get_template_directory_uri(); ?>/images/date.png" /> <?php echo get_the_time('M, d, Y') ?></li>
<li class="post_comment"><img src="<?php echo get_template_directory_uri(); ?>/images/comment.png" /> <span><?php comments_popup_link('No Comments.', '1 Comment.', '% Comments.'); ?></span></li>
</ul>
</div>
<!--End Post-->
<?php
endwhile;
else:
?>
<div class="post">
<p>
<?php _e('Sorry, no posts matched your criteria.', 'black-bird'); ?>
</p>
</div>
<?php endif; ?>
<!--End Loop-->
<nav id="nav-single"> <span class="nav-previous">
<?php previous_post_link('%link', __('<span class="meta-nav">←</span> Previous Post ', 'black-bird')); ?>
</span> <span class="nav-next">
<?php next_post_link('%link', __('Next Post <span class="meta-nav">→</span>', 'black-bird')); ?>
</span> </nav>
<!--Start Comment box-->
<?php comments_template(); ?>
<!--End Comment box-->
</div>
</div>
<div class="grid_8 omega">
<!--Start sidebar-->
<?php get_sidebar(); ?>
<!--End sidebar-->
</div>
</div>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>
also this is the code for the header file
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title><?php wp_title(''); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> style="<?php if (blackbird_get_option('blackbird_bodybg') != '') { ?>background: fixed url(<?php echo blackbird_get_option('blackbird_bodybg'); ?>);<?php } else {
?> background: fixed url(<?php echo get_template_directory_uri(); ?>/images/bg.jpg); <?php } ?>" >
<div class="main-container">
<div class="container_24">
<div class="grid_24">
<div class="header">
<div class="grid_16 alpha">
<div class="logo"> <img src="<?php if (blackbird_get_option('blackbird_logo') != '') { ?><?php echo blackbird_get_option('blackbird_logo'); ?><?php } else { ?><?php echo get_template_directory_uri(); ?>/images/logo.png<?php } ?>" alt="<?php bloginfo('name'); ?>" /></div>
</div>
<div class="grid_8 omega">
<div class="header-info">
<?php if (blackbird_get_option('blackbird_topright_cell') != '') { ?>
<p class="cell"><img src="<?php echo get_template_directory_uri(); ?>/images/call-us.png" class="call-us" /> <?php echo stripslashes(blackbird_get_option('blackbird_topright_cell')); ?></p>
<?php } else { ?>
<p class="cell"><img src="<?php echo get_template_directory_uri(); ?>/images/call-us.png" class="call-us" /> Call Us (111) 234 - 5678</p>
<?php } ?>
<?php if (blackbird_get_option('blackbird_topright_text') != '') { ?>
<p><?php echo stripslashes(blackbird_get_option('blackbird_topright_text')); ?></p>
<?php } else { ?>
<p><?php _e('21/B, London Campus, British Road, Birmingham, UK','black-bird'); ?></p>
<?php } ?>
</div>
</div>
</div>
<div class="clear"></div>
<!--start Menu wrapper-->
<div class="menu_wrapper">
<div class="grid_18 alpha">
<div id="MainNav">
<?php _e('Pages Navigation Menu','black-bird'); ?><span></span>
<?php blackbird_nav(); ?>
</div></div>
<div class="grid_6 omega">
<div class="top-search">
<?php get_search_form(); ?>
</div>
</div>
</div>
<!--End Menu wrapper-->
<div class="clear"></div>
so guys what do I need to alter and were in order for each post title to stop replacing the page title?
This bit of code:
<h1 class="post_title single"
Will print whatever the post title is. YOu can try replacing it with
<h1><?php wp_title(''); ?></h1>
To get the page title, or with
$parent_title = get_the_title($post->post_parent);
echo '<h1>' . $parent_title . '</h1>';
To get the parent page title