A bit of an odd one. My news posts are not displaying through their unique URL.
Example:
- through the site you can see the news section and click through:
http://disciplesldn.com/
As a stand alone post, content disappears:
http://disciplesldn.com/2014/12/win-tickets-to-see-us-play-in-liverpool-on-boxing-day/
The theme is a custom build, using wordpress plugin 'types' for posting as single.php template file.
single.php code example:
<?php get_header(); the_post(); ?>
<section id="singlepost">
<div class="loadwrapper">
<div class="titleheaderpost">
<h1 class="singletitle"><? the_title(); ?></h1>
<p class="back">< back to News</p>
</div><!-- end of .titleheader -->
<div class="thenewscontent" id="thecontent">
<? the_content(); ?>
</div>
</div>
</section><!-- end of #singlepost -->
<?php get_footer(); ?>
In your css on line 757 you have positioning styled on the 'singlepost' id. you need to remove the left & top rules and the post displays correctly.
eg:
#singlepost {
position: relative;
/* left: 1200px; */
/* top: -482px; */
max-width: 960px;
overflow: hidden;
height: 100%;
margin: 0 auto;
}
Try with this code.
<?php get_header();?>
<?php while ( have_posts() ) : the_post(); ?>
<section id="singlepost">
<div class="loadwrapper">
<div class="titleheaderpost">
<h1 class="singletitle"><? the_title(); ?></h1>
<p class="back">< back to News </p>
</div><!-- end of .titleheader -->
<div class="thenewscontent" id="thecontent">
<? the_content(); ?>
</div>
</div>
</section><!-- end of #singlepost -->
<?php endwhile; // end of the loop. ?>
<?php get_footer(); ?>
Related
I'm working on my WordPress child theme and utilizing Advanced Custom Fields, but I'm having a pain displaying one of them on the front-end.
<?php if( get_field('pp-full-image') ): ?>
<? // closes main .row and .container from header & inserts full width image ?>
</div><!-- .row from header -->
</div><!-- .container from header -->
<div class="pp-sub" style="background-image: url(<?php the_field('pp-full-image'); ?>)"></div>
<!-- .pp-sub -->
<? // displays section 3 content ?>
<?php $ppsec3 = get_field('pp-section3');
if( $ppsec3 ): ?>
<div class="container">
<div class="row">
<div class="pp-sec sec3">
<h3 class="pp-title sec3"><?php echo ( $ppsec3['pp-section3-title'] ); ?></h3>
<div class="pp-txt sec3">
<?php echo ( $ppsec3['pp-section3-text'] ); ?>
</div>
</div>
</div><!-- /.pp-wrapper -->
</div>
<?php endif; ?>
<? // closes section 3 content ?>
<?php endif; ?>
<? // closes full width image and section 3 content ?>
<?php
get_footer();
I am trying to establish 2 x custom page templates for a site using Zerif Pro on Wordpress 4.7.3
I have created the template files but can't get the layout I want.
I am trying to get a full-width template where the content appears directly below the navbar.
Using inspect element I can edit the CSS to
.content-left-wrap {
padding-top: 0px;
}
And get the desired look, but I can't figure out what to change in my fullwidth.php file or where to put it.
Template Code Below:
<div class="clear"></div>
</header> <!-- / END HOME SECTION -->
<?php zerif_after_header_trigger(); ?>
<div id="content" class="site-content">
<div class="container">
<div class="content-left-wrap col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
while ( have_posts() ) :
the_post();
get_template_part( 'content', 'page-no-title' );
/* If comments are open or we have at least one comment,
load up the comment template */
if ( comments_open() || '0' != get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .content-left-wrap -->
</div><!-- .container -->
<?php
get_footer();
?>
Edit fullwidth.php Add another class to this div like this
<div class="content-left-wrap wrap-new col-md-12">
and then add css to the template css file using the new class
.wrap-new
{
.content-left-wrap {
padding-top: 0px;
}
}
I've looked this up and have found numerous similar issues - tried troubleshooting but couldn't work it out, I can't for the life of me figure out why the div is dropping below the blog post, pushing everything out. The sidebar should sit next to the blog post, i.e. 3/4 post, 1/4 sidebar. Instead the sidebar is pushed below the post. This happens to all posts regardless of images/text etc.... so it's not an image or text issue from what I gather.
http://pastestudios.com/buying-property-sydney/
<div id="pageHead">
<?php $blog_page_id = of_get_option('ttrust_blog_page'); ?>
<?php $blog_page = get_page($blog_page_id); ?>
<h1><?php echo $blog_page->post_title; ?></h1>
<?php $page_description = get_post_meta($blog_page_id, "_ttrust_page_description_value", true); ?>
<?php if ($page_description) : ?>
<p><?php echo $page_description; ?></p>
<?php endif; ?>
</div>
<div id="content" class="threeFourth clearfix">
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class(); ?>>
<h1><a href="<?php the_permalink() ?>" rel="bookmark" ><?php the_title(); ?></a></h1>
<div class="meta clearfix">
<?php $post_show_author = of_get_option('ttrust_post_show_author'); ?>
<?php $post_show_date = of_get_option('ttrust_post_show_date'); ?>
<?php $post_show_category = of_get_option('ttrust_post_show_category'); ?>
<?php $post_show_comments = of_get_option('ttrust_post_show_comments'); ?>
<?php if($post_show_author || $post_show_date || $post_show_category){ _e('Posted ', 'themetrust'); } ?>
<?php if($post_show_author) { _e('by ', 'themetrust'); the_author_posts_link(); }?>
<?php if($post_show_date) { _e('on', 'themetrust'); ?> <?php the_time( 'M j, Y' ); } ?>
<?php if($post_show_category) { _e('in', 'themetrust'); ?> <?php the_category(', '); } ?>
<?php if(($post_show_author || $post_show_date || $post_show_category) && $post_show_comments){ echo " | "; } ?>
<?php if($post_show_comments) : ?>
<?php comments_number(__('No Comments', 'themetrust'), __('One Comment', 'themetrust'), __('% Comments', 'themetrust')); ?>
<?php endif; ?>
</div>
<?php if(of_get_option('ttrust_post_show_featured_image')) : ?>
<?php if(has_post_thumbnail()) : ?>
<?php if(of_get_option('ttrust_post_featured_img_size')=="large") : ?>
<?php the_post_thumbnail('ttrust_post_thumb_big', array('class' => 'postThumb', 'alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?>
<?php else: ?>
<?php the_post_thumbnail('ttrust_post_thumb_small', array('class' => 'postThumb alignleft', 'alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="pagination clearfix">Pages: ', 'after' => '</div>' ) ); ?>
</div>
<?php comments_template('', true); ?>
<?php endwhile; ?>
</div>
<?php get_sidebar(); ?>
First, set box-sizing: border-box
Next, make #content and #sidebar equal to 100% width. Right now you have #content set at 100% and #sidebar set in pixels so, naturally, it will push your sidebar down.
Try something like:
* { box-sizing: border-box; }
#content {
width: 65%;
}
#sidebar {
width: 35%;
}
Your article area is 100% wide. So there is no space for sidebar. Try to adjust width and margins to make total 100. Something like following code.
#content {
width: 70%;
float: left;
margin-left: 3%;
}
#sidebar {
width: 22%;
float: right;
margin-right: 3%;
}
Your image at Blog page does not adjust with browser width. See it in smaller screen size. To make it adjustable and remove horizontal scrollbar at smaller resolutions, use following CSS code.
#content .alignleft,
#content img.alignleft {
max-width: 100%;
}
It looked like you may have been working on it while I had a look at it. At the time I was able to change width: 100%; to width: 720px; in your #content id and it seemed to work in getting the sidebar vertically aligned to top, side by side with your content area.
I also noticed you had multiple ids of the same name, #content in particular. Might want to clean up the css so you can look at it more clearly if you have any more problems. Happens to me all the time when I'm chasing a problem, my css gets out of control and I lose track of the changes I made to try and correct the problems.
I have a wordpress page with a login widget <div id='widget-sidebar' class='widgets_on_page'> above the forum content. I would like to float it to the right and have the forum title to align vertically on the left, like this:
The problem I am having is that the forum title is generated dynamically and so I can't place them in the same div.
Any ideas?
Here is the source code:
<div id="primary">
<div id="content" role="main">
<div id='widget-sidebar' class='widgets_on_page'>
<ul><li id="wp_sidebarlogin-2" class="widget widget_wp_sidebarlogin"><h2 class="widgettitle">Welcome Admin</h2><div class="avatar_container"><img src="http://localhost/wordpress/wp-content/plugins/user-avatar/user-avatar-pic.php?src=http://localhost/wordpress/wp-content/uploads/avatars/1/1344255249-bpfull.jpg&w=38&id=1&random=1344255249" alt="" class=" avatar avatar-38 photo user-1-avatar" width="38" height="38" /></div><ul class="pagenav"><li class="page_item">Dashboard</li><li class="page_item">Profile</li><li class="page_item">Logout</li></ul></li></ul>
</div><!-- widgets_on_page -->
<article id="post-2901" class="post-2901 forum type-forum status-publish hentry">
<header class="entry-header">
<h1 class="entry-title">NA Forum</h1>
</header><!-- .entry-header -->
Here is the part of my forum page template that I'm working with:
<div id="primary">
<div id="content" role="main">
<?php widgets_on_template("widget-sidebar"); ?>
<?php if ( have_posts() ) : ?>
<?php twentyeleven_content_nav( 'nav-above' ); ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<?php twentyeleven_content_nav( 'nav-below' ); ?>
Using absolute positioning for the widget should work. Something like:
div#content {
position: relative;
}
div#widget-sidebar {
position: absolute;
top: 10px;
right: 10px;
}
If you don't care for IE7 you can align container vertically using display: table-cell;. As this is rendered as a table, it looses the ability to float. So you have to set a width explicitly on at least one of the elements.
CSS
div {
display: table-cell;
vertical-align: middle;
}
div:first-child {
width: 80%;
}
HTML
<div>
first line<br>
second line<br>
last line
</div>
<div>
just one line<br>
</div>
Fiddle
http://jsfiddle.net/y96hb/
the site is http://www.christopherwaller.com/wordpress/
if you take a look on the above site i'm trying to insert a link to a page on each of the images on a carousel, so if you click anywhere on the image it will navigate to a new page. I have created the link i want on the post title text (ie. Look 1, Look 2 etc . . .) by using
<h2 class="postitle"><?php the_title(); ?></h2>
but i can't for the life of me find the right PHP to create the same links on each of the carousel photos?
I'm still trying to get to grips with PHP if anyone could advise that would be great.thanks
this is the PHP
<div class="edit"><?php edit_post_link(); ?></div>
</div>
<div class="postcontent">
<?php
$content = $post->post_content;
$searchimages = '~<img [^>]* />~';
preg_match_all( $searchimages, $content, $pics );
$iNumberOfPics = count($pics[0]);
if ( $iNumberOfPics > 0 ) { ?>
<?php the_thumb('medium'); ?>
<?php } else { ?>
<div class="imgframe"></div>
<?php } ?>
<div class="post_content">
<h2 class="postitle"><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php wp_link_pages('<p class="pages"><strong>'.__('Pages:').'</strong> ', '</p>', 'number'); ?>
<div class="post_meta">
<div class="author"><?php the_author(); ?></div>
<div class="date_meta"><?php the_date(); ?></div>
<div class="category_meta"><?php the_category(', '); ?></div>
</div>
</div>
</div>
<div class="postbg_bottom"></div>
<div class="social_links">
<a class="read" title="Read the rest of this post" href="<?php the_permalink(); ?>">read more</a>
</div>
</div>
<?php endwhile ?>
<div class="navigation">
<div class="nxt_page"><?php previous_posts_link('New Entries »', 0); ?></div>
<div class="prv_page"><?php next_posts_link('« Old Entries', '0') ?></div>
</div>
<?php endif ?>
</div>
</div>
<!--CONTENT END-->
and the CSS
/* Easy Slider */
#slider ul, #slider li{margin:0;padding:0;list-style:none;}
#slider li, #slider2 li{ width:1000px;height:1100px;}
#nextBtn{display:block; width:13px; height:14px; position:relative; left:0px; top:0px; z- index:1000; right:120px; top:-718px; float:left; left:840px; margin-right:20px; }
#prevBtn{display:block; width:13px; height:14px; position:relative; left:300px; top:0px; z-index:1000; right:120px; top:-718px; float:left; left:-100px; margin-right:20px; }
#prevBtn{ left:-20px;}
#nextBtn a, #prevBtn a{ display:block;position:relative;width:13px;height:14px;
background:url(images/sl_left.png) no-repeat 0 0;}
#nextBtn a{ background:url(images/sl_right.png) no-repeat 0 0;}
.graphic, #prevBtn, #nextBtn{padding:0; display:block; overflow:hidden; text-indent:-8000px;}
/* Easy Slider END */
/*SLIDER END*/
You could try using the following instead of "the_thumb();"
add the following to your theme's 'functions.php'
// Add post thumbnail theme support
add_theme_support('post-thumbnails');
Then use the following to replace the 'the_thumb();'
if ( has_post_thumbnail() )
the_post_thumbnail();
I actually use this myself and created a plugin that links the post thumbnail to the post. It seems like you're trying to do the same kind of thing so I hope this works for you.
I understand you are using the PostThumb revisited plugin, correct? And if I read correctly, this plugin outputs a single picture with the_excerpt() . If that is the case, couldn't you just do this? :
<a href="<?php the_permalink();?>">
<?php the_excerpt(); ?>
</a>