I don't understand why my text is on a single line instead of wrapping inside the container.
My theme is based on foundation 5 and I didn't write any css line for my texts. That's the code I wrote now:
<?php
/*
Template Name: Blog Page
*/
get_header();
?>
<?php
$args = array('post_per_page' => 10);
$posts = get_posts( $args );
?>
<div class="row">
<div class="small-12 medium-3 columns">
<?php dynamic_sidebar( 'left-blog-sidebar' ); ?>
</div>
<div class="small-12 medium-6 columns">
<?php
foreach($posts as $post):
setup_postdata( $post ); ?>
<article post-id="<?php the_ID(); ?>">
<h3><?php the_title(); ?></h3>
<hr />
<p><?php the_excerpt(); ?></p>
</article>
<?php
endforeach;
wp_reset_postdata();
?>
</div>
<div class="small-12 medium-3 columns">
<?php dynamic_sidebar( 'right-blog-sidebar' ); ?>
</div>
</div>
<div class="row">
<?php
get_footer();
?>
</div>
link to page: tinyurl.com/ttttt6577
Any ideas? Thanks a lot.
Not sure what is wrong but I have copied your content in notepad file once. Then I have copied the same from notepad file and added the same in your site using developer console and it works fine, Text is wrapped correctly then after.
I would suggest to do the same with your database content as well.
I think you must consider this idea.
1.) Be sure that the parent element has a width lesser than the window screen width.
2.) Be sure that the text you have added in not continous, I mean the words are separated with space.
Try:
text-wrap: normal; or
white-space: normal; or
word-break: break-all;
on the parent div or inner paragraph.
Please add the below code to your themes css file.
article p {
word-break: break-all !important;
}
Related
I am trying to make tags visible on WordPress posts, just below the content.
My original code (just the end part):
<div class="clearfix"></div>
<div class="entry">
<?php the_content(); ?>
<p style="text-align : center; font-size : 13px;">Views presented in the article are those of the author and not of ED.</p>
</div>
<div class="clearfix"></div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
My modified code:
<div class="clearfix"></div>
<div class="entry">
<?php the_content(); ?>
<p>
<?php $posttags=get_the_tags(); if ($posttags) { foreach($posttags as $tag) { echo $tag->name . ' '; } } ?>
</p>
<p style="text-align : center; font-size : 13px;">Views presented in the article are those of the author and not of ED.</p>
</div>
<div class="clearfix"></div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
What I intended to do:
Make tags appear below the content.
What happened:
The tags never show up. (Even after emptying the cache; even when they do , they just come out wrong - that's another issue.)
The footer shifts to the sidebar.
How do I avoid the footer from getting into the sidebar?
You have an error in your syntax
$posttags=g et_the_tags();
Should be
$posttags = get_the_tags();
Notice the space in "get_the_tags();"
I'm trying to use CSS multicolumn to create a masonry layout for the blog index page of a WordPress website I'm building, and I'm having some issues with it. I'm using Bones as the starter theme.
I adjusted the loop in the home.php file to create the masonry effect:
<?php get_header(); ?>
<div id="content">
<div id="inner-content" class="wrap cf">
<main id="main" class="m-all t-2of3 d-5of7 cf" role="main" itemscope itemprop="mainContentOfPage" itemtype="http://schema.org/Blog">
<div class="masonry-container">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="masonry-item">
<article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article">
<a href="<?php the_permalink(); ?>">
<section class="entry-content cf">
<h1 class="h2 entry-title"><?php the_title(); ?></h1>
<?php if ( has_post_thumbnail() ) : ?>
<div class="masonry-thumbnail">
<?php the_post_thumbnail('masonry-thumb'); ?>
<span class="caption"><span><?php the_title(); ?></span></span></a>
<?php endif; ?>
</div><!--.masonry-thumbnail-->
</div> <!--.masonry-item-->
<div class="masonry-post-excerpt">
<?php the_excerpt(); ?>
</div><!--.masonry-post-excerpt-->
<div class="blog-index-content"><?php the_content(); ?></div></a>
</section>
</article>
<?php endwhile; ?>
<?php bones_page_navi(); ?>
<?php else : ?>
<article id="post-not-found" class="hentry cf">
<header class="article-header">
<h1><?php _e( 'Oops, Post Not Found!', 'bonestheme' ); ?></h1>
</header>
<section class="entry-content">
<p><?php _e( 'Uh Oh. Something is missing. Try double checking things.', 'bonestheme' ); ?></p>
</section>
<footer class="article-footer">
<p><?php _e( 'This is the error message in the index.php template.', 'bonestheme' ); ?></p>
</footer>
</article>
<?php endif; ?>
</div> <!--.masonry-container-->
</main>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
I'm trying to get the image to fill the entire .masonry-item div with the post thumbnail (featured image), and right now, the .masonry-item div is larger that the post thumbnail.
There's also an empty <a> tag that appears under the image and I can't figure out where it's coming from.
I'm also trying to get the post title to appear over the thumbnail image once it, and I haven't figured out how to get it to work.
Here's a link to my test site: http://tippingpointphoto.flywheelsites.com/blog/
Any help would be much appreciated!
Inside your .masonry-thumbnail div there is a <a> link, this is the empty tag. Give it a class name and assign it these style properties:
.link { // for example if you called it link
display:block; // this will wrap it around the image
position:relative; // to position the caption
}
Now update your .caption class and add:
position:absolute;
top:auto;
bottom:0; // to text will start from the bottom of the image
z-index:1; // to position the text above the image
And when i looked at your site the image width appeared to match the div width so I'm assuming you managed to fix that problem? If not change it's css so that width is set to 100%.
Okay, I am having the most bizarre issue ever. I have a custom home page template for a WordPress site I am working on.
You can see a screenshot of how I have my ACF fields for this template setup on the backend here.
The issue I am having is that when I try to display the field
<img src="<?php the_field('slide_1_thumb'); ?>" alt="" />
the image doesn't show up at all. I have the Return Value set to 'Image URL', and the odd thing is that it shows the images for
<?php the_field('slide_1'); ?>
just fine with no issues at all.
I'm not sure what I am doing wrong here, but there are no spelling errors at all, for some reason those slide_1_thumb images won't show up. I want to think this is one of those Occam's Razor type of situations where I missed something so simple, but I've gone over this a million times with no luck.
Below you will find a copy of the PHP code for my home-page.php template.
<?php
/**
* Template Name: Home Page
*
* A custom template for the home page.
*
* The "Template Name:" bit above allows this to be selectable
* from a dropdown menu on the edit page screen.
*/
get_header(); ?>
<div id="slideshow-container">
<div id="slideshow" class="slideshow pcfcu-theme">
<div class="slideshow-img" style="background-image: url(<?php the_field('slide_1'); ?>);">
<div class="slideshow-img-inner">
<div class="slideshow-img-text">
<h1><?php the_field('slide_1_title'); ?></h1>
<p><?php the_field('slide_1_description'); ?></p>
</div>
</div>
</div>
<div class="slideshow-img" style="background-image: url(<?php the_field('slide_2'); ?>);">
<div class="slideshow-img-inner">
<div class="slideshow-img-text">
<h1><?php the_field('slide_2_title'); ?></h1>
<p><?php the_field('slide_2_description'); ?></p>
</div>
</div>
</div>
<div class="slideshow-img" style="background-image: url(<?php the_field('slide_3'); ?>);">
<div class="slideshow-img-inner">
<div class="slideshow-img-text">
<h1><?php the_field('slide_3_title'); ?></h1>
<p><?php the_field('slide_3_description'); ?></p>
</div>
</div>
</div>
</div>
</div>
<div id="content-container">
<div id="content-container-inner">
<div id="recent-blog-entries-container">
<div id="recent-blog-entries">
<header><h1>Recent Blog Entries</h1></header>
<?php $postslist = get_posts('numberposts=2&order=DESC&orderby=date');
foreach ($postslist as $post) : setup_postdata($post);
?>
<h2 class="rbe-title"><?php the_title(); ?></h2>
<p class="rbe-posted-on">Posted on: <?php the_time(get_option('date_format')) ?></p>
<div class="rbe-excerpt"><?php the_excerpt(); ?></div>
<?php endforeach; ?>
</div>
</div>
<div id="features">
<header><h1>Features</h1></header>
<a class="goTo1"><div class="feature-thumb"><img src="<?php the_field('slide_1_thumb'); ?>" alt="" /></div></a>
<a class="goTo2"><div class="feature-thumb"><img src="<?php the_field('slide_2_thumb'); ?>" alt="" /></div></a>
<a class="goTo3"><div class="feature-thumb"><img src="<?php the_field('slide_3_thumb'); ?>" alt="" /></div></a>
</div>
</div>
</div>
<?php get_footer(); ?>
Another strange thing is that if you take one of the working ACF images such as
<?php the_field('slide_1'); ?>
it works perfectly and outputs the image, but when you move it down to the 'Features' section of the code to see if it will work in place of one of those small feature thumbnails, it won't work in that portion of the code. It's almost as if that bottom 'Features' portion of the page has some sort of error, but I don't see any errors at all in my code.
In other words, ALL of this code works perfect up until the very last portion of it with the 'feature' thumbnail images. You can see this live on the website here.
When making a new loop using get_posts(), you should end it with the wp_reset_postdata() function to reset your loop's data back to what it was before the get_posts(). So try this:
<div id="recent-blog-entries">
<header><h1>Recent Blog Entries</h1></header>
<?php $postslist = get_posts('numberposts=2&order=DESC&orderby=date');
foreach ($postslist as $post) : setup_postdata($post); ?>
<h2 class="rbe-title"><?php the_title(); ?></h2>
<p class="rbe-posted-on">Posted on: <?php the_time(get_option('date_format')) ?></p>
<div class="rbe-excerpt"><?php the_excerpt(); ?></div>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</div>
Adding the wp_reset_postdata() after your loop should fix this for you.
Okay, I have NO idea what was going on, but all I had to do to fix this was delete the ACF fields on the backend and then recreate them with the EXACT same names as before. Sure enough that fixed it.
So, while I don't have a conclusive answer as to why this was happening, all I can say is that it must have been some sort of odd glitch.
I have different categories where the post displayed are characterized by different elements, for this reason when I use the search in wordpress the results are not shown very well.
For this reason I would like to change the appearance of the post shown in the search results based on its category.
Example:
My search.php template look like this:
<?php get_header(); ?>
<div id="content">
<div class="padder">
<?php do_action( 'bp_before_blog_search' ); ?>
<div class="page" id="blog-search" role="main">
<?php if (have_posts()) : ?>
<?php bp_dtheme_content_nav( 'nav-above' ); ?>
<?php while (have_posts()) : the_post(); ?>
<?php do_action( 'bp_before_blog_post' ); ?>
<div class="blog-post">
// Here is displayed the blog post style and features
</div><!--blog-post-->
<div class="clear"> </div>
<?php do_action( 'bp_after_blog_post' ); ?>
<?php endwhile; ?>
<?php bp_dtheme_content_nav( 'nav-below' ); ?>
<?php else : ?>
<h2 class="center"><?php _e( 'No posts found. Try a different search?', 'OneCommunity' ); ?></h2>
<?php endif; ?>
<div style="display:inline">
<center><?php wp_pagenavi(); ?></center>
</div>
</div>
<?php do_action( 'bp_after_blog_search' ); ?>
</div><!-- .padder -->
</div><!-- #content -->
<div id="sidebar">
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar-blog')) : ?><?php endif; ?>
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar-ad-blog')) : ?><?php endif; ?>
</div><!--sidebar ends-->
<?php get_footer(); ?>
I tried to achieve the result of displaying based on the post category a different "template" for the post but without success.
I asked the same question on wordpress.stackexchange.com but without success, and there I pointed out a non working solution, hope it can help you in developing the code I need.
https://wordpress.stackexchange.com/questions/141856/different-layout-on-search-page-depending-on-category-post
Thank you very much for any help you will give, and excuse me for my english.
If I understand your question correctly, you could simply use the post_class() function:
<div <?php post_class( 'blog-post' );?> >
// Here is displayed the blog post style and features
</div><!--blog-post-->
This will render like:
<div class="post-3654 post type-post status-publish format-standard hentry category-buildings blog-post">
// Here is displayed the blog post style and features
</div><!--blog-post-->
for posts in the buildings category.
Then your CSS will take care of the rest:
.post.category-buildings {
border: 3px solid red;
}
But I think your setup/idea is only suitable for single category posts.
Ref: From the Codex:
The post_class may include one or more of the following values for the
class attribute, dependent upon the pageview.
.post-id
.post
.attachment
.sticky
.hentry (hAtom microformat pages)
.category-ID
.category-name
.tag-name
.format-name
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>