Truncated custom field with "read more" link to full value WordPress
Hi all, I am looking forward to responses to my first inquiry! My question is this...
I am working on a photographer's website. The left-hand sidebar will contain projects statements that he is entering as a custom field with the name "project_statement." Everything is working fine so far, however some of the statements are quite long- several paragraphs- and do not fit in the space allotted. I would like to force a "read more" link if the statement exceeds x amount of words. The link will then lead to the full statement which can open up in a separate tab, window, pop-up, anything really.
I have been successful up to forcing the more tag, but I don't know what the URL is for the entire statement, or if there even is one. Any help would be greatly appreciated. My code is as follows:
<?php echo custom_field_excerpt('project_statement'); ?>
And in my functions:
function custom_field_excerpt() {
global $post;
$text = get_field('project_statement');
if ( '' != $text ) {
$text = strip_shortcodes( $text );
$text = apply_filters('the_content', $text);
$text = str_replace(']]>', ']]>>', $text);
$excerpt_length = 20; // 20 words
$excerpt_more = '<a href="'. get_field() . '"> Read More...</a>';
$text = wp_trim_words( $text, $excerpt_length, $excerpt_more );
}
return apply_filters('the_excerpt', $text);
}
Answers (4)
Arnav Joy answers:
you can open text in fancybox
http://fancybox.net/howto/
Arnav Joy comments:
you can also use tooltip
http://wordpress.org/extend/plugins/wp-tooltip/
http://wordpress.org/extend/plugins/easy-tooltip/
then you can enable shortcode in custom field using following code
<?php echo apply_filters('the_content', get_post_meta($post->ID, 'your_custom_field_here', true)); ?>
Hai Bui answers:
I don't think there is a good method to do it for custom fields. The best solution is using pages instead of custom fields, you can apply the length filter to the page content, if it is too long, show the "read more" link and link it to the full page.
I can help you implementing it if you need.
Hai Bui comments:
Please install FancyBox for WordPress http://wordpress.org/extend/plugins/fancybox-for-wordpress/ and replace your function with this:
function custom_field_excerpt($field) {
global $post;
$text = get_field($field);
if ( '' != $text ) {
$text = strip_shortcodes( $text );
$text = apply_filters('the_content', $text);
$text = str_replace(']]>', ']]>>', $text);
$excerpt_length = 20; // 20 words
$excerpt_more = '<a href="#fancybox_'.$field.'" class="fancybox"> Read More...</a><div id="fancybox_'.$field.'" style="display:none">'.$text.'</div>';
$text = wp_trim_words( $text, $excerpt_length, $excerpt_more );
}
return apply_filters('the_excerpt', $text);
}
Hai Bui comments:
Have you tried my code? It's for displaying the full text in fancybox.
Hai Bui comments:
Have you tried my code? I'm trying to help and you don't even reply...
Martin Pham answers:
using target="_var" for open new window, new tab ...
$excerpt_more = '<a <strong>target="_var"</strong> href="'. get_field() . '"> Read More...</a>';
View more: [[LINK href="http://www.w3schools.com/TAgs/att_a_target.asp"]]http://www.w3schools.com/TAgs/att_a_target.asp[[/LINK]]
Example: <em>Opens the linked document in a new window or tab</em>
function custom_field_excerpt() {
global $post;
$text = get_field('project_statement');
if ( '' != $text ) {
$text = strip_shortcodes( $text );
$text = apply_filters('the_content', $text);
$text = str_replace(']]>', ']]>>', $text);
$excerpt_length = 20; // 20 words
$excerpt_more = '<a target="_blank" href="'. get_field() . '"> Read More...</a>';
$text = wp_trim_words( $text, $excerpt_length, $excerpt_more );
}
return apply_filters('the_excerpt', $text);
}
Adam comments:
Firstly, thank you for the prompt response(s)! It seems like it could be a matter of using Arnav Joy's suggestion of fancybox to display the statement as a popup. This is no-doubt helpful but my question is more specifically how to link to the custom field information. As of now, my code:
excerpt_more = '<a href="'. get_field() . '"> Read More...</a>';
specifically, the get_field() function, leads to an error page, presumably because the custom field does not have a unique URL? I understand, Hai Bui, this is why you suggested the page option. But I want to make it as foolproof for the client—ie. being able to enter all of his info/publish at one fell swoop. Perhaps I am misunderstanding how custom fields actually function?
@Hai Bui: maybe I am underestimating the ease of your solution?
Thanks in advance for any additional help.
Martin Pham comments:
please try get_permalink($id);
Codex: [[LINK href="http://codex.wordpress.org/Function_Reference/get_permalink"]]http://codex.wordpress.org/Function_Reference/get_permalink[[/LINK]]
function ...() {
global $post;
....
$excerpt_more = '<a href="'. get_permalink($post->ID) . '"> Read More...</a>';
....
}
Albert Shala answers:
You must be using advanced custom fields plugin or pods, right?
Adam comments:
Yes, I am using advanced custom fields...although, I tried to perform the same action with the WP standard custom fields and the issue is the same.
@Martin...thanks for the suggestion, but it did not work. Is that not for posts/pages anyway? That seems to be the issue here, so far as I can tell. There is no permalink for custom fields, no? get_permalink simply returns the URL for whatever post I am applying the (advanced) custom field to.
Sorry to belabor the issue, but I am afraid the mechanics of this are out of my expertise. Any other suggestions gladly welcome.
Albert Shala comments:
Have you checked this: http://www.advancedcustomfields.com/docs/functions/get_field/
global $post;
$id = $post->ID;
$excerpt_more = '<a href="'. get_field($id); . '"> Read More...</a>';
Adam comments:
Thanks @Albert. That seems like the most intuitive and sensible (potential) solution and was along the lines of what I was thinking. Unfortunately, adding
$excerpt_more = '<a href="'. get_field('project_statement') . '"> Read More...</a>';
seems to break the site (I omitted the semi-colon in your code). I have before and after shots attached. One is using my old code, the other is using the code pasted above. What a quandry! Still trying to sort all this out... :(