Docs

[fantasy_5]

Hi!

I am in the process of designing my website https://shopatkei.com
I need to create separate files in each stack if possible because I have a few customization. I am currently using the integrity stack and have full c panel access. Is it possible to create a header.php, footer.php, and any other necessary files to complete my desired customization for each stack? If so, How can I go about achieving this? Would I just copy the information from each file in the X parent theme and create a new file (ex. header.php, footer.php) in the child theme for each stack?

[Paul R]

Hi,

Thanks for writing in!

Yes, you need to copy the files you want to customize and place under each stack folder.

eg. wp-content/themes/x-child/framework/views/renew/wp-header.php

For more information kindly refer to the links below.

https://community.theme.co/kb/how-to-setup-child-themes/
https://community.theme.co/kb/customization-best-practices/

Hope that helps.

[fantasy_5]

Hi, Paul R.!

Thanks so much for the info. I believe I’ve don’t things correctly… so far. I’ll double check to ensure things are working properly. So far, I have copied header.php, footer.php, and index.php from X theme parent and added the files along with my necessary customization to x child them integrity stack folder by creating a separate file for each in my c panel.

Within the index.php template, I am actually looking to customize the “read more” link for the blog posts and create a “View full post” transition button with an inverted hover instead. I would also change the words “Read more” to “View full post” So in order to achieve this I need to change “the_content” to “the_excerpt”.

Below is the integrity stack’s index.php file I copied into my integrity folder in the child theme, from the integrity folder in X’s parent theme that I am trying to customize.

<?php

// =============================================================================
// VIEWS/INTEGRITY/WP-INDEX.PHP
// -----------------------------------------------------------------------------
// Index page output for Integrity.
// =============================================================================

?>

<?php get_header(); ?>

  <div class="x-container max width offset">
    <div class="<?php x_main_content_class(); ?>" role="main">

      <?php x_get_view( 'global', '_index' ); ?>

    </div>

    <?php get_sidebar(); ?>

  </div>

<?php get_footer(); ?>

So this code would need to go to the bottom of the functions.php

/* Modify the read more link on the_excerpt() */
 
function et_excerpt_length($length) {
    return 220;
}
add_filter('excerpt_length', 'et_excerpt_length');
 
/* Add a link  to the end of our excerpt contained in a div for styling purposes and to break to a new line on the page.*/
 
function et_excerpt_more($more) {
    global $post;
    return '<div class="view-full-post"><a href="'. get_permalink($post->ID) . '" class="view-full-post-btn">View Full Post</a></div>;';
}
add_filter('excerpt_more', 'et_excerpt_more');

This final piece of code will go in the style.css to do the trick

.view-full-post-btn{
  display:inline-block;
  /*border-radius*/
  -webkit-border-radius:10px;
     -moz-border-radius:10px;
          border-radius:10px;
  padding:8px 16px;
  margin-top:10px;
  color:#454545;
  border:1px solid #d8dcdc;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:16px;
}
.view-full-post-btn:hover{
  background:#454545;
  /*transition*/
  -webkit-transition:all .3s ease;
  -moz-transition:all .3s ease;
  -o-transition:all .3s ease;
          transition:all .3s ease;
  border:1px solid #000000;
  color:#FFFFFF;
}

I’m not certain that is the correct file because each theme is broken down differently. I also looked at the CONTENT-LINK.PHP file and I do see the-content towards the bottom of the file but no entry-content excerpt or more-link. I have attached a screenshot of how the button will look once completed. The hover color transitions to pink like the log out menu item displayed in the photo.

[Rue Nel]

Hello There,

Thanks for the updates!

“I am actually looking to customize the “read more” link for the blog posts and create a “View full post” transition button with an inverted hover instead. I would also change the words “Read more” to “View full post” So in order to achieve this I need to change “the_content” to “the_excerpt”.”

This customization doesn’t need any template override from the views folder. You already have your custom filter to change the read more button. To be specific, in your code, you have a line add_filter(). To know more what is this for, you can check out the codex:

