Here's the page in question: http://www.affordableonlinedegrees.net/blog/
I can style the links just fine—that's not my issue. It’s the text and double-angle quotes I’d like to be able to change to something custom.
In genesis/lib/structure/post.php there’s the below function. How do I edit this properly as a child theme file?
And more specifically, how would I change the ascii double angle quotes ( « and » ) to something of my choice? i.e. a custom background image like an arrow?
function genesis_prev_next_posts_nav() {
$prev_link = get_previous_posts_link( apply_filters( 'genesis_prev_link_text', '«' . __( 'Previous Page', 'genesis' ) ) );
$next_link = get_next_posts_link( apply_filters( 'genesis_next_link_text', __( 'Next Page', 'genesis' ) . '»' ) );
$prev = $prev_link ? '<div class="pagination-previous alignleft">' . $prev_link . '</div>' : '';
$next = $next_link ? '<div class="pagination-next alignright">' . $next_link . '</div>' : '';
$nav = genesis_markup( array(
'html5' => '<div %s>',
'xhtml' => '<div class="navigation">',
'context' => 'archive-pagination',
'echo' => false,
) );
$nav .= $prev;
$nav .= $next;
$nav .= '</div>';
if ( $prev || $next )
echo $nav;
}
I assumed you are using version 2.0 and up. Add codes below to your child theme functions.php. I included icons to change wp default pre/nextlabel, change whatever you want.
add_action('genesis_entry_footer', 'custom_pagination_links', 15 );
function custom_pagination_links() {
if( !is_single() )
return;
previous_post_link('<span class="single-post-nav previous-post-link">%link</span>', '<i class=\'fa fa-arrow-circle-o-left\'></i> ' . get_previous_post_link('%title') , FALSE);
next_post_link('<span class="single-post-nav next-post-link">%link</span>', get_next_post_link('%title') . ' <i class=\'fa fa-arrow-circle-o-right\'></i>' , FALSE);
}
The rest job is styling, it's up to you.
best regards,
dnb
Related
I'm a designer (not a developer) working on a Wordpress site for a customer. Using the ACF-plugin I've set up a custom field on media files for photo credits. This works fine on featured images, where I can call it in single.php like this:
$post_thumbnail = get_post(get_post_thumbnail_id());
$credit = get_field('media_credit', $post_thumbnail);
if($credit):
echo '<div class="media-credit"><p>Photo: '.$credit.'</p></div>';
endif;
So I know the custom field works, and outputs the right data. However, I can't get it to work on image attachments in posts. What I have is this:
add_filter( 'img_caption_shortcode', 'my_img_caption_shortcode', 10, 3 );
function my_img_caption_shortcode( $empty, $attr, $content ){
$attr = shortcode_atts( array(
'id' => '',
'align' => 'alignnone',
'width' => '',
'caption' => ''
), $attr );
if ( 1 > (int) $attr['width'] || empty( $attr['caption'] ) ) {
return '';
}
if ( $attr['id'] ) {
$attr['id'] = 'id="' . esc_attr( $attr['id'] ) . '" ';
}
//OUTPUT CREDIT
$photographer = get_field( 'media_credit', $attachment_id );
if ($photographer):$media_byline = '<br/><span class="media-credit">Photo: '.$photographer.'</span>';endif;
return '<div ' . $attr['id']
. 'class="wp-caption ' . esc_attr( $attr['align'] ) . '" '
. do_shortcode( $content )
. '<p class="wp-caption-text">' . $attr['caption'] . '' . $media_byline . '</p>'
. '</div>';
}
If I remove the if-statement in OUTPUT it shows «Photo: » within the captions, after the text like it should, but it doesn't get any data. What am I missing?
(BTW – I know there are plugins that outputs image credits, but they tend to have styles and features I have to override, resulting in a spaghetti mess I'd hate to hand over to the next guy working on this site.)
Finally got this to work! :-D Instead of using $attachment_id, I got the ID from $attr, and then stripped the 'attachment_' prefix from output.
I also made separate fields for photographer and bureau, but I guess that's beside the point.
Here is the code:
function my_img_caption_shortcode( $empty, $attr, $content ){
$attr = shortcode_atts( array(
'id' => '',
'align' => 'alignnone',
'width' => '',
'caption' => ''
), $attr );
if ( 1 > (int) $attr['width'] || empty( $attr['caption'] ) ) {
return '';
}
$credit_id = $attr['id'];
$credit_id = str_replace( 'attachment_', '', $credit_id );
$photographer = get_field( 'media_credit', $credit_id );
$bureau_credit = get_field( 'media_bureau', $credit_id );
if ( $photographer && $bureau_credit ): $dash = ' / ';
endif;
if ( $photographer || $bureau_credit ): $media_byline = '<br/><span class="media-credit">PHOTO: '
. $photographer . ''
. $dash . '<span class="bureau-credit">'
. $bureau_credit
. '</span></span>';
endif;
return '<div id="attachment_' . $credit_id . '"'
. 'class="wp-caption ' . esc_attr( $attr['align'] ) . '" '
. do_shortcode( $content )
. '<p class="wp-caption-text">' . $attr['caption'] . '' . $media_byline . '</p>'
. '</div>';
}
add_filter( 'img_caption_shortcode', 'my_img_caption_shortcode', 10, 3 );
This solution is something I lifted from the AFC Media Credit-plugin, so credits to the developer.
I hope this is useful for anybody who wants to achieve something similar.
I have been attempting to create my own shortcode for my Wordpress theme to make life a bit easier. Unfortunately I have run into issues with my code.
Below, the code in the Javascript section is what I have placed in my functions.php file, and in the HTML section is what I have placed on my page in Wordpress as the shortcode, however nothing seems to appear?
1: JAVASCRIPT
2: HTML
function hire_equipment_func($atts) {
extract( shortcode_atts( array(
'img' => 'no-img',
'user' => 'no-user',
'text' => 'no-text',
), $atts ) );
if ( $atts['img'] == '' || $atts['user'] == '' || $atts['text'] == '' ) return;
$output =
'<div>
<div>' . $atts['img'] . '</div><br />
<div>' . $atts['user'] . '</div>
<div>' . $atts['text'] . '</div>
</div>';
return $output;
}
add_shortcode( 'hire_equipment', 'hire_equipment_func' );
[hire_equipment img="" user="Test Float" text="Can be used anywhere"]
Any help with this issue would be GREATLY appreciated!!
Kind regards,
Jesse
This will return nothing if one of the attributes is not set, and will return each attribute in a div otherwise.
function hire_equipment_func($atts) {
$atts = array_change_key_case((array)$atts, CASE_LOWER);
if (!isset($atts['img']) || !isset($atts['user']) || !isset($atts['text'])) return;
$output =
'<div>
<div>' . $atts['img'] . '</div><br />
<div>' . $atts['user'] . '</div>
<div>' . $atts['text'] . '</div>
</div>';
return $output;
}
add_shortcode( 'hire_equipment', 'hire_equipment_func' );
function hire_equipment_func($atts) {
extract( shortcode_atts( array(
'img' => 'no-img',
'user' => 'no-user',
'text' => 'no-text',
), $atts ) );
if ( $atts['img'] == 'no-img' || $atts['user'] == 'no-user' || $atts['text'] == 'no-text' ) return;
$output =
'<div>
<div>' . $atts['img'] . '</div><br />
<div>' . $atts['user'] . '</div>
<div>' . $atts['text'] . '</div>
</div>';
return $output;
}
add_shortcode( 'hire_equipment', 'hire_equipment_func' );
[hire_equipment img="" user="Test Float" text="Can be used anywhere"]
Okay, for some reason I placed the same text from each attribute (e.g. 'no-img' from attribute 'img') into each text area in the IF statement, and it worked!
So I have answered my own question! However, I am still interested in wondering WHY that works the way it did. I am willing to mark the question as ANSWERED once someone helps me in understanding the concept reason behind it.
Thanks!
Jesse
This will remove sections that are not specified, so if you toss this snippet of PHP into your functions.php file (in your child theme, preferably):
function hire_equipment_func( $atts ) {
extract(
shortcode_atts(
array(
'img' => 'no-img'
, 'user' => 'no-user'
, 'text' => 'no-text'
)
, $atts
)
);
$output = '<div>' . PHP_EOL;
if( isset( $atts[ 'img' ] ) ) { $output .= ' <div>' . $atts[ 'img' ] . '</div><br>' . PHP_EOL; }
if( isset( $atts[ 'user' ] ) ) { $output .= ' <div>' . $atts[ 'user' ] . '</div>' . PHP_EOL; }
if( isset( $atts[ 'text' ] ) ) { $output .= ' <div>' . $atts[ 'text' ] . '</div>' . PHP_EOL; }
$output .= '</div>';
return $output;
}
add_shortcode( 'hire_equipment', 'hire_equipment_func' );
and place this WordPress shortcode on your page:
[hire_equipment img="" user="Test Float" text="Can be used anywhere"]
you will get:
Test Float
Can be used anywhere
Example 2:
[hire_equipment img="/file/path/image.svg" user="Test Float" text="Can be used anywhere"]
yields
/file/path/image.svg
Test Float
Can be used anywhere
Example 3:
[hire_equipment img="/file/path/image.svg" text="Can be used anywhere"]
outputs
/file/path/image.svg
Can be used anywhere
Example 4:
[hire_equipment img="" user="" text=""]
shows
caused by that line break in your markup.
If you're wondering, PHP_EOL is a PHP constant denoting the correct 'End Of Line' symbol for your platform.
I am doing my first every plugin to Wordpress.
How can i insert variable between HTML? I want to insert $today_output between divs?
Have tried all sort of things, but this is too confusing to me.
$today_post_id = 82;
$post_content = get_post($today_post_id);
$today_output = wpautop( $post_content->post_content);
$output = sprintf(
'<div%2$s class="et_pb_code et_pb_module%3$s">
want to add today_output variable here
</div> <!-- .et_pb_today -->',
$this->shortcode_content,
( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ),
( '' !== $module_class ? sprintf( ' %1$s', esc_attr( $module_class ) ) : '' )
);
return $output;
Thanks,
Ville
Maybe try it using string concatenation instead like this:
<?php
$output = '<div class="' . $classname . '">' .
'<div>' . $content . '</div>' .
'</div>';
?>
I was wondering if it's possible to display value returned from a function on the Main Menu in WordPress? I figured I can use custom links to display text on the menu. Now I would like call a function which calculates the number of users online and display the result on the menu.
Something like chinesepod.com does
Here's the code for calculating the number of users : -
function ray_number_online_users() {
$i = 0;
if ( bp_has_members( ‘user_id=0&type=online&per_page=999&populate_extras=0′ ) ) :
while ( bp_members() ) : bp_the_member();
$i++;
endwhile;
endif;
return $i;
}`
The easiest way to target a single link on your menu is by giving it a class (user-number in this case).
The theme location is defined by the register_nav_menus function
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'twentyfifteen' ),
'social' => __( 'Social Links Menu', 'twentyfifteen' ),
) );
Here I target the primary menu location, but I could also target the social menu.
function so30559666_nav_description( $item_output, $item, $depth, $args ) {
if ( 'primary' == $args->theme_location && in_array("user-number", $item->classes)) {
$count = ray_number_online_users();
$item_output = str_replace( $args->link_after . '</a>', '<div class="menu-user-count">' . $count . '</div>' . $args->link_after . '</a>', $item_output );
}
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'so30559666_nav_description', 10, 4 );
I am creating a shortcode to display the most recent posts in the homepage, however I cannot get the pagination working.
When you click on 'older posts' the page refreshes but the same 2 original posts are displayed.
if ( ! function_exists('vpsa_posts_shortcode') ) {
function vpsa_posts_shortcode( $atts ){
$atts = shortcode_atts( array(
'per_page' => 2,
'order' => 'DESC',
'orderby' => 'date'
), $atts );
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => $atts["per_page"],
'order' => $atts["order"],
'orderby' => $atts["orderby"],
'paged' => $paged
);
$query = new WP_Query($args);
if($query->have_posts()) : $output;
while ($query->have_posts()) : $query->the_post();
$output .= '<article id="post-' . get_the_ID() . '" class="' . implode(' ', get_post_class()) . '">';
$output .= '<h4 class="post-title"><span>' . the_title('','',false) . '</span></h4>';
$output .= '<div class="row">';
$output .= '<div class="col-md-3">';
$output .= '<a href="' . get_permalink() . '" title="' . the_title('','',false) . '">';
if ( has_post_thumbnail() ) {
$output .= get_the_post_thumbnail( get_the_id(), 'featured', array('class' => 'img-responsive aligncenter'));
} else {
$output .= '<img class="img-responsive aligncenter" src="' . get_template_directory_uri() . '/images/not-available.png" alt="Not Available" height="150" width="200" />';
}
$output .= '</a>';
$output .= '</div>';
$output .= '<div class="col-md-9">';
$output .= get_the_excerpt();
$output .= '<span class="post-permalink">Read More</span>';
$output .= '</div>';
$output .= '</div>';
$output .= '<div class="post-info">';
$output .= '<ul>';
$output .= '<li>Posted: ' . get_the_time("F j, Y") . '</li>';
$output .= '<li>By: ' . get_the_author() . '</li>';
$output .= '<li>Categories: ' . get_the_category_list(", ") . '</li>';
$output .= '</ul>';
$output .= '</div>';
$output .= '</article>';
endwhile;
$output .= '<div class="post-nav">';
$output .= '<div class="prev-page">' . get_previous_posts_link( "« Newer Entries" ) . '</div>';
$output .= '<div class="next-page">' . get_next_posts_link( "Older Entries »", 3 ) . '</div>';
$output .= '</div>';
else:
$output .= '<p>Sorry, there are no posts to display</p>';
endif;
wp_reset_postdata();
return $output;
}
}
add_shortcode('vpsa_posts', 'vpsa_posts_shortcode');
You need to call paginate function.Try following code:
if ( ! function_exists('vpsa_posts_shortcode') ) {
function vpsa_posts_shortcode( $atts ){
$atts = shortcode_atts( array(
'per_page' => 2,
'order' => 'DESC',
'orderby' => 'date'
), $atts );
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => $atts["per_page"],
'order' => $atts["order"],
'orderby' => $atts["orderby"],
'paged' => $paged
);
$query = new WP_Query($args);
if($query->have_posts()) : $output;
while ($query->have_posts()) : $query->the_post();
$output .= '<article id="post-' . get_the_ID() . '" class="' . implode(' ', get_post_class()) . '">';
$output .= '<h4 class="post-title"><span>' . the_title('','',false) . '</span></h4>';
$output .= '<div class="row">';
$output .= '<div class="col-md-3">';
$output .= '<a href="' . get_permalink() . '" title="' . the_title('','',false) . '">';
if ( has_post_thumbnail() ) {
$output .= get_the_post_thumbnail( get_the_id(), 'featured', array('class' => 'img-responsive aligncenter'));
} else {
$output .= '<img class="img-responsive aligncenter" src="' . get_template_directory_uri() . '/images/not-available.png" alt="Not Available" height="150" width="200" />';
}
$output .= '</a>';
$output .= '</div>';
$output .= '<div class="col-md-9">';
$output .= get_the_excerpt();
$output .= '<span class="post-permalink">Read More</span>';
$output .= '</div>';
$output .= '</div>';
$output .= '<div class="post-info">';
$output .= '<ul>';
$output .= '<li>Posted: ' . get_the_time("F j, Y") . '</li>';
$output .= '<li>By: ' . get_the_author() . '</li>';
$output .= '<li>Categories: ' . get_the_category_list(", ") . '</li>';
$output .= '</ul>';
$output .= '</div>';
$output .= '</article>';
endwhile;global $wp_query;
$args_pagi = array(
'base' => add_query_arg( 'paged', '%#%' ),
'total' => $query->max_num_pages,
'current' => $paged
);
$output .= '<div class="post-nav">';
$output .= paginate_links( $args_pagi);
// $output .= '<div class="next-page">' . get_next_posts_link( "Older Entries »", 3 ) . '</div>';
$output .= '</div>';
else:
$output .= '<p>Sorry, there are no posts to display</p>';
endif;
wp_reset_postdata();
return $output;
}
}
add_shortcode('vpsa_posts', 'vpsa_posts_shortcode');
WP_Query with pagination inside a shortcode
Here I will show you how to create a [shortcode] containing a custom new WP_Query with pagination links.
To create a [shortcode] with a new WP_Query post loop with pagination links built in to turn any is_singular() page or single post into a custom archive based on the WP_Query arguments you set. Lets call it [wp_query_pagination_inside_shortcode], so we add with the following add_shortcode() in functions.php.
Or in my case I create separate /functions/ folder for files to stay organized with the appropriates names and have a require_once include file structure.
root/functions.php ->
require_once 'functions/shortcode-wp-query-pagination-inside-shortcode.php';
root/functions/shortcode-wp-query-pagination-inside-shortcode.php->
add_shortcode('wp_query_pagination_inside_shortcode', 'my_shortcode_function_tag');
if (!function_exists('my_shortcode_function_tag')) {
function my_shortcode_function_tag($atts)
{
ob_start(); // Turn output buffering on, helps with complicated template and theme structures
// Note: https://developer.wordpress.org/reference/functions/get_query_var/#used-by
// Custom query_vars translates to Getting an "archive" on any current page that contains a query with corresponding pagination number in the url
// example.com/page-shortcodes-on/page/2/ ...etc see below how to manipulate this
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$atts = shortcode_atts(
array(
'post_type' => 'post',
// Set attributes here you want in your shortcode
// like [shortcode post_types="post"]
),
$atts
);
// set up the default args you wont change and the ones you will by accessing the value of $atts passed into the shortcode function from your WYSIWYG content editor
$args = array(
'posts_per_page' => 3,
'paged' => $paged, // Important to receive page data
'post_type' => $atts['post_type'], // This is how you get the values of your shortcode attributes passed in
'orderby' => 'date',
'order' => 'DESC',
);
$the_query = new WP_Query($args);
// Da loop
// match your themes loop structure this below is just boiler plate stuff ignore or use your choice its not important how you create the post loop, just do it
if ($the_query->have_posts()) {
while ($the_query->have_posts()) {
$the_query->the_post();
get_template_part('template-parts/loop');
} //end while
} // endif
$big = 999999999; // need an unlikely integer for how many pages are possible
// I've tested example.com/page-shortcodes-on/page/999999999999999999/ and the custom query_var still works
echo paginate_links(
array(
'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))), // referrence the url
'format' => '?paged=%#%', // used for replacing the page number
'current' => max(1, get_query_var('paged')), // grabs the page data
'total' => $the_query->max_num_pages //$the_query is your custom query
)
);
return ob_get_clean(); // Silently discard the buffer contents
wp_reset_query(); // Lets go back to the main_query() after returning our buffered content
}
}
In a WYSIWYG Content editor in pages or posts content editor
[wp_query_pagination_inside_shortcode post_type="posts"]
URL structure for this query_var 'paged'
example.com/page-shortcode-is-on/page/2/
You will need to stylize the pagination links a bit to be acceptable but this should give you a highly useful tool to build custom WP_Query loops with multiple different post_types from anywhere in your site through your WYSIWYG editor. Add more attributes to really make this thing valuable.
// Ignore below, these are just possible search queries for this issue
WP_Query pagination inside a shortcode / add_shortcode with pagination / shortcode with custom attributes / Paginated custom post type wp_query shortcode / custom post type wp_query archive posts per page / page / pagination wont work