Editing Post Page Design with PHP

[raphaelz]

Hello guys,

currently I am working on my portfolio website and I want to build it with the blog feature of Wordpress. Because of that I need to rearrange the way Pro arranges the page components. I want it like this:

I start with Breadcrumps, then there will be a Revolution slider full width. after this the post data will be floating left and right, and then the full text.

I think this is relatively easy to do with editing the PHP files of Pro and using ACF for the slider. I know you can’t support such code intensive project but I would love to get some help with starting this:

I already installed a child theme and made a backup. Could you tell me which files I need to copy from my parent theme to start editing the code for my post page? I am using the Renew stack.

Thank you!

[ruenel]

Hello There,

Thanks for writing in!

The post page is displayed by the wp-single.php file. Since you are using renew stack, you can start editing the file for the renew stack. Since you have your child theme active and ready, please follow the following steps below:
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/RENEW/WP-SINGLE.PHP
// -----------------------------------------------------------------------------
// Single post output for Renew.
// =============================================================================

$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );

get_header();

?>

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

      <?php while ( have_posts() ) : the_post(); ?>
        <?php x_get_view( 'renew', 'content', get_post_format() ); ?>
        <?php x_get_view( 'global', '_comments-template' ); ?>
      <?php endwhile; ?>

    </div>

    <?php if ( $fullwidth != 'on' ) : ?>
      <?php get_sidebar(); ?>
    <?php endif; ?>

  </div>

<?php get_footer(); ?>

Please do not forget to add anything with your modifications in it

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

You will have to create the folder path because it does not exist yet. Please keep in mind that this is only for you start your modifications.

Thanks for your understanding.

[raphaelz]

Thanks a lot this is what I was looking for. I start to make it work right now. The design is nearly done. But currently I have one additional question coming up:

I’am struggling right now integrating The Grid into my _index.php file so that archives, searches or categories got the same structure. Could you kindly give my a suggestion what I am doing wrong?

This is the code I am working with:

<?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(); ?>

and in the documentation of The Grid it is mentioned that replacing everything between the while functions with this code (Documentation)

The_Grid('My Grid Name', true); // where true is for template mode

(I replaced the Grid name with a empty grid with my skin settings). But I get an error that nothing could be found and this message is looped indefinitely - so something is wrong with my conditions, right?

I know this is kind of out of your scope of support but I would really appreciate it, if you could make a brief suggestion or tip where my mistake is.

Have a wonderful day!
Raphael

[paul.r]

Hi Raphael,

You can try this code instead.

<?php

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

?>

  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <?php The_Grid('My Grid Name', true);  ?>
    <?php endwhile; ?>
  <?php else : ?>
    <?php x_get_view( 'global', '_content-none' ); ?>
  <?php endif; ?>



<?php pagenavi(); ?>

Make sure to replace My Grid Name

Hope that helps.

[raphaelz]

Hey Paul,

I am very thankful for your help! Unfortunately I already tried this code and it creates the loop I mentioned:

The page won’t stop loading and creating this error messages.

Do you have an idea why?

Thank you!

Raphael

[thai]

Hello Raphael,

Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[raphaelz]

Hey @thai

Thanks for writing in. I definitely consider writing your custom development team for this. I am very grateful for your help at this point. For this regard I do have some issues I think you can help me with:

On my website I added a new font which works works perfectly, but I do have problems implementing the font size globally for my headline tags. In my theme-options I added this code:

.h1, .h2, .h3, .h4, .h5, .h6, .heading {
  
  font-family: 'glacial_indifference' !important;
  font-size: 1.1em !important;

} 

I want a kind of minimalistic design so I only use 1 font and 1 font size. I edited the font–size in the general stack settings to 1.1em. But when I use the h2 tag for example the stack implements a font-size: 285.7% style to my site which I do not added myself. You can take a look at this happening here.

Do I need to fix that within the CSS Files of the theme and if so in which file do I find these?

This also happens for links I want to change. Even after addressing all .a classes in the global css I still have links that do not look like I want them to. Why is that?

Thanks for your help, again!

[jade]

Hi there,

The code above did not work when you target an h2 element because the code will target elements with those classes and not the heading elements. So kindly update the code to:

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6, .heading {
  font-family: 'glacial_indifference' !important;
  font-size: 1.1em !important;
}

As for the links, try also targetting the <a> element itself and not through a class just like above.

You can find more information on how to target a CSS element through CSS here:

https://www.w3schools.com/cssref/css_selectors.asp

Hope this helps.