Forums

chrisburton

I'm not sure the right way to go about this or how to go about this in Wordpress. Essentially what I want to do is have a Portfolio page that has both Lettering and Typography pieces of my work.
example

Now, when you click on any one of these images, it will bring you to their specific page. The link would look something like this:
mydomain.com/lettering/title-1
not this: mydomain.com/portfolio/lettering/title-1

Along with that, I need that page to have a large image with 3 thumbnail images for process shots. When you click on any of those 3 thumbnails, that large image should change accordingly. Make sense?

Here is a visual

I'm not sure if I need a custom post type or exactly how to go about this. Any ideas?

Senff

I would go with custom post types for sure. If you create two types of custom posts (one called "lettering" and one called "typography"), the links would definitely be like this:

http://www.mydomain.com/lettering/example-thing
http://www.mydomain.com/lettering/another-example
http://www.mydomain.com/lettering/and-another-one
http://www.mydomain.com/typography/typo-example
http://www.mydomain.com/typography/second-example
http://www.mydomain.com/typography/final-example
etc. etc.

Your portfolio page can be created so that it just lists posts from those custom post types.

Personally, I like the plugin "Custom Post Type UI", which lets you create custom post types very easily. If you want, you can have both types to use different templates too. Normally, a custom post type will just use the default archive.php and single.php as their templates. However when you just drop archive-lettering.php and single-lettering.php in your directory, Wordpress will use those files for those types, so you can customize the templates for those.

chrisburton

@senf Thank you! I'm going to take a look at that and see what I can come up with. I really appreciate it

chrisburton

@senf Wait, how do I attach the custom post types to my Portfolio page I created in the backend?

Edit: Or what I mean is, how can I add the content from both custom post types to my Portfolio page? I would prefer that they're not separated content. Meaning, if I add something to Typography, it will show up right next to a Lettering piece. Example show above with thumbnails.

jknetdesign

Get the plugins Advanced Custom Post Type and Simple Custom Fields. Add this code to your functions.php

//Custom Post Type
function ucc_pre_get_posts_filter( $query ) {
  global $wp_query;
 
  if ( !is_preview() && !is_admin() && !is_singular() && !is_404() ) {
    if ($query->is_feed) {
    /* As always, handle your feed post types here. */
    } else {
      $my_post_type = get_query_var( 'post_type' );
      if ( empty( $my_post_type ) ) {
        $args = array(
          'public' => true ,
          '_builtin' => false
        );
        $output = 'names';
        $operator = 'and';
 
        /* Get all custom post types automatically. */
        $post_types = get_post_types( $args , $output , $operator );
        /* Or uncomment and edit to explicitly state which post types you want. */
        // $post_types = array( 'event' , 'location' );
 
        /* Add 'link' and/or 'page' to array() if you want these included:
         * array( 'post' , 'link' , 'page' ), etc.
         */
        $post_types = array_merge( $post_types , array( 'post' ) );
        $query->set( 'post_type' , $post_types );
      }
    }
  }
 
  return $query;
}
add_action( 'pre_get_posts' , 'ucc_pre_get_posts_filter' );


if ( ! function_exists( 'post_is_in_descendant_category' ) ) {
    function post_is_in_descendant_category( $cats, $_post = null ) {
        foreach ( (array) $cats as $cat ) {
            // get_term_children() accepts integer ID only
            $descendants = get_term_children( (int) $cat, 'category' );
            if ( $descendants && in_category( $descendants, $_post ) )
                return true;
        }
        return false;
    }
}

Create a template for that page you want to customize like this:
Take page.php and rename it custom-page.php
Give this page your template name:
in this page replace <?php get_template_part( 'content', 'page' ); ?>

with this snippet pulled from custom-page.php:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
		<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-link">' . __( 'Pages:', 'toolbox' ), 'after' => '</div>' ) ); ?>
	</div><!-- .entry-content -->
</article><!-- #post-<?php the_ID(); ?> -->

This next section depends on how many fields you use, what type of fields they are, and what you're classes are called:

replace:

<?php the_content(); ?>

with the fields code:

<?php $args = array('post_type' => 'board-members', 'orderby'  => 'date', 'order' => 'ASC', 'numberposts' => '50');

$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
  while ($my_query->have_posts()) : $my_query->the_post(); ?>
 
  <div class="memberholder">
      <img src="<?php echo get_field('photo') ?>" />
        <span class="member_desc"><?php echo get_field('information') ?></span>
       
     </div>
        
  <div class="clear"></div>                  
   
       <?php
  endwhile;
}
wp_reset_query();  // Restore global post data stomped by the_post().
?>

My field is called photo: <img src="<?php echo get_field('photo') ?>" />
And my text area is called: <?php echo get_field('information') ?>
You can see how those echos are wrapped in my classes.

I used this to set up a board members page where the client can edit info and add new board members without breaking the layout.

NOTES ON THE GENERAL SETUP
In Dashboard
Go to Settings
Add new Name
Select Title > Visual Editor

Replace Entries with Members (or whatever for you)

NOW GO TO CUSTOM FIELDS to set up custom field for that Custom Post Type
Add New
Then add fields > click in Filed Name (self populates) > select image for Field Type

LOCATION
Post Type is equal to board-members (or whatever for you)
select > any

GO TO MEMBERS and add members (or whatever for you)

This changed my whole world of WordPress. You can do anything in the content of a page. Use absolute positioning or an array of classes.

