[robert vParticipant]

Hi,

I’m making a website for a client. The stack i’ve used is Renew, and im using a child theme.
They want to use ’tiles’ for their examples, at the bottom of each specific services page.

I’ve set this up via blogposts now, using a plugin for the tiles.
Examples in blue tiles: http://studiohetzwarteschaap.nl/testsite3/trainingen/schrijven/
Examples in pink tiles: http://studiohetzwarteschaap.nl/testsite3/trainingen/spreken/
Examples in grey tiles:http://studiohetzwarteschaap.nl/testsite3/consultancy/

Now, the problem with blogposts is this:
I cannot exclude these examples from the big blogpost pile. So the examples also show under news, and category archive. The client wants this separated.
I also cannot give each category a different name, for it to show as page title. (it will still be ‘Nieuws’ because i called the blogposts this way)

So i though about using the portfolio, although there wil be tekst only, and no images or video’s.
Now the problem that i face is that i cannot seem to get the portfolio items for the categories on their specific pages… I can only make a portfolio page for that category, without any tekst on it.

In addition i would also like to style the ’tiles’ differently for the different portfolio categories. But i’ll find a way to make that work.

Can you send me in the right direction for the portfolio items on a page? (or adding Layout with VC on a portfolio template page?)

Thanks in advance!

[ZeshanMember]

Hi Robert,

Thanks for writing in!

Have you tried using the [recent_posts] shortcode yet? You can use to to display the portfolio items on any page. You can find demos on recent posts shortcode here: http://theme.co/x/demo/integrity/1/shortcodes/recent-posts/

If you want to show the text/excerpt, you can review this thread: https://theme.co/x/member/forums/topic/adding-excerpt-to-recent-posts/page/4/#post-103598

Hope this helps. 🙂

Thank you.

[robert vParticipant]

The recent posts via VC works, tried the shortcode several times, but that doesn’t seem to understand that its supposed to show portfolio items. Type=”portfolio” didn’t work out.

So that worked,

– is there a way to show max 8 portfolio items in stead of 4?
And i disabled the sharing buttons.
– Is there a way to place the sidebar in that void?
– And is there a way to show portfolio navigation, to skip to the next portfolio item?

It doesn’t seem to be functional in this theme? I came across the same problem for the blog posts, which i solved by using a plugin. Am i missing some setting for this?

Thanks for the response!
You’ve been really helpful already! 🙂

[Paul RModerator]

Hi Robert,

1. You can use the offset to show 8 items.

[recent_posts count="4" type="portfolio"]
[recent_posts count="4" type="portfolio" offset="4"]

I am sorry I am not sure about these queries, can you provide us more information.

– disabled the sharing buttons.
Can you tell us which sharing buttons you want to disable and the url of the page where it is visible.

– Is there a way to place the sidebar in that void?
Can you which page you would like to have a sidebar.
You can set a template for your page individually under Page attributes.
http://screencast.com/t/4FpfKORsdQDh

– And is there a way to show portfolio navigation, to skip to the next portfolio item?
Can you tell us where you would like the navigation to appear, You can try to enable breadcrumbs under header in the cusotmizer.

Hope this helps.

[robert vParticipant]

Hi!

Thanks, i’ll use the offset thingy to create 8 items to be shown!

– disabled the sharing buttons.
I already did, it’s the social sharing in the portfolio item which i turned off. Only now there is a huge gap on the right side, and i cannot fill it with a sidebar.

This is the portfolio page:
http://studiohetzwarteschaap.nl/testsite3/voorbeelden/

And if you click one of the items, you’ll see the sidebar-gap.
Can i set a sidebar with the templates on a portfolio item ? Or make it full width like the other pages?

(ill check the link you’ve sent me)

I don’t use breadcrumbs on this site:
– the site is too small
– it will take me too much time to translate everything shown in the path.

The kind of navigation i’d like to use is show here:

http://studiohetzwarteschaap.nl/testsite3/nieuws/

Just click one item, and its at the bottom.
It don’t need to look exactly like this, but there should be a way to navigate through the portfolio items, otherwise people end up ‘stuck’ in a portfolio item. (something like this can cause a higher bounce rate.)

One more thing popped up: could you tell me in which file the ‘searchhhh’ (placeholder for search in mobile menu) is located? I can’t seem to find it in header or navbar php files, where i was expecting it to be.

Thanks for your rapid support by the way!

[robert vParticipant]

Hi!

I’ve checked the link about the Page attributes, but thats not what i meant. The portfolio page has the portfolio option selected to display the items but i want to add the sidebar (or portfolio navigation with the portfolio item set to full width) on the portfolio item.

thanks in advance!

[robert vParticipant]

