Docs

[patrickg]

I just modified my functions.php in my Ethos child theme to allow for the author name to link to a page with all of their posts. Now I would like to accomplish a few more things:

1) Customize the author page with photo and some title information. I have multiple authors so the page would need to change based on the author someone clicked on to view.

2) I would like to be able to link to this page from other pages – should be an easy link, but I also want to add link to the author bio at the bottom of my posts so the name is the link.

My website is http://www.bourbonbanter.com.

Thanks,

Patrick

[John Ezra]

Hey there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this.

X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[patrickg]

What about modifying the Author Bio at bottom of posts so the Author name links to the same place as the meta author name does as the top of a post?

[Nico]

Hi There,

Would you mind sharing us a screenshot of what you want to achieve or a sample link that shows similar look of what you want to achieve. I could not assure you that we could do it because it is also a custom development that needs a developer but we could take a look if we could help you.

Thanks.

[patrickg]

Here’s what I’m requesting.

[Lely]

Hi There,

Please try adding the following code on your child theme’s functions.php file.

function x_shortcode_x_author_update_2( $atts ) {
  extract( shortcode_atts( array(
    'id'        => '',
    'class'     => '',
    'style'     => '',
    'title'     => '',
    'author_id' => ''
  ), $atts, 'x_author' ) );

  $id        = ( $id        != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class     = ( $class     != '' ) ? 'x-author-box cf ' . esc_attr( $class ) : 'x-author-box cf';
  $style     = ( $style     != '' ) ? 'style="' . $style . '"' : '';
  $title     = ( $title     != '' ) ? $title : __( 'About the Author', csl18n() );
  $author_id = ( $author_id != '' ) ? $author_id : get_the_author_meta( 'ID' );

  $description  = get_the_author_meta( 'description', $author_id );
  $display_name = get_the_author_meta( 'display_name', $author_id );
  $facebook     = get_the_author_meta( 'facebook', $author_id );
  $twitter      = get_the_author_meta( 'twitter', $author_id );
  $googleplus   = get_the_author_meta( 'googleplus', $author_id );

  $facebook_output   = ( $facebook )   ? "<a href=\"{$facebook}\" class=\"x-author-social\" title=\"Visit the Facebook Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-facebook-square\" data-x-icon=\"\"></i> Facebook</a>" : '';
  $twitter_output    = ( $twitter )    ? "<a href=\"{$twitter}\" class=\"x-author-social\" title=\"Visit the Twitter Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-twitter-square\" data-x-icon=\"\"></i> Twitter</a>" : '';
  $googleplus_output = ( $googleplus ) ? "<a href=\"{$googleplus}\" class=\"x-author-social\" title=\"Visit the Google+ Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-google-plus-square\" data-x-icon=\"\"></i> Google+</a>" : '';

  $output = "<div {$id} class=\"{$class}\" {$style}>"
            . "<h6 class=\"h-about-the-author\">{$title}</h6>"
            . get_avatar( $author_id, 180 )
            . '<div class="x-author-info">'
              . ' by <a href="'.  get_author_posts_url(get_the_author_meta( 'ID' )) . '">' ."<h4 class=\"h-author mtn\">{$display_name}</h4></a>"
                . $facebook_output
                . $twitter_output
                . $googleplus_output
              . "<p class=\"p-author mbn\">{$description}</p>"
            . '</div>'
          . '</div>';

  return $output;
}

add_action('wp_head', 'x_author_update');
function x_author_update () {
  remove_shortcode( 'x_author' );
   add_shortcode( 'x_author', 'x_shortcode_x_author_update_2' );

}

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Daphne D]

Hi, I was sent over here to this thread by a staff member re: my question.

I added the above code to my function.php and it works, but it’s kinda messy (see screenshot). It added a “by” above the author name (which I don’t want PLUS it’s awkward in how it’s placed). Secondly, unlike the entry meta under the title that does the same thing, the author’s name in the “about author” section IS a link but has no link color so you wouldn’t know it unless you accidentally hover over their name.

1) can the “by” be removed from the code?
2) can the actual link to author use the same link settings as everything else?

thanks so much 🙂

[Daphne D]

I forgot to add the screenshot!

[Daphne D]

This reply has been marked as private.

[Jade]

Hi Daphne,

Thanks for writing in.

Please use this code instead:

