Docs

[nick0h]

Hello,

I am using WP v4.6.0 with X theme v4.6.1 with the X child theme activated.

I am building a site based on the Icon 4 demo and have a couple of questions about the Blog setup in the X Theme.

1. The site that I am currently building (still in maintenance mode) currently has 3 blog posts.
Each of these posts use the link format.
The full link is used for the post heading on the blog page and in the RHS blog posts summary etc instead of the content from the standard title field (eg the text that goes into the field at the top of the page “enter title here”).
See attached – see how the full html link is used.
I dont want the html link to show as the heading (eg http://www.this-is-only-the-link…)
I DO want the post heading to show on the individual post page and in the blog summaries / feeds (eg This is the post heading).
In other words I want to show the post title not the post link for all link format posts.
Please provide the code to achieve this.

2. The blog page (the Posts page) does not include the hl blog page title (eg the text that goes into the field at the top of the page “enter title here”) at the top of the page – it just shows the 3 posts that I have created.
“Disable Page Title” is not checked. It is unchecked and still not showing the page title.
How do I include the page title (in this case Blog) at the top of the blog page?

Thanks for your help

[Christopher]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[nick0h]

This reply has been marked as private.

[Christopher]

Hi there,

#1 Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Copy content-link.php from framework/views/icon and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/ICON/CONTENT-LINK.PHP
// -----------------------------------------------------------------------------
// Link post output for Icon.
// =============================================================================

$link = get_post_meta( get_the_ID(), '_x_link_url',  true );

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    <?php x_icon_comment_number(); ?>
    <div class="x-container max width">
      <header class="entry-header">
        <?php if ( is_single() ) : ?>
        <h1 class="entry-title">
          <?php if ( $disable_page_title != 'on' ) : ?>
        <header class="entry-header">
          <h1 class="entry-title"><i class="x-icon-paperclip" data-x-icon=""></i><?php the_title(); ?></h1>
        </header>
        <?php endif; ?>
        <?php else : ?>
        <h2 class="entry-title"><i class="x-icon-paperclip" data-x-icon=""></i>
          <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ); ?>"><?php x_the_alternate_title(); ?></a>
        </h2>
        <?php endif; ?>
        <?php x_icon_entry_meta(); ?>
      </header>
      <?php if ( is_single() ) : ?>
        <?php if ( has_post_thumbnail() ) : ?>
        <div class="entry-featured">
          <?php x_featured_image(); ?>
        </div>
        <?php endif; ?>
      <?php x_get_view( 'global', '_content', 'the-content' ); ?>
      <?php endif; ?>
    </div>
  </div>
</article>

#2 This option is not available in Icon stack, but we can help you with this.

Please add following code in Customize -> Custom -> JavaScript :

jQuery("<span style='display:block;text-align:center;font-size:48px;'>Blog</span>").insertBefore(".blog .x-container.offset-bottom");

Hope that helps.

[nick0h]

Hi, thanks so much for your help.

For #1, Thank you. I am already using child theme. That wasn’t quite how I wanted the post titles to work on the blog and individual post pages but I was able to tweak it to suit. Thanks to your help.

For #2, that font style is inline and does not share the h1 class / styling.
But if I replace the inline code with the h1 code like below, it doesn’t work. Why doesn’t this work?
jQuery("<h1 class="entry-title">Blog</h1>").insertBefore(".blog .x-container.offset-bottom");
Do you know how to insert the code with text as an h1 like the above?
It needs to match the rest of the site.
Thanks.

[Lely]

Hi Nick,

You’re welcome.
Please update the code to this:

jQuery ( function( $ ) {
	$("<h1 class='entry-title'>Blog</h1>").insertBefore(".blog .x-container.offset-bottom");
});

Double quote inside double quote is an error in javascript.

Hope this helps.

[nick0h]

Hello,

Thankyou for the updated code. That does help. An h1 is now added which is great.

There is a height difference though between the header and the blog heading.

The gap from the header border is 61px on all other pages.
On the js code modified Blog page, the header gap is only 11px.
See attached screencaps.

I cant work out which other code needs to be included to make the spacing consistent between the Blog page and the rest of the site.

I tried:

jQuery ( function( $ ) {
	$("<header class='entry-header'><h1 class='entry-title'>Blog</h1></header>").insertBefore(".blog .x-container.offset-bottom");
});
and also
jQuery ( function( $ ) {
	$("<div class='entry-wrap'><div class='x-container max width'><header class='entry-header'><h1 class='entry-title'>Blog</h1></header></div></div>").insertBefore(".blog .x-container.offset-bottom");
});
without success

Any ideas?

Thanks.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

.blog header.entry-header h1 {
    margin-top: 33px;
}

Hope it helps.

[nick0h]

Thanks Christopher.
Changing margin-top to 50 with the above code in child theme css matches the gap
Cheers mate

[Rad]

You’re welcome!

[Author]

Posts