WordPress.org

Ready to get started?Download WordPress

Forums

Display the_content(); for a post_id outside WP Loop (2 posts)

  1. mathewhood
    Member
    Posted 2 years ago #

    Hey,

    I have currently made my website display 12 recent posts from the category portfolio. They just display the_post_thumbnail and have the_title and the_content in a div above it as an overlay.

    An example can be found here http://www.mathewhood.com

    What I ideally want to do, is have it so that when you click on one of these thumbnails, the content for the post is shown in a div above.

    http://mathewhood.com/sitefiles/?page_id=71

    Is it possible for me to make it so that when you click on the div, it stores the post_id in a variable and then the_content calls that variable to show the post?

    Here is pretty much all my code, I am not sure exactly what you would need for it so yeah, sorry if it is a bit much :(

    Any help would be greatly appreciated!!!

    header.php Code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <title><?php bloginfo( 'name' ); ?> | <?php wp_title(); ?></title>
    <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
    <link href='http://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.compatibility.js"></script>
    <script>
    $(document).ready(function() {
    	//move the image in pixel
    	var move = 8;
    	//zoom percentage, 1.2 =120%
    	var zoom = 1;
    	//On mouse over those thumbnail
    	$('.recentPost').hover(function() {
    		//Set the width and height according to the zoom percentage
    		width = $('.recentPost').width() * zoom;
    		height = $('.recentPost').height() * zoom;
    		//Move and zoom the image
    		$(this).find('img').stop(false,true).animate({'width':width, 'height':height<?php /*?>, 'top':move, 'left':move<?php */?>}, {duration:200});
    		//Display the caption
    		$(this).find('div.caption').stop(false,true).fadeIn(200);
    	},
    	function() {
    		//Reset the image
    		$(this).find('img').stop(false,true).animate({'width':$('.recentPost').width(), 'height':$('.recentPost').height()<?php /*?>, 'top':'8', 'left':'8'<?php */?>}, {duration:100});
    		//Hide the caption
    		$(this).find('div.caption').stop(false,true).fadeOut(200);
    	});
    });
    </script>
    <script>
    $('.thumbs').click(function(e){
        e.preventDefault();
        var contents = $(this).closest('.recentPost').find('.caption').html();
    
        var $container = $('#theContainer').html(contents);
        $container.show().animate({height:200}, {duration: 1000, easing: 'jswing'}).animate({height:150}, {duration: 1000, easing: 'easeInOutCirc'});
        $container.click(function(){
            $container.animate({height:200}, {duration: 1000, easing: 'easeInExpo'})
            $container.fadeOut('slow');
            $container.html('');
        });
    });
    </script>
    <?php wp_head();?>
    </head>
    
    <body>
    
    <div id="wrapper">
    	<div id="container">
        	<div id="headerWrap">
            	<a href="http://www.mathewhood.com"><div id="logo"></div></a>
                <div id="nav"></div>
            </div>

    test.php Code

    <?php
    /*
    Template Name: Test
    */
    ?>
    <?php get_header(); ?>
    <script type="text/javascript">
    $(document).ready(function(){
    $(".recentPost").click(function(){
        $(".panel").slideToggle("slow");
      });
    });
    </script>
    
    <style type="text/css">
    div.panel,p.flip
    {
    width: 885px;
    margin: 0px;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 12px;
    padding-right: 12px;
    background:url(images/border.png);
    border-left: 1px dashed #5cd3f8;
    border-right: 1px dashed #5cd3f8;
    }
    div.panel
    {
    display: none;
    border: 1px dashed #5cd3f8;
    }
    p.flip
    {
    border-top: 1px dashed #5cd3f8;
    border-bottom: 1px dashed #5cd3f8;
    }
    </style>
    
    <?php query_posts('category_name=portfolio&showposts=12'); ?>
    <div class="panel">
    <b><?php the_content();?></b>
    </div>
    
                    <?php while (have_posts()) : the_post(); ?>
                       <div class="recentPost">
                        <a href="#">
                            <?php the_post_thumbnail('204, 144'); ?>
                        </a>
                        <a href="#">
                            <div class="caption">
                                <div class="captionTitle"><?php the_title(); ?></div>
                                <p><?php the_content();?></p>
                            </div>
                        </a>
                    </div>
                    <?php endwhile; ?>
                    <div class="cleared"></div>
    
    <?php get_footer(); ?>

    footer.php Code

    <div id="footerWrap">
            	<div id="footerLeft">
                	<p>Copyright 2011 <a href="http://www.mathewhood.com">Mathew Hood</a> / Powered by <a href="http://www.wordpress.org">WordPress</a></p>
                </div>
                <div id="footerRight">
                	<p>Follow me on <a href="#">Forrst</a>, <a href="#">Twitter</a> or <a href="#">Facebook</a>.</p>
                </div>
            </div>
        </div>
    </div>
    <?php wp_footer(); ?>
    </body>
    </html>

    functions.php Code

    <?php
    
    add_theme_support( 'post-thumbnails' );
    
    if ( function_exists( 'add_theme_support' ) ) {
    	add_theme_support( 'post-thumbnails' );
        set_post_thumbnail_size( 204, 144 ); // default Post Thumbnail dimensions
    }
    
    if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'navigation',
    	'before_widget' => '',
    	'after_widget' => '',
    	'before_title' => '',
    	'after_title' => '',
    ));
    
    register_sidebar(array('name'=>'sidebar',
    	'before_widget' => '',
    	'after_widget' => '',
    	'before_title' => '',
    	'after_title' => '',
    ));
    
    ?>

    style.css Code

    /*
    Theme Name: Mathew Hood 2011
    Theme URI: http://www.mathewhood.com
    Author: Mathew Hood
    Author URI: http://www.mathewhood.com
    Description: The 2011 theme for MathewHood.com
    Version: 1.2
    License: Not for re-use.
    */
    
    /* http://meyerweb.com/eric/tools/css/reset/
       v2.0 | 20110126
       License: none (public domain)
    */
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    /* Begin Normal Stylesheet */
    
    body{
    	background-color:#202023;
    	background-image:url(images/background.png);
    	background-repeat:repeat-x;
    	color:#ffffff;
    	font-family: 'Actor', sans-serif;
    }
    h1{
    	font-size:30px;
    	color:#fff;
    	font-family: 'PT Sans Narrow', sans-serif;
    	font-weight:100;
    	text-transform:uppercase;
    	margin-bottom:5px;
    	text-shadow:-1px -1px 2px #000;
    }
    a{
    	color:#70daf8;
    	text-decoration:none;
    }
    a:hover{
    	text-decoration:underline;
    }
    #wrapper{
    	margin:0;
    	margin:auto;
    }
    #container{
    	width:924px;
    	margin:0;
    	margin:auto;
    	margin-top:63px;
    }
    #logo{
    	background:url(images/logo.png) no-repeat;
    	width:292px;
    	height:74px;
    }
    #contentWrap{
    	position:relative;
    	margin-top:45px;
    }
    #newBanner{
    	position:absolute;
    	background:url(images/newBanner.png) no-repeat;
    	top:-5px;
    	left:161px;
    	width:64px;
    	height:64px;
    	z-index:2;
    }
    #footerWrap{
    	font-size:14px;
    	margin-top:4px;
    }
    #footerLeft{
    	float:left;
    }
    #footerRight{
    	float:right;
    }
    #theContainer{
     background:#EEEEEE;
    }
    .captionTitle{
    	color:#70daf8;
    	margin-top:10px;
    	font-size:18px;
    	text-align:center;
    	filter:alpha(opacity=10);    /* ie  */
    	-moz-opacity:1;    /* old mozilla browser like netscape  */
    	-khtml-opacity: 1;    /* for really really old safari */
    	opacity: 1;
    }
    .recentPost{
    	width:204px;
    	height:144px;
    	background: url(images/border.png);
    	padding:8px;
    	float:left;
    	margin-right:11px;
    	margin-bottom:11px;
    	overflow:hidden;
    	position:relative;
    }
    .caption {
    	margin-left:8px;
    	width:204px;
    	height:144px;
    	background:#000;
    	color:#fff;
    	font-weight:bold;
    	/* fix it at the bottom */
    	position:absolute;
    	left:0;
    	/* hide it by default */
    	display:none;
    	/* opacity setting */
    	filter:alpha(opacity=80);    /* ie  */
    	-moz-opacity:0.8;    /* old mozilla browser like netscape  */
    	-khtml-opacity: 0.8;    /* for really really old safari */
    	opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */
    }
    
    .recentPost .caption a {
    	text-decoration:none;
    	color:#0cc7dd;
    	font-size:16px;
    	filter:alpha(opacity=100);    /* ie  */
    	-moz-opacity:1;    /* old mozilla browser like netscape  */
    	-khtml-opacity: 1;    /* for really really old safari */
    	opacity: 1;
    
    	/* add spacing and make the whole row clickable*/
    	padding:5px;
    	display:block;
    }
    
    .recentPost .caption p {
    	padding:5px;
    	margin:0;
    	font-size:14px;
    	filter:alpha(opacity=100);    /* ie  */
    	-moz-opacity:1;    /* old mozilla browser like netscape  */
    	-khtml-opacity: 1;    /* for really really old safari */
    	opacity: 1
    }
    img {
    	border:0;
    	/* allow javascript moves the img position*/
    	position:absolute;
    }
    .cleared{
    	clear:both;
    }
    .post-content {
    	display: none;
    }
    #current-post .post-content {
    	display: block;
    }
    
    /* Blog Styles */
    #blogContainer{
    	float:left;
    	width:654px;;
    	margin-right:40px;
    }
    #sidebar{
    	float:right;
    	width:223px;
    }
    .blogPost{
    	margin-bottom: 20px;
    	float:left;
    }
    .blogLeft{
    	float:left;
    	width:143px;
    	text-align:right;
    	margin-right:37px;
    	border-top:1px solid #fff;
    	padding-top:15px;
    	font-size:14px;
    	font-style:italic;
    	line-height:18px;
    }
    .blogRight{
    	float:right;
    	width:467px;
    }
    .blogRight p{
    	color:#fff;
    }
    .readMore{
    	float:right;
    }
    .textwidget{
    	margin-bottom:20px;
    }
    
    .caption{
    display:none;
    }
    
    #contentWrap{
    position:relative;
    }
    
    .recentPost{
     display:inline;
      margin:4px;
    }
    
    #theContainer{
     background:#EEEEEE;
    }
    
    /* Contact Form */
    #ajaxForm .textfield{
    	width:250px;
    	height:20px;
    	background: url(images/border.png);
    	padding-left:5px;
    	padding-top:5px;
    	margin-bottom:5px;
    	color:#fff;
    }
  2. randyttp
    Member
    Posted 2 years ago #

    Is it possible? of course.

    Sounds like you want the content to load into the div without the page refreshing though right? That would take javascript, something I'm not very good at.

Topic Closed

This topic has been closed to new replies.

About this Topic