http://demo.elcaminorealfutbol.org/our-board/

chrisburton

@jknetdesign Mind cleaning that post up a little so I can read it better? Just throw your code between the pre, code tags like this:

<pre><code>Put code here</ code></ pre>

jknetdesign

Get the plugins Advanced Custom Post Type and Simple Custom Fields. Add this code to your functions.php

//Custom Post Type


function ucc_pre_get_posts_filter( $query ) {
global $wp_query;

if ( !is_preview() && !is_admin() && !is_singular() && !is_404() ) {
if ($query->is_feed) {
/* As always, handle your feed post types here. */
} else {
$my_post_type = get_query_var( 'post_type' );
if ( empty( $my_post_type ) ) {
$args = array(
'public' => true ,
'_builtin' => false
);
$output = 'names';
$operator = 'and';

/* Get all custom post types automatically. */
$post_types = get_post_types( $args , $output , $operator );
/* Or uncomment and edit to explicitly state which post types you want. */
// $post_types = array( 'event' , 'location' );

/* Add 'link' and/or 'page' to array() if you want these included:
* array( 'post' , 'link' , 'page' ), etc.
*/
$post_types = array_merge( $post_types , array( 'post' ) );
$query->set( 'post_type' , $post_types );
}
}
}

return $query;
}
add_action( 'pre_get_posts' , 'ucc_pre_get_posts_filter' );


if ( ! function_exists( 'post_is_in_descendant_category' ) ) {
function post_is_in_descendant_category( $cats, $_post = null ) {
foreach ( (array) $cats as $cat ) {
// get_term_children() accepts integer ID only
$descendants = get_term_children( (int) $cat, 'category' );
if ( $descendants && in_category( $descendants, $_post ) )
return true;
}
return false;
}
}

Create a template for that page you want to customize like this:
Take page.php and rename it custom-page.php

Give this page your template name:
in this page replace

<?php get_template_part( 'content', 'page' ); ?>

with this snippet pulled from custom-page.php:


<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
		<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-link">' . __( 'Pages:', 'toolbox' ), 'after' => '</div>' ) ); ?>
	</div><!-- .entry-content -->
</article><!-- #post-<?php the_ID(); ?> -->

This next section depends on how many fields you use, what type of fields they are, and what you're classes are called:

replace:

<?php the_content(); ?>

with the fields code:


<?php $args = array('post_type' => 'board-members', 'orderby'  => 'date', 'order' => 'ASC', 'numberposts' => '50');

$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
  while ($my_query->have_posts()) : $my_query->the_post(); ?>
 
  <div class="memberholder">
      <img src="<?php echo get_field('photo') ?>" />
        <span class="member_desc"><?php echo get_field('information') ?></span>
       
     </div>
        
  <div class="clear"></div>                  
   
       <?php
  endwhile;
}
wp_reset_query();  // Restore global post data stomped by the_post().
?>

My image field is called photo:

<img src="<?php echo get_field('photo') ?>" />

And my text area is called information:

<?php echo get_field('information') ?>

You can see how those echos are wrapped in my classes.

I used this to set up a board members page where the client can edit info and add new board members without breaking the layout.

NOTES ON THE GENERAL SETUP
In Dashboard
Go to Settings
Add new Name
Select Title > Visual Editor

Replace Entries with Members (or whatever for you)

NOW GO TO CUSTOM FIELDS to set up custom field for that Custom Post Type
Add New
Then add fields > click in Filed Name (self populates) > select image for Field Type

LOCATION
Post Type is equal to board-members (or whatever for you)
select > any

GO TO MEMBERS and add members (or whatever for you)

This changed my whole world of WordPress. You can do anything in the content of a page. Use absolute positioning or an array of classes.

http://demo.elcaminorealfutbol.org/our-board/

jknetdesign

I did what you suggested. Here's the image call that didn't show up.

 <img src="<?php echo get_field('photo') ?>" />

jknetdesign

If you're interested in this method give me another suggestion like email or JS Fiddle and I'll get back to you tomorrow.

chrisburton

All right. I figured everything out except one thing. Thanks @senff

How can I add ALL post_thumbnails from both Custom Post Types into my Portfolio template/page?

Senff

I think you can do a query to show only posts from those two types (if that's what you meant):

query_posts( array( 'post_type' => array( 'lettering', 'typography'),  'posts_per_page' => -1) );	

while ( have_posts() ) : the_post();
   echo '<img src="<?php echo get_field('photo') ?>" />';  // [OR WHATEVER YOU WANT TO PLACE HERE FOR EACH POST]
endwhile;
		
wp_reset_query();

chrisburton

@senf

I ended up using the code below. I appreciate all your help, man.

<?php
$loop = new WP_Query( array( 'post_type' => array('lettering', 'typography')&'post_status=publish'));
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div><?php echo the_post_thumbnail('thumbnail'); ?></div>
<?php endwhile; ?>

Senff

@christopherburton Damn man, there's TWO f's in my name!!! You keep making the same mistake! ;)

chrisburton

@Senff Ha! Sorry about that. I got everything worked out perfectly though. Just need to figure out the javascript/jQuery part to hiding those images. I really hate development sometimes.

Senff

I put this together fairly quickly, I'm sure the script can be done better, but it's a start: http://jsfiddle.net/senff/9Xwhj/

chrisburton

@Senff Thank you!!! #lifesaver

treehouse : what would you like to learn today?

Forums

[Solved] Custom Post Type?