How To Integrate Viba Portfolio With Themes

Viba Portfolio will integrate nicely out of the box with WordPress default themes. If you want to use Viba Portfolio as a shortcode and use ajax to open your items then everything will work just fine.

The problem might appear when you are using the archives and single pages by breaking your theme layout because the content wrappers do not match your chosen theme.

There are two ways to resolve this;

  • creating the viba-portfolio.php file (easy solution)
  • using hooks (for advanced users/developers)

Both ways will be described using the examples from the WordPress theme Twenty Thirteen.


1. Creating the viba-portfolio.php file


Duplicate your theme’s page.php file, and name it viba-portfolio.php. It should be in the same directory as the page.php.

Edit the new file viba-portfolio.php by deleting the loop and replacing the_content() with viba_portfolio_content(). All other unnecessary stuff can be deleted too. However the wrappers used to wrap the_content() need to stay.

Wrappers for Twenty Thirteen are:

  • <div id="primary" class="content-area">
  • <div id="content" class="site-content" role="main">
  • <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  • <div class="entry-content">

page.php

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages and that other
 * 'pages' on your WordPress site will use a different template.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

			<?php /* The loop */ ?>
			<?php while ( have_posts() ) : the_post(); ?>

				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<header class="entry-header">
						<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
						<div class="entry-thumbnail">
							<?php the_post_thumbnail(); ?>
						</div>
						<?php endif; ?>

						<h1 class="entry-title"><?php the_title(); ?></h1>
					</header><!-- .entry-header -->

					<div class="entry-content">
						<?php the_content(); ?>
						<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
					</div><!-- .entry-content -->

					<footer class="entry-meta">
						<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
					</footer><!-- .entry-meta -->
				</article><!-- #post -->

				<?php comments_template(); ?>
			<?php endwhile; ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

What we need to do

  • delete the start of the loop <?php while ( have_posts() ) : the_post(); ?>
  • delete <header class="entry-header">
  • delete wp_link_pages()
  • change the_content() to viba_portfolio_content()
  • delete comments_template() if you don’t want comments
  • delete the end of the loop <?php endwhile; ?>
  • optional – you can leave the <footer class="entry-meta"> because that is only the edit link

viba-portfolio.php

<?php
/**
 * The template for displaying Viba Portfolio for Twenty Thirteen Theme
 */

get_header(); ?>

	<div id="primary" class="content-area vp-twentythirteen">
		<div id="content" class="site-content" role="main">

			<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

				<div class="entry-content">
					<?php viba_portfolio_content(); ?>
				</div><!-- .entry-content -->

			</article><!-- #post -->

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

vp-twentythirteen class was added to make additional styling easier. Some additional css styling might be needed to make it look like you want.

Some themes might use get_template_part( 'content', 'page' ); instead of the_content(). Delete that part and go into content-page.php and look for the the_content() and the wrappers that are used to wrap it and copy it in place it where the get_template_part( 'content', 'page' ); was.

The free theme that comes with this plugin is using get_template_part( 'content', 'page' );. If you go into themes page.php, content-page.php and inc/viba-portfolio.php you will see how this was done.


2. Using hooks


Just like when creating the viba-portfolio.php we need to look inside page.php to see what markup is the theme using. Insert this few lines in your theme’s functions.php file.

First unhook the default wrappers.

remove_action( 'viba_portfolio_before_main_content', 'viba_portfolio_content_wrapper', 10 );
remove_action( 'viba_portfolio_after_main_content', 'viba_portfolio_content_wrapper_end', 10 );

Then hook your own functions with your theme wrappers.

add_action( 'viba_portfolio_before_main_content', 'my_theme_content_wrapper', 10 );
add_action( 'viba_portfolio_after_main_content', 'my_theme_content_wrapper_end', 10 );

function my_theme_content_wrapper() { ?>
  <div id="primary" class="content-area vp-twentythirteen">
        <div id="content" class="site-content" role="main">
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <div class="entry-content">
<?php 
}

function my_theme_content_wrapper_end() { ?>
  				</div><!-- .entry-content -->
            </article><!-- #post -->
        </div><!-- #content -->
    </div><!-- #primary -->
    <?php get_sidebar(); 
}

Having problems integrating Viba Portfolio?


If you don’t know how to integrate Viba Portfolio with your theme we can help. Send us your theme in a zip format at [email protected] and we will send you instructions how to do that.