Grow your CSS skills. Land your dream job.

Custom Post Type?

  • # June 4, 2012 at 8:24 am

    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?

    # June 4, 2012 at 1:30 pm

    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.

    # June 4, 2012 at 9:40 pm

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

    # June 4, 2012 at 10:56 pm

    @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.

    # June 5, 2012 at 12:02 am

    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:

    >

    < ?php the_title(); ?>





    < ?php the_content(); ?>
    < ?php wp_link_pages( array( 'before' => '' ) ); ?>

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



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





    < ?php
    endwhile;
    }
    wp_reset_query(); // Restore global post data stomped by the_post().
    ?>

    My field is called 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/

    # June 5, 2012 at 12:45 am

    @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:

    Put code here

    # June 5, 2012 at 1:06 am

    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:


    >

    < ?php the_title(); ?>





    < ?php the_content(); ?>
    < ?php wp_link_pages( array( 'before' => '' ) ); ?>


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



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





    < ?php
    endwhile;
    }
    wp_reset_query(); // Restore global post data stomped by the_post().
    ?>

    My image field is called 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/

    # June 5, 2012 at 1:12 am

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

     
    # June 5, 2012 at 1:14 am

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

    # June 5, 2012 at 7:11 am

    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?

    # June 5, 2012 at 9:12 am

    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 ''; // [OR WHATEVER YOU WANT TO PLACE HERE FOR EACH POST]
    endwhile;

    wp_reset_query();
    # June 5, 2012 at 9:16 am

    @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();
    ?>
    < ?php echo the_post_thumbnail('thumbnail'); ?>

    < ?php endwhile; ?>
    # June 5, 2012 at 9:31 am

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

    # June 5, 2012 at 9:39 am

    @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.

    # June 5, 2012 at 10:33 am

    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/

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".