add_filter()

https://codex.wordpress.org/Customizing_the_Read_More
https://codex.wordpress.org/Plugin_API/Filter_Reference/excerpt_length

Assuming that you want to have a different styling for each stack, given with your code, we can update it and add a condition for each stack. So for example,

/* Add a link  to the end of our excerpt contained in a div for styling purposes and to break to a new line on the page.*/
function et_excerpt_more($more) {
    global $post;
    $stack = x_get_stack();

    if ( $stack == 'integrity' ) {
      return ' ... <div><a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a></div>';
    } else if ( $stack == 'renew' ) {
      return ' ... <a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a>';
    } else if ( $stack == 'icon' ) {
      return return '<div class="view-full-post"><a href="'. get_permalink($post->ID) . '" class="view-full-post-btn">View Full Post</a></div>;';
    } else if ( $stack == 'ethos' ) {
      return ' ...';
    }

}
add_filter('excerpt_more', 'et_excerpt_more');

This code is just an example of how you can have a different read more button in each of the stack.

Hope this would help.

[fantasy_5]

Hi, Rue Nel!

So, in addition to the code that will be at the bottom of the functions.php and style.css I have already listed… would I also, add the above code to the fuctions.php to get the desired results or your code to the functions.php instead of mine?

Sense I do not need to make a direct change to a template in integrity stack which file in X contains the read more link, just in case? If necessary, I can just copy the file in integrity stack to the child theme and then make my changes there. I have already added my code to the style.css and functions.php just need to change the read more link, etc. now.

[Paul R]

Hi,

You need to replace your code that reads

/* Add a link  to the end of our excerpt contained in a div for styling purposes and to break to a new line on the page.*/
 
function et_excerpt_more($more) {
    global $post;
    return '<div class="view-full-post"><a href="'. get_permalink($post->ID) . '" class="view-full-post-btn">View Full Post</a></div>;';
}
add_filter('excerpt_more', 'et_excerpt_more');

with this

/* Add a link  to the end of our excerpt contained in a div for styling purposes and to break to a new line on the page.*/
function et_excerpt_more($more) {
    global $post;
    $stack = x_get_stack();

    if ( $stack == 'integrity' ) {
      return ' ... <div><a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a></div>';
    } else if ( $stack == 'renew' ) {
      return ' ... <a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a>';
    } else if ( $stack == 'icon' ) {
      return return '<div class="view-full-post"><a href="'. get_permalink($post->ID) . '" class="view-full-post-btn">View Full Post</a></div>;';
    } else if ( $stack == 'ethos' ) {
      return ' ...';
    }

}
add_filter('excerpt_more', 'et_excerpt_more');

The original code is located at wp-content/themes/x/framework/functions/global/content.php

Thanks

[fantasy_5]

Hi, Paul R!

Thanks for your reply. Where exactly would I place the above code you created? The view button code I have already placed at the bottom of the style.css file and the code that starts with modify already exists at the bottom of the functions.php file. I tried to add your code to the bottom of the functions file in the child theme, but it returned a syntax error. I added the code below the modify code and also in place of it, but syntax error occured both times.

Also, I did view the global content.php file and was able to see the read more link there. Do I need to make changes there?

[Lely]

Hi There,

The last code suggested by Paul should go to the end of your functions.php file. You should replace the function with the same name that exists on the functions.php file.

I am not sure what you mean on the last question. Did you mean it is working already without adding it on functions.php file? Would you mind providing us with login credentials so we can take a closer look on how you implement the code? 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.

[fantasy_5]

This reply has been marked as private.

[Paul R]

Hi,

Thank you for providing your login credentials.

Sorry there was a syntax error in the code. I went ahead and fix it for you.

Plesae check – https://shopatkei.com/fashion-addict/

Thanks

[fantasy_5]

Hi, Paul R!

Thanks so much! Problem solved. 🙂

[Jade]

You’re most welcome.

[Author]

Posts