How to add Cornerstone capability to Portfolio main page

[metrostar]

Hello I got the tutorial on how to add text / images etc above portfolio items on the main portfolio page. But how would I style it with cornerstone or be able to use shortcodes (x_content_band or content_band etc)

I tried the below code on this page: https://pinpointpromo.staging.wpengine.com/our-work/ and it just prints the exact code. I have the child theme installed, Pro theme

[content_band style="color: #efefef;" bg_image="/wp-content/uploads/2015/07/TheExperience_Pic1.jpeg" bg_color="#ccc" parallax="false" inner_container="true" style="margin-top: 0; margin-bottom:0;" padding_top="100px" padding_bottom="60px"]
<div align="left">
[custom_headline style="margin-top: 0; margin-bottom:0; color: #dc1e34;" level="h1" looks_like="h2"]THE EXPERIENCE[/custom_headline]
</div>
[gap size="60px"]
We’re big dreamers and serious thinkers with some remarkable skills. We’re funny when appropriate and seriously focused when we need to be. We don’t mind getting our hands dirty or doing the heavy lifting. In fact we love it. It’s this philosophy and balance that drives us to deliver a remarkable experience to companies and create such a positive impact that it transforms their business—and this is when the deep relationships that we love start to grow into years of mutual success. Our passion for that customer experience overflows into helping our clients develop and deliver a remarkable experience to their customers.

We reframe every challenge as an opportunity. We see the glass half-full. We think creativity and passion can solve any problem, big or small. We’re big believers that if you’re not having fun doing what you’re doing, you should stop doing it. (We think it’s crazy that people actually consider what we do “work.”)

We focus on WHY we do what we do and HOW we go about actually doing it, not on WHAT we sell. Great businesses are built on great customer experiences, and we make those great experiences happen.

 [/content_band]

[christopher]

Hi there,

The functionality which you are after is extending the Portfolio Layout Page Template which is considered as a customization and is outside of our support scope. We will not be able to give you the code to maintain and support in the future, but we will guide you through the customization which you will do yourself.

To add the Builder functionality to the page template you will need to extend the Portfolio Layout view. To do so you need to know which stack you are in. You can go to Pro > Launch > Theme Options and at the top section you will see which stack you are in.

Let’s say you use the Integrity stack, then you will need to install the Child Theme of the Pro and add a file to the directory below:

themes/pro-child/framework/views/integrity/template-layout-portfolio.php

If you use another stack you will change integrity with the name of the stack. If you do not have such directories on your child theme you should create one.

After that you will need to add the code below to template-layout-portfolio.php:

<?php

// =============================================================================
// VIEWS/INTEGRITY/TEMPLATE-LAYOUT-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Portfolio page output for Integrity.
// =============================================================================

?>

<?php get_header(); ?>

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

    	    <?php while ( have_posts() ) : the_post(); ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <?php x_get_view( 'global', '_content', 'the-content' ); ?>
      </article>

    <?php endwhile; ?>


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

    </div>

    <?php get_sidebar(); ?>

  </div>

<?php get_footer(); ?>

The code above is actually a copy of the portfolio layout template with the addition of the_content template hook which will bring whatever you add in the builder above the portfolio listing.

So now you can go to the builder and add whatever you like there and it will be shown on the page.

It is recommended that you backup your website completely and update the theme to version 1.2.6 before applying the customization.

For more detailed information regarding the customization of the theme I suggest that you take a look at articles below:

Best Practices | Themeco Docs

https://theme.co/apex/forum/t/customizations-actions-and-filters-in-x/208

For more information about the WordPress Page Templates kindly read the article below:

https://developer.wordpress.org/themes/template-files-section/page-template-files/

Hope it helps.

[metrostar]

Hi thank you does this apply to Ethos as well? I would love to make this happen today thanks so much

[metrostar]

OK super close just 2 visible issues: https://pinpointpromo.staging.wpengine.com/our-work/

1. How can I set the page template to be no container, header footer so I can get full extension of content
2. how can I add a bit of padding below the blocks to the page #'s arent butting up to footer color

[christian]

Hey @metrostar,

I’m sorry but this would require further custom development. For that, you will need to hire a web developer.

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.

Thank you for your understanding.