Creating a custom post type for specific styling

Hey. How do I create a custom post type?

My intention is to set the CSS for the custom post type to be fullwidth, etc.; without a sidebar, so it's distinctive from other post types

At this stage, i'm just getting into the creation process. I would appreciate some direct explanation * and * some links, if possible :slight_smile: Thank you so much

  • Sajid

    Hi @Griffin,

    Hope you are doing good today :slight_smile:

    Using WordPress custom post type is a great idea to extend it from just a simple blogging platform. However, I did not get your point, you can use CSS code to make some posts to be fullwidth targeting with category archive CSS (depends on theme) class.

    As an elite member you can use our CustomPress plugin that allows you to create unlimited post types right from your dashboard. It also have easy UI to create custom fields and custom categories.
    https://premium.wpmudev.org/project/custompress/

    If you are not a fan of using plugins for everything then you can register post types via code as described on this blog post.
    https://premium.wpmudev.org/blog/creating-content-custom-post-types/

    Hope that helps! If you still need help, feel free to post a reply.

    Take care and have a nice day :slight_smile:

    Kind Regards,
    Sajid J

  • Griffin

    It's like this:

    I'm using the 'X' theme, which is awesome.

    I wanted to change the post display on the theme from 'container' to a more fullwidth, across-the-screen kind of look. To accomplish this, they gave me some functions.php code, which changed * all * posts to that style.

    I realized that I might want to also have the 'container' style posts (background, black borders around middle-of-screen content; the normal kind) as well as the constant forced fullwidth.

    So, I was considering, would it be a workable solution for me to develop a custom post type that had the visual parameters I wanted.

    I am just learning the in's and out's of CSS, customization with php and the like. I'm really bright & have a little background in programming, so i'm getting the gist of it. Just filling in the holes right now.

    So. The objective is to have multiple types of visual styling that I can choose.

    Perhaps I don't need a custom post type for this. Perhaps that is an addition for a later day.

    Mmm. Okay. Would you please explain the distinction between CSS customization to change display and a full-on .php change?

    For example; I was given this code; to put into the 'views' subfolder of the X-Theme; which controls the way global changes are applied to a particular template, in this case, the posts.

    $fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );

    ?>

    <?php get_header(); ?>
    <?php if ( x_get_content_layout() != 'full-width' ) : ?>
    <div class="x-container max width offset">
    <?php endif; ?>
    <div class="<?php x_main_content_class(); ?>" role="main">

    <?php while ( have_posts() ) : the_post(); ?>
    <?php x_get_view( 'integrity', 'content', get_post_format() ); ?>
    <?php x_get_view( 'global', '_comments-template' ); ?>
    <?php endwhile; ?>

    </div>

    <?php if ( $fullwidth != 'on' ) : ?>
    <?php get_sidebar(); ?>
    <?php endif; ?>
    <?php if ( x_get_content_layout() != 'full-width' ) : ?>
    </div>
    <?php endif; ?>

    <?php get_footer(); ?>

    It sort of makes sense to me; so i'm sure it's easy for You :wink:

    Why did they give me that code to put into the php as compared to CSS customization?

    And what are my options for creating 'multiple' layouts of standard posts? example being -

    #1 - http://peterfae.intothemythica.com/2015/11/26/goddess-temple-gratitude-and-thanks/
    (this is an example of the fullwidth post style that was determined in the php above)

    #2 - http://cl.ly/image/1o0j0X2R343J
    (this is an example of a standard post with a sidebar)

    What are my options for shifting between those visual presentations? And why was I given php code if CSS would suffice?

  • Sajid

    Hi @Griffin,

    Hope you are doing good today :slight_smile:

    Well, you asked a lots of questions in one go. Let me try answer them one by one (I am sorry if I miss something).

    So, I was considering, would it be a workable solution for me to develop a custom post type that had the visual parameters I wanted.

    If you are looking to create multiple styles with custom post type then you are wrong. You can not do that, you can't set different layout or style by custom post type. For this purpose you might need more knowledge of WordPress, PHP and of course CSS. That's a long journey.

    If you go this way, then you have to create your own page builder type thing from where you can create change style of each post your self. Using this, you can select/set different layouts and styles. Remember you still have to design with CSS or Photoshop first.

    So, why do that when you can get one already, we have awesome website builder tool using which you can do this without writing a single PHP code, just a bits of CSS (in some cases). Excited about it ? Then go to this URL and check yourself by picking any child theme and customize yourself feature.
    https://premium.wpmudev.org/projects/category/themes/

    However, if you still want to go your way then here are answers of your rest of questions.

    Mmm. Okay. Would you please explain the distinction between CSS customization to change display and a full-on .php change?

    You can do mostly, most of things with just CSS without messing with child theme or .php files. If you need basic CSS then I will recommend you using just CSS instead of .php option.

    For example, if you want to make a specific post full width, then you can just use CSS code like below (I am using TwentyFifteen here but I am sure x-theme might have this option too).

    .postid-4090 div#sidebar {
        display: none;
    }

    Using, same approach you can set background images, colors etc...

    But yes of course you can do it with WordPress too. Just create a template file and name it single-4090.php. Now WP will load this template for this specific post having ID number 4090.

    If you want to make it dynamic than again, you require a full fledge page builder like upfront to create new post change its style/layout and voila. No need to go into files and creating a separate template for each of your post.

    Now, why they gave you php code instead, I am not really sure and I am also not much familiar with their framework so can't say what it will do.

    But according to my limited knowledge WordPress don't have template option for posts by default. Using the PHP code they gave you, you can swtich between fullwidth and sidebar template of posts by using custom fields.

    There you can find a meta box somewhere in your post add/edit screen from where you can toggle between use fullwidth or sidebar template option (my assumption).

    Or create a new custom field and set its value either (true/false or 1/0). True for fullwidth and false for default.

    Hope that helps! If you still need assistance, feel free to post a reply.

    Take care and have a nice day :slight_smile:

    Kind Regards,
    Sajid J

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.