How to Expand the header and footer on single posts page... Icon stack

Hi,

I’m using the icon stack and would like to know how to make the header and footers full width on the blog’s single posts page. I would like to have the content left and the sidebar right or perhaps a side bar on the right and left with the content in the middle. But when trying to add sidebar to single posts page they do not appear.

Hi There,

Unfortunately that is not available on Icon, Icon structure is different, all the other 3 stacks offer this functionality.

Hope it helps

That’s unfortunate… I do like the Icon Stack So I do not wish to change it just because of that. It just looks really weird with the blank space to the right considering no sidebars can be added. Also, I noticed that there are no previous and next arrows to navigate through posts. can some be added?

I’ve added the date and author name to posts. How do I add the author avatar& time post was created? Additionally, I would like to add the twitter icon with the link so that people can click the twitter icon and follow me on twitter.
Unlike the example below, I want it to remain inline as shown above rather than stacked.

Hi,

You can add the following codes in your child theme’s functions.php file.

function x_icon_entry_meta() {

    $date = sprintf( '<span><time class="entry-date" datetime="%1$s">%2$s</time></span>',
      esc_attr( get_the_date( 'c' ) ),
      esc_html( get_the_date() )
    );
    
    $twitter = '<a href="#holder" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="&#xf081;" aria-hidden="true"></i></a>';

    if ( x_does_not_need_entry_meta() ) {
      return;
    } else {
      printf( '<p class="p-meta"><span>%1s</span> <span>%2s</span> <span>%3s</span> <span>%4s</span></p>',
        $date,
        get_avatar(),
        get_the_author(),
        $twitter
      );
    }

  }

You may modify the code as you like.

Hope that helps.

Hi!

Thanks so much for the code. However, it’s giving me a syntax error as if something is missing. This is the code that I have currently in my functions.php file that gives the time and date. How can I update it the include the author pic and twitter code you have listed above?

// Entry Meta - Adding Author Name next to the Date.
// =============================================================================

if ( ! function_exists( ‘x_icon_entry_meta’ ) ) :
function x_icon_entry_meta() {

$author = sprintf( '<span><i class="x-icon-pencil"></i> %s</span>',
  get_the_author()

);

$date = sprintf( '<span><time class="entry-date" datetime="%1$s">%2$s</time></span>',
  esc_attr( get_the_date( 'c' ) ),
  esc_html( get_the_date( 'm.d.Y' ) )
);

if ( x_does_not_need_entry_meta() ) {
  return;
} else {
  printf( '<p class="p-meta">%1$s%2$s</p>',
    $date,
    $author
  );
}

}
endif;

// Adding “Read More” link to the Excerpts
// =============================================================================

function excerpt_read_more_link($output) {
global $post;
return $output . ’ Read More’;
}

add_filter(‘the_excerpt’, ‘excerpt_read_more_link’);

Can this code somehow be used to pull the author pic?

<?php echo get_avatar( get_the_author_meta('ID'), 60); ?>
Post Written By: Fantasy

And can this code be used to pull the time of the post and comment link?

  <div class="post-date date updated"><?php echo get_the_date('F j, Y'); ?>|<?php the_time('g:i a'); ?></div><!-- post-date -->
        <div class="post-comment"> | <a href="<?php comments_link(); ?>"><?php comments_number(); ?></a></div> 
        <div class="clear"></div>

Hello There,

You can make use of this code:

// Entry Meta
// =============================================================================

if ( ! function_exists( 'x_icon_entry_meta' ) ) :
  function x_icon_entry_meta() {

    $author = sprintf( '<span><i class="x-icon-pencil"></i> %s</span>',
      get_the_author()

    );

    $date = sprintf( '<span><time class="entry-date" datetime="%1$s">%2$s</time></span>',
      esc_attr( get_the_date( 'c' ) ),
      esc_html( get_the_date( 'm.d.Y' ) )
    );

    $avatar = '<span>' . get_avatar( get_the_author_meta('ID'), 60) . '</span>';

    $twitter = '<span><a href="#holder" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="&#xf081;" aria-hidden="true"></i></a></span>';

    if ( x_does_not_need_entry_meta() ) {
      return;
    } else {
      printf( '<p class="p-meta">%1$s%2$s%3$s%4$s</p>',
        $date,
        $author,
        $avatar,
        $twitter
      );
    }

  }
endif;

Please let us know how it goes.

Hi, Ruenel!

Thanks so much, almost there! The only thing that is missing now is the actual time the post was written. For some strange reason it doesn’t appear. I would actually like post written by to appear before the author’s name. If it needs to be stacked for everything to fit… like in the photo example I pulled from my other website that’s fine and each item with this symbol | to separate it. Also, I notice the avatar appears faded by default is there a way to change that? Thanks for your help. I appreciate it.

