Support » Fixing WordPress » Display the_content(); for a post_id outside WP Loop

  • 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;
    }

Viewing 1 replies (of 1 total)
  • 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.

Viewing 1 replies (of 1 total)
  • The topic ‘Display the_content(); for a post_id outside WP Loop’ is closed to new replies.