Editing options for Blog Page

hi there guys –
I need to edit the blog page’s layout in order to personalize the render
I’m using pro.

  • I need to add an introduction content between the title and posts listed
  • remove link from image and only have title linked

How can I achieve this and what are files concerned inside the theme ?

Any idea would be very welcome.
Thanks

Hello Vlad,

Thanks for writing in!

Please keep in mind that once a page has been assigned as your blog index, you can no longer edit it with Pro editor or even the default WP editor. You will have to modify the index.php template in the theme instead. To do that, assuming you have your child theme active and ready, please follow these steps below:

####I am using Integrity stack as an example.

1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/_INDEX.PHP
// -----------------------------------------------------------------------------
// Includes the index output.
// =============================================================================

$stack = x_get_stack();

if ( is_home() ) :
  $style     = x_get_option( 'x_blog_style' );
  $cols      = x_get_option( 'x_blog_masonry_columns' );
  $condition = is_home() && $style == 'masonry';
elseif ( is_archive() ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = x_get_option( 'x_archive_masonry_columns' );
  $condition = is_archive() && $style == 'masonry';
elseif ( is_search() ) :
  $condition = false;
endif;

?>

<?php if ( $condition ) : ?>

  <?php x_get_view( 'global', '_script', 'isotope-index' ); ?>

  <div id="x-iso-container" class="x-iso-container x-iso-container-posts cols-<?php echo $cols; ?>">

    <?php if ( have_posts() ) : ?>
      <?php while ( have_posts() ) : the_post(); ?>
        <?php if ( $stack != 'ethos' ) : ?>
          <?php x_get_view( $stack, 'content', get_post_format() ); ?>
        <?php else : ?>
          <?php x_ethos_entry_cover( 'main-content' ); ?>
        <?php endif; ?>
      <?php endwhile; ?>
    <?php else : ?>
      <?php x_get_view( 'global', '_content-none' ); ?>
    <?php endif; ?>

  </div>

<?php else : ?>

  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <?php x_get_view( $stack, 'content', get_post_format() ); ?>
    <?php endwhile; ?>
  <?php else : ?>
    <?php x_get_view( 'global', '_content-none' ); ?>
  <?php endif; ?>

<?php endif; ?>

<?php pagenavi(); ?>

Off course you will need to add your modifications first.

3] Save the file named as _index.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/views/global/

And to remove the link from the featured image, please add the following code in your child theme’s functions.php file

// Custom Featured Image
// =============================================================================

//
// Output featured image in an <a> tag on index pages and a <div> for single
// posts and pages.
//

if ( ! function_exists( 'x_featured_image' ) ) :
  function x_featured_image( $cropped = '' ) {

    $stack     = x_get_stack();
    $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    if ( has_post_thumbnail() ) {

      if ( $cropped == 'cropped' ) {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-cropped-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-cropped', NULL );
        }
      } else {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry', NULL );
        }
      }

      printf( '<div class="entry-thumb">%s</div>', $thumb );


    }

  }
endif;
// =============================================================================

We would loved to know if this has work for you. Thank you.

1 Like

Hi there and thanks for replying

Unfortunately that does not work for me.

  • where to insert the content inside the _index.php ? before the loop ?
    I’ve tried with a <?php echo "content"; ?> but it does not work.

  • I also would need to have the title appearing as h1

  • image is still having the link on it

You can see the page on https://socialadikt.com/comment-fonctionne-instagram/

thanks a lot

Hello Vlad,

1.) If you remove the link, there will be no background image because the images were just background images of the links. You may disable the link instead by adding this custom css:

.blog .entry-thumb,
.archive .entry-thumb {
    pointer-events: none;
}

2.) If you want to add some custom text before the loop, you may use this code:

<?php

// =============================================================================
// VIEWS/GLOBAL/_INDEX.PHP
// -----------------------------------------------------------------------------
// Includes the index output.
// =============================================================================

$stack = x_get_stack();

if ( is_home() ) :
  $style     = x_get_option( 'x_blog_style' );
  $cols      = x_get_option( 'x_blog_masonry_columns' );
  $condition = is_home() && $style == 'masonry';
elseif ( is_archive() ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = x_get_option( 'x_archive_masonry_columns' );
  $condition = is_archive() && $style == 'masonry';
elseif ( is_search() ) :
  $condition = false;
endif;

?>


<div class="x-section custom-content">
  <div class="x-container">
    <div class="x-column">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque eros eu pulvinar dictum. Nunc egestas massa at elit bibendum, cursus fringilla nunc faucibus. Proin dignissim efficitur nunc a cursus. In luctus mi in nisi condimentum, sed ornare enim tempor. Praesent semper ultricies tellus, rutrum fermentum leo viverra at. Sed a venenatis ante, non aliquam tortor. Aliquam erat volutpat. Curabitur felis elit, rhoncus et molestie in, auctor euismod lorem. Etiam viverra hendrerit metus, vitae ullamcorper metus ultricies ut. Ut eu ex id ligula viverra auctor at quis urna.</p>
    </div>
  </div>
</div>  



<?php if ( $condition ) : ?>

  <?php x_get_view( 'global', '_script', 'isotope-index' ); ?>

  <div id="x-iso-container" class="x-iso-container x-iso-container-posts cols-<?php echo $cols; ?>">

    <?php if ( have_posts() ) : ?>
      <?php while ( have_posts() ) : the_post(); ?>
        <?php if ( $stack != 'ethos' ) : ?>
          <?php x_get_view( $stack, 'content', get_post_format() ); ?>
        <?php else : ?>
          <?php x_ethos_entry_cover( 'main-content' ); ?>
        <?php endif; ?>
      <?php endwhile; ?>
    <?php else : ?>
      <?php x_get_view( 'global', '_content-none' ); ?>
    <?php endif; ?>

  </div>

<?php else : ?>

  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <?php x_get_view( $stack, 'content', get_post_format() ); ?>
    <?php endwhile; ?>
  <?php else : ?>
    <?php x_get_view( 'global', '_content-none' ); ?>
  <?php endif; ?>

<?php endif; ?>

<?php pagenavi(); ?>

We would loved to know if this has work for you. Thank you.

1 Like

Thanks a lot ! that works smoothly !
Could you tell me how to add the title of the page as an h1 in this layout ?

many thanks for your time

Hi @vlad,

It’s in the post header template. But yes, you could still add it there, example,

<div class="x-section custom-content">
  <div class="x-container">
    <div class="x-column">
<h1>A great title here</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque eros eu pulvinar dictum. Nunc egestas massa at elit bibendum, cursus fringilla nunc faucibus. Proin dignissim efficitur nunc a cursus. In luctus mi in nisi condimentum, sed ornare enim tempor. Praesent semper ultricies tellus, rutrum fermentum leo viverra at. Sed a venenatis ante, non aliquam tortor. Aliquam erat volutpat. Curabitur felis elit, rhoncus et molestie in, auctor euismod lorem. Etiam viverra hendrerit metus, vitae ullamcorper metus ultricies ut. Ut eu ex id ligula viverra auctor at quis urna.</p>
    </div>
  </div>
</div>  

I didn’t provide the complete code, but just part of it to show where it can be added.

Thanks!

That works :: Thanks

You’re welcome!
We really appreciate for letting us know that it has worked for you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.