Hello There,

Thanks for updating in! The code above is only for displaying the date and not time. Which is why at the moment only the date is displaying.

To display the time,please update the code and make use of this block:

$date = sprintf( '<span><time class="entry-date" datetime="%1$s">%2$s-%3$s</time></span>',
  esc_attr( get_the_date( 'c' ) ),
  esc_html( get_the_date( 'm.d.Y' ) ),
  esc_html( get_the_time() )
);

Hope this helps. Please let us know how it goes.

1 Like

That did the trick. Thank you!

Glad we could help.

Cheers!

Additionally, If I want to add other social networks like Instagram, google plus, or Snapchat what would be the code for that?:slightly_smiling_face:

Hi There,

Please update the entire function to this:

// Entry Meta
// =============================================================================

if ( ! function_exists( 'x_icon_entry_meta' ) ) :
  function x_icon_entry_meta() {

    $author = sprintf( '<span><i class="x-icon-pencil"></i> %s</span>',
      get_the_author()

    );

    $date = sprintf( '<span><time class="entry-date" datetime="%1$s">%2$s-%3$s</time></span>',
      esc_attr( get_the_date( 'c' ) ),
      esc_html( get_the_date( 'm.d.Y' ) ),
      esc_html( get_the_time() )
    );

    $avatar = '<span>' . get_avatar( get_the_author_meta('ID'), 60) . '</span>';

    $twitter = '<span><a href="#holder" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="&#xf081;" aria-hidden="true"></i></a></span>';
    $instagram = '<a href="#holder" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="&#xf16d;" aria-hidden="true"></i></a>';
    $google_plus = '<a href="#holder" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="&#xf0d4;" aria-hidden="true"></i></a>';

    if ( x_does_not_need_entry_meta() ) {
      return;
    } else {
      printf( '<p class="p-meta">%1$s%2$s%3$s%4$s%5$s%6$s</p>',
        $date,
        $author,
        $avatar,
        $twitter,
        $instagram,
        $google_plus
      );
    }

  }
endif;

Hi, Thai!

Thanks so much that did the trick. I have two other things that I wanted to inquire about in reference to this. Is there a way to put the word By: before the author’s name? Additionally, the entire line where the date, author info., etc. has a faded look by default i believe. Is there a way to remove the fade effect?

Hi There,

I would like to check your website(https://www.keianienterprises.com/) but it’s under construction mode.

Could you please provide us with your admin account so we can take a closer look?

Thanks.

Hi, Thai!

Maintenance mode has been disabled for now. Warning the website might look a bit weird I just activated my CDN so it’s still in process.

Lastly, I have successfully removed my featured thumbnail from the single posts page using this code.

.single-post .entry-featured .entry-thumb {
display: none;
}

The last thing I would like to do is add drop caps for the first letter of the first paragraph that will appear by default for each individual post on the single posts page only. Here is the code. If there’s a way I can do a shortcode in each blog post separately to add the dropcaps without using the code please advise. Thanks again for all of your help. :grin:

div.entry-content p:first-child:first-letter { float:left; font-size:4em; color: #FF3399; margin-right:0.10em; line-height:90%; text-shadow: 0.05em 0.05em #C0C0C0; }

Hi 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!

Hi, Joao!

The code works so I wasn’t asking anyone to do custom development. I just wanted a little help with working with it to see if It can work exclusively with single posts only. How is asking whether or not I can do drop caps by default via shortcode, single posts, instead of altering or using the code at all… in Icon custom development request? Thanks… I guess. :hushed:

Hi again,

You can follow this thread https://theme.co/apex/forum/t/automatic-dropcap/5535/10 if the last one doesn’t work on your posts then try the previous given codes they should work.

Hope this helps!

Unfortunately, that code did not do the trick. I even tried this below and no such luck.

Blockquote.single-post .entry-content .x-text > p:first-child:first-letter { float:left; font-size:4em; color: #FF3399; margin-right:0.10em; line-height:90%; text-shadow: 0.05em 0.05em #C0C0C0; }

With the original CSS it works on the site however it happens sitewide and messes up the style of some page elements, which is why I prefer to have it work for the first letter of the first paragraph on single posts pages only for individual posts and nowhere else. I have attached a screenshot.

Hi again,

I checked your posts and the format you’re using in your posts is not consistent, CSS might not be able to the job for you in this situation, you’ll have to use the Shortcode http://demo.theme.co/icon-1/shortcodes/dropcap/

Thank you for understanding, take care!