EDIT:
I have a custom php function setup to show the wordpress post excerpt and when the read more link is clicked the excerpt is hidden and the main content displayed. However i want the read more button to become a hide button for when the content is expanded.
<?php the_excerpt();
echo '<a value="show more..." onclick="$(this).prev().hide(); $(this).next().show();" >Read More</a>';
echo '<div style="display:none">';
echo the_content();
echo '</div>'; ?>
to keep it simple, you can do something like this:
<div id="shortcontent">
<?php the_excerpt(); ?>
Read more
</div>
<div id="fullcontent" style="display: none">
<?php the_content(); ?>
Hide
</div>
Related
Hi i am new to WordPress Development. I have created a custom post type of "projects", where projects list are shown. i want to put a button "Back to Projects" in its single page (single-project.php), that will redirect back to its listing page. How can i do that? look at the last line in code. please help.
if ($query->have_posts() ):
while ($query->have_posts() ):
$query->the_post();
?>
<div class="related-project-single">
<?php the_post_thumbnail('image_size_720_680'); ?>
<div class="wrapper-button">
<a class="bp-button bp-button-plain button-yellow btn-slider" href="<?php the_permalink(); ?>"><?php echo esc_html__('view project','inspiry') ?> <i class="fa fa-chevron-right"></i></a>
</div>
<div class="wrapper-location">
<h3><?php the_title(); ?></h3>
<?php
$feature_location_related = get_post_meta(get_the_ID(),'bp-location',true);
if(!empty($feature_location_related)){
?>
<p class="featured-location"><?php echo esc_html($feature_location_related);?></p>
<?php
}
?>
</div>
</div>
<?php
endwhile;endif;?>
Back to projects
you've tried something link this?
Back to projects
Try this, it should work
Back to projects
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));
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.
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')