When i check a portfolio items code, i see that the whole

wp-post-navigation class isn’t shown below the portfolio item.

If you go here:

http://studiohetzwarteschaap.nl/testsite3/voorbeelden/nvao-accreditatie/

and check below the tekst, you can see that the wp-post-navigation class is blanc.

when i take out all of my custom css, the problem remains. also when i switch to the main theme instead of the child, the field stays empty.

cheers

[robert vParticipant]

I’ve testen with a different stack (ethos) and on Ethos, the portfolio navigation is visible.

[ZeshanMember]

Hi Robert,

Thanks for writing in!

#1: To reduce the gap in between the portfolio items on portfolio archive page, add following under Custom > CSS in the Customizer:

.post-type-archive-x-portfolio .hentry {
    margin-top: 40px;
}

#2: The space on the single portfolio item page is the entry info area where the project link, social icons and portfolio keywords/tags go (see: http://prntscr.com/5g1gez). However, you can add following code under Custom > CSS in the Customizer to make the single portfolio item full-width:

@media (min-width: 768px) {
    .single .x-portfolio .entry-info {
        width: 100%;
    }

    .single .x-portfolio .entry-extra {
        position: absolute;
        right: 0;
        width: auto;
    }
}

#3: Upon checking, the portfolio pagination/navigation is already showing in the archive page you’ve shared (see: http://prntscr.com/5g1iu6, page link: http://studiohetzwarteschaap.nl/testsite3/voorbeelden/)

#4 Regarding the next portfolio link, you can try adding following code in your child theme’s functions.php file:

add_action ('the_content', 'add_next_portfolio_item_link' );

function add_next_portfolio_item_link ( $content ) {
   if ( x_is_portfolio_item() ) {
      $posts = '<a href="' . get_permalink( get_next_post()->ID ) . '">Next Portfolio Item »</a>';
      return $content . $posts;
   } else {
      return $content;
   }
}

And yes, ethos by default contains post navigation as it’s more a magazine style stack.

Hope this helps. 🙂

Thank you.

[robert vParticipant]

OK that works now!

Only, the navigation is both on the left.

i’d like it to have the class: wp-post-navigation-pre and wp-post-navigation-next (from the wp posts navigation plugin)

so it looks like:

http://studiohetzwarteschaap.nl/testsite3/b1-schrijven-waar-gaat-dat-over/

i’ve tried a few things, but that didn’t work.
The class belongs to a plugin. Can i send something (like this) from functions to take over the styling from a plugin?

Or should i do the same thing for blog (nieuws), and then style the navigation to the left or right, so i’m no longer depending on a plugins stylesheet?

I want them to both look the same.
Thanks a million! (after that its finished :))

[Paul RModerator]

Hi,

To fix it, please replace the code in functions.php to this.

add_action ('the_content', 'add_next_portfolio_item_link' );

function add_next_portfolio_item_link ( $content ) {
   if ( x_is_portfolio_item() ) {
      $posts = '<div class="wp-post-navigation-next"><a href="' . get_permalink( get_next_post()->ID ) . '">Next Portfolio Item</a></div>';
      return $content . $posts;
   } else {
      return $content;
   }
}

Please do the same for previous link.

Hope this helps. 🙂

[robert vParticipant]

This worked like a charm, many thanks!

Now, i’d like to do 2 more things before i’m going to wish you happy holidays 🙂

– Can i do the same with posts? (In that way i can get rid of the nav plugin all together.)
(i tried some changes with help from the wp codex, but i think im missing some fundamentals/braincells. Still learning)
– How can i make sure the << previous button isn’t shown on the last (published) blogpost (or next >> on first blogpost)?

thanks in advance!!

[ZeshanMember]

Hi Robert,

#1: Yes, you can add replace the previous code from your functions.php file with following:

add_action ('the_content', 'add_next_portfolio_item_link' );

function add_next_portfolio_item_link ( $content ) {
   if ( x_is_portfolio_item() || is_singular('post') ) {
      if ( x_is_portfolio_item() ): $name = "Next Portfolio Item";
      elseif ( is_singular('post') ): $name = "Next Post";
      else: $name = ""; endif;
      $posts = '<div class="wp-post-navigation-next"><a href="' . get_permalink( get_next_post()->ID ) . '">' . $name . '</a></div>';
      return $content . $posts;
   } else {
      return $content;
   }
}

#2: This requires more detailed changes to the code, regretfully that will fall beyond the scope of support we can offer. If you need more in depth changes, You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[robert vParticipant]

Thanks a bunch!

And happy holidays to you and the team!

[Paul RModerator]

You’re welcome and Happy holidays to you!

[Author]

Posts