function x_shortcode_x_author_update_2( $atts ) {
  extract( shortcode_atts( array(
    'id'        => '',
    'class'     => '',
    'style'     => '',
    'title'     => '',
    'author_id' => ''
  ), $atts, 'x_author' ) );

  $id        = ( $id        != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class     = ( $class     != '' ) ? 'x-author-box cf ' . esc_attr( $class ) : 'x-author-box cf';
  $style     = ( $style     != '' ) ? 'style="' . $style . '"' : '';
  $title     = ( $title     != '' ) ? $title : __( 'About the Author', csl18n() );
  $author_id = ( $author_id != '' ) ? $author_id : get_the_author_meta( 'ID' );

  $description  = get_the_author_meta( 'description', $author_id );
  $display_name = get_the_author_meta( 'display_name', $author_id );
  $facebook     = get_the_author_meta( 'facebook', $author_id );
  $twitter      = get_the_author_meta( 'twitter', $author_id );
  $googleplus   = get_the_author_meta( 'googleplus', $author_id );

  $facebook_output   = ( $facebook )   ? "<a href=\"{$facebook}\" class=\"x-author-social\" title=\"Visit the Facebook Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-facebook-square\" data-x-icon=\"\"></i> Facebook</a>" : '';
  $twitter_output    = ( $twitter )    ? "<a href=\"{$twitter}\" class=\"x-author-social\" title=\"Visit the Twitter Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-twitter-square\" data-x-icon=\"\"></i> Twitter</a>" : '';
  $googleplus_output = ( $googleplus ) ? "<a href=\"{$googleplus}\" class=\"x-author-social\" title=\"Visit the Google+ Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-google-plus-square\" data-x-icon=\"\"></i> Google+</a>" : '';

  $output = "<div {$id} class=\"{$class}\" {$style}>"
            . "<h6 class=\"h-about-the-author\">{$title}</h6>"
            . get_avatar( $author_id, 180 )
            . '<div class="x-author-info">'
              . ' <a href="'.  get_author_posts_url(get_the_author_meta( 'ID' )) . '">' ."<h4 class=\"h-author mtn\">{$display_name}</h4></a>"
                . $facebook_output
                . $twitter_output
                . $googleplus_output
              . "<p class=\"p-author mbn\">{$description}</p>"
            . '</div>'
          . '</div>';

  return $output;
}

Would you mind clarifying what you mean by can the actual link to author use the same link settings as everything else? Thank you.

[Daphne D]

I updated the code and although it removed the word “by” it basically took it back to how it was originally (with no link connected to the author’s name). <<see screenshot

To clarify before, I just meant my links throughout my site are teal-colored and I would like any link to the author’s name to be the same.

[Lely]

Hi Daphne,

Please update the code to this:

function x_shortcode_x_author_update_2( $atts ) {
  extract( shortcode_atts( array(
    'id'        => '',
    'class'     => '',
    'style'     => '',
    'title'     => '',
    'author_id' => ''
  ), $atts, 'x_author' ) );

  $id        = ( $id        != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class     = ( $class     != '' ) ? 'x-author-box cf ' . esc_attr( $class ) : 'x-author-box cf';
  $style     = ( $style     != '' ) ? 'style="' . $style . '"' : '';
  $title     = ( $title     != '' ) ? $title : __( 'About the Author', csl18n() );
  $author_id = ( $author_id != '' ) ? $author_id : get_the_author_meta( 'ID' );

  $description  = get_the_author_meta( 'description', $author_id );
  $display_name = get_the_author_meta( 'display_name', $author_id );
  $facebook     = get_the_author_meta( 'facebook', $author_id );
  $twitter      = get_the_author_meta( 'twitter', $author_id );
  $googleplus   = get_the_author_meta( 'googleplus', $author_id );

  $facebook_output   = ( $facebook )   ? "<a href=\"{$facebook}\" class=\"x-author-social\" title=\"Visit the Facebook Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-facebook-square\" data-x-icon=\"\"></i> Facebook</a>" : '';
  $twitter_output    = ( $twitter )    ? "<a href=\"{$twitter}\" class=\"x-author-social\" title=\"Visit the Twitter Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-twitter-square\" data-x-icon=\"\"></i> Twitter</a>" : '';
  $googleplus_output = ( $googleplus ) ? "<a href=\"{$googleplus}\" class=\"x-author-social\" title=\"Visit the Google+ Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-google-plus-square\" data-x-icon=\"\"></i> Google+</a>" : '';

  $output = "<div {$id} class=\"{$class}\" {$style}>"
            . "<h6 class=\"h-about-the-author\">{$title}</h6>"
            . get_avatar( $author_id, 180 )
            . '<div class="x-author-info">'
              . '<a href="'.  get_author_posts_url(get_the_author_meta( 'ID' )) . '">' ."<h4 class=\"h-author mtn\">{$display_name}</h4></a>"
                . $facebook_output
                . $twitter_output
                . $googleplus_output
              . "<p class=\"p-author mbn\">{$description}</p>"
            . '</div>'
          . '</div>';

  return $output;
}

add_action('wp_head', 'x_author_update');
function x_author_update () {
  remove_shortcode( 'x_author' );
   add_shortcode( 'x_author', 'x_shortcode_x_author_update_2' );

}

I just remove the word by but the author still link. Then add the following CSS to adjust the font color:

.x-author-info>a .h-author {
    color: ##35838d;
}

Hope this helps.

[patrickg]

None of the code customizations are working on my site.

[Daphne D]

Everything worked! — minus the extra # below 🙂 I removed it and all is perfect. Thanks so much!

.x-author-info>a .h-author {
color: ##35838d;
}

[Jade]

Hi Patrick,

The code in response #840957 should do the trick and what Daphne has implemented on her site.

Kindly provide us with the login details to your WordPress admin and the FTP details in a private response so that we could check this further. Thank you.

[Author]

Posts