here is what I want to do:
I have a blog post which I want to display only to a specific point. So in the post I put
<!--more-->
on the right position.
My content.php looks like this:
<div class="entry-content">
<?php the_content('read more'); ?>
</div><!-- .entry-content -->
<footer class="entry-footer">
<?php mytheme_entry_footer(); ?>
</footer><!-- .entry-footer -->
The "read more" link gets displayed right after the content where it should be. But how can I display it inside the entry footer with the "Comment" link?
Is there a solution with the excerpt?
<?php the_excerpt(); ?>
I think this would even be better because I wouldnt need to put the line in every post.
You can remove the 'read more' by using the following filter in your functions.php:
add_filter( 'the_content_more_link', 'remove_more_link', 10, 2 );
function remove_more_link( $more_link, $more_link_text ) {
return;
}
Now you can create your own read more link inside entry-footer:
<footer class="entry-footer">
<a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>">Read more</a>
<?php mytheme_entry_footer(); ?>
</footer><!-- .entry-footer -->
Edit:
In comments below the following question was asked:
I used the_excerpt() instead of the_content(). Is it possible to only display the link if the post is actually too long?
You can do this by checking if the excerpt is different from the content. If this is the case (so there is more content than the excerpt is showing) you can show the read more link:
<?php if ( get_the_content() != get_the_excerpt() ){ ?>
<a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>">Read more</a>
<?php } ?>
I use one workaround:
//REMOVE 'MORE' LINK AND HARDCODE IT INTO PAGE - TEASER JUST PLAIN ELLIPSIS
function modify_read_more_link() {
if ( is_front_page() ) {
return '...';
} else {
return '</div><footer class="clearfix"><a class="mg-read-more" href="' . get_permalink() . '">Continue Reading <i class="fa fa-long-arrow-right"></i></a>';
}
}
add_filter( 'the_content_more_link', 'modify_read_more_link' );
Explanation: for front page I have a short overview only clickable in the post title. And for blog list (after else in the above function.php ):
<article>
<header></header>
<div>
<?php the_content(); ?>
</footer>
</article>
In which you can notice missing div closing and footer opening tags. It is a bit messi, but it brings the original Wordpress Teaser into next division.
Thankyou for reading.
Related
I'm creating a portfolio page using "WordPress posts" (this is so it spits out single.php pages nicely for me) using PHP and ACF. I'm trying to find a way to put each "category" in its own div. This would allow me to style the layout of the content within each filter. Please see the example below. Maybe I should be doing this a different way?
• Filter 1 - 1 column layout
• Filter 2 - 3 column layout
example of filter 1
example of filter 2
TLDR: Trying to put the content of each WordPress category in its own div.
<div class="work">
<?php if (has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>" class="blogimage">
<?php the_post_thumbnail( 'medium' ); ?>
</a>
<?php endif; ?>
<div class="work-copy">
<div class="category">
<?php echo get_the_category_list(); // Display categories as links within ul ?>
</div>
<h2 class="headline">
<?php the_title(); ?><i class="fal fa-chevron-right"></i>
</h2>
</div>
</div>
<?php endwhile; ?>
WordPress automatically adds CSS classes to different elements throughout your website. These include both the body class and the post class.
For example, if you view a category archive page and then use the Inspect Tool, you will notice category and category-name CSS classes in the body tag.
Category class added to body element by WordPress
You can use this CSS class to style each individual category differently by adding custom CSS.
You can find more details here
Quite a simple fix after doing some research, here is the answer I found useful;
<?php $category = get_the_category(); ?>
<div class="category-<?php echo $category[0]->slug ?>">
Place this within each post. In order to style each div class individually, you need to place a containing div in between the if / while statement. Then you'll the place content of each "category filter" with the div.
<?php if ( have_posts() ) : // Do we have any posts in the database that match our query? ?>
<div class="work-container">
<?php while (have_posts()) : the_post(); ?> <!-- Finds the post -->
<?php $category = get_the_category(); ?>
<div class="category-<?php echo $category[0]->slug ?>"> <!-- This calls out the Category in the WP Post -->
<div class="work-group">
<?php if (has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>" class="blogimage">
<?php the_post_thumbnail( 'medium' ); ?>
</a>
<?php endif; ?>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
This was answered here and with a bit of playing I got it to work, Hope this helps someone! Get the name of the first category
I'm making a custom WordPress site for a client in which I would like to implement Infinite Scrolling to my archive and category templates.
I'm using the following to achieve that:
HTML5Blank WordPress Framework
Jetpack WordPress Plugin
Bootstrap 3
I've read several posts and tutorials over the Internet explaining how to implement that functionality, everything seems super straightforward but for any reason I'm not being able to make it to work.
The plugin is activated, and also activated the Infinite Scroll module of it.
I'm following the instructions as written here: http://ottopress.com/2012/jetpack-and-the-infinite-scroll/
I have the following piece of code in my category.php (where I'm making all of my tests), please note that everything is wrapped in a div with the id "content":
<div id="content">
<?php if ( have_posts() ) : ?>
<?php
// Start the Loop.
while ( have_posts() ) : the_post();
get_template_part( 'content', 'category' );
// End the loop.
endwhile;
// If no content, include the "No posts found" template.
else :
get_template_part( 'content', 'none' );
endif;
?>
</div>
Then I created a content-category.php file where I have my actual posts markup (nothing out of this world here):
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-6">
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<div class="thumb">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<div class="icono-redondo-negro">
<?php
$format = get_post_format();
if ( false === $format ) :
?>
<i class="fa fa-file-text"></i>
<?php endif; ?>
<?php if ( has_post_format( 'gallery' )) : ?>
<i class="fa fa-picture-o"></i>
<?php elseif ( has_post_format( 'video' )) : ?>
<i class="fa fa-video-camera"></i>
<?php elseif ( has_post_format( 'audio' )) : ?>
<i class="fa fa-headphones"></i>
<?php endif; ?>
</div>
<?php the_post_thumbnail('categoria-thumb'); ?>
<span class="plus">+</span>
</a>
</div>
<?php endif; ?>
<!-- /post thumbnail -->
</div>
<div class="col-xs-12 col-sm-6">
<p class="fecha"><?php the_time('j \d\e\ F, Y'); ?> | <?php the_time('g:i a'); ?></p>
<!-- post title -->
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<h1 class="titulo"><?php the_title(); ?></h1>
</a>
<!-- /post title -->
<!-- post excerpt -->
<p><?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?></p>
<!-- /post excerpt -->
<?php edit_post_link(); ?>
</div>
</div>
<!-- /row -->
</article>
Everything shows ok in the frontend, the tricky part comes next, when I actually add the Infinite Scrolling support to my theme via functions.php:
function raramuri_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'content',
'type' => 'click',
'footer' => false,
));
}
add_action('init', 'raramuri_infinite_scroll_init');
I have tried several things such as:
Adding the 'render' parameter, and trying to load the template part
get_template_part( 'content', 'category' );
Using both "click" and "scroll" in the 'type' parameter
Adding the Infinite Scroll support via a custom function (just the
way I did above) and also by just adding add_theme_support in the
functions block of my functions.php
Tried pretty much every custom parameter of the Infinite Scroll
function (trial and error)
By this point nothing have worked, I don't see a "loading gif icon" when scrolling down nor a "Show more posts" button when using the click version.
I think it may be some incompatibility with HTML5Blank or I'm not implementing the infinite scroll support the right way.
I would like to have the "Show more posts" button so that the users could load more most as they wish.
Am I missing something? Thanks in advance for your help!
So I have this custom widget where you can select a page from a drop box and the widget will lead you to this page. The problem is i have no idea how to display the page's attachment image.
wp_get_attachment_image($page, 'full') doesn't work. In the codex there's an example with a loop, but here I need just that one image.
// This is where you run the code and display the output
$page = $instance['selected']; ?>
<a href="<?= get_the_permalink($page); ?>">
<?php wp_get_attachment_image( $page, 'full' ); ?>
<article>
<h2><?php echo $title; ?></h2>
<h3><?php echo $instance['content']; ?></h3>
</article>
<div class="readmore">Read more</div>
</a>
<?php
echo $args['after_widget'];
}
Okay, I found the solution to my problem
echo get_the_post_thumbnail($page,array(540,260));
So I've been trying to figure this out for a while now, and I'm guessing some advanced filters and stuff are involved, but here goes. How can I make the "read more" button that I coded into the content loop in my Wordpress blog display:none when I'm using the < !--more--> tag manually?
When I'm using it now, both "read more" buttons are visible.
<div class="entry-content">
<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php else : ?>
<h1 class="entry-title">
<?php the_title(); ?>
</h1>
<?php endif; // is_single() ?>
<div class="entry-meta">
<span><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></span>
</div>
<img class="post-icon" src="<?php echo get_template_directory_uri(); ?>/images/pencil.png">
<div class="seperator">
<div class="sepen"></div>
<div class="septo"></div>
</div>
<div class="entry-excerpt">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php the_content( __( 'read more <span class="meta-nav">→</span>', 'dsgn' ) ); ?>
<?php echo '".__( '<span>read more</span>', 'dsgn' ). '' ?>
<div class="entry-footer-fix"></div>
</div>
You are outputting two "read more" tags. Stop doing this:
<?php echo '".__( '<span>read more</span>', 'dsgn' ). '' ?>
the_content() will already output a "read more" tag. It takes your desired "read more" snippet as an argument and automatically decides whether to show either the entire post or just the first part along with your given "read more" snippet. As mentioned in the documentation, you can override the automatic behavior (force entire/partial content) by changing the global variable $more.
In other words, you should never need to echo your own "read more" tag unless you always want to it to be visible.
For my portfolio site, I would like to add anchor links to both the 'work' and 'blog' sections so that when clicked through to the next page it goes to the respective section. I noticed this is possible using jQuery from this question: WordPress pagination - Adding an Anchor link, but am unsure how this would work with two loops on the same page?
my current loops look like this, just replacing categories for each section:
<?php $paged = (get_query_var('page')) ? get_query_var('page') : 1;
$args=array('category_name'=>'portfolio','posts_per_page'=>4,'paged'=>$paged);
query_posts($args);
if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="blog-post">
<div class="thumbnail">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
<a class="details" href="<?php the_permalink(); ?>">
<h6><?php echo get_the_excerpt(); ?></h6>
</a><!-- DETAILS -->
</div><!-- THUMBNAIL -->
<div class="aside">
<h4><?php the_title(); ?></h4>
</div><!-- ASIDE -->
</div><!-- BLOG - POST -->
<?php endwhile; ?>
<div class="navigation">
<h3><?php posts_nav_link('∞','« Newer Posts','Older Posts »'); ?></h3>
</div><!-- PAGED-NAVIGATION -->
<?php wp_reset_query(); ?>
Ah I see what you mean; actually you are better off using wordpresses $args for the paginate_links() function. You can see it here: http://codex.wordpress.org/Function_Reference/paginate_links .
The one you want to change is 'format'=>'?page=%#%', (which is the page number) and changing it to something like 'format' => '?page=%#%#work', and 'format' => '?page=%#%#blog',
So you can do:
echo paginate_links(array('format' => '?page=%#%#work')); which should make clicking the link jump back down to the work anchor.
The problem is, you will still have a page jump if the user isn't scrolled exactly to the position of the anchor link. You are best to implement an Ajax solution so there is no reload of the page at all. Here is a good tutorial to get you started: http://wp.tutsplus.com/articles/getting-started-with-ajax-wordpress-pagination/
Where you have your first <div class="navigation">
Add an id="work" and to the second id="blog"
so you would have
<div class="navigation" id="work">
</div>
<div class="navigation" id="blog">
</div>
Somewhere on your page.
Then you need a small modification to the jquery from the question you referred to to make the correct anchor link:
<script type="text/javascript">
$(document).ready(function() {
$('.pagenavi a').each(function(i,a){
$(a).attr('href',$(a).attr('href')+'#'+a.parents('.navigation').attr('id'));
//$(a).attr('href',$(a).attr('href')+'#blog') <-- instead of this
});
});
</script>
The parents('.navigation').attr('id') tells jquery to move up the dom intil it finds the navigition tag, and just grab it's ID to use as the text for the achor text
If you already have the ids blog and work on the page, you could use rel="work" instead and then you would in the jquery use attr('rel')