Skip to content

Create a visually appealing page in WordPress that showcases your "Custom Post Type" posts in an engaging masonry layout, offering an attractive and dynamic presentation of your content in WordPress websites.

License

Notifications You must be signed in to change notification settings

dina-the-developer/custom-post-type-with-masonry-layout-page-in-wordpress

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Custom Post Type with masonry layout page in WordPress

Create a visually appealing page in WordPress that showcases your "Custom Post Type" posts in an engaging masonry layout, offering an attractive and dynamic presentation of your content in WordPress websites.

Instructions

Follow the steps below to implement the custom post type and page template in your WordPress project:

Step 1: Create the Custom Post Type

Open your theme's functions.php file or create a custom plugin. Add this code snippet below to register the "Resources" custom post type.


function Resources() { //name of your choice

  $labels = array(
    'name'               => __( 'Resources', 'post type general name' ),
    'singular_name'      => __( 'Resource', 'post type singular name' ),
    'add_new'            => __( 'Add New', 'Resource' ),
    'add_new_item'       => __( 'Add New Resource', 'avx' ),
    'edit_item'          => __( 'Edit Resource', 'avx' ),
    'new_item'           => __( 'New Resource', 'avx' ),
    'all_items'          => __( 'All Resources', 'avx' ),
    'view_item'          => __( 'View Resource', 'avx' ),
    'search_items'       => __( 'Search Resources', 'avx' ),
    'not_found'          => __( 'No Resources found', 'avx' ),
    'not_found_in_trash' => __( 'No Resources found in the Trash', 'avx' ), 
    'parent_item_colon'  => '',
    'menu_name'          => 'Resources'
  );

  $args = array(
    'labels'        => $labels,
    'description'   => 'List of resources under this Custom Post Type.',
    'public'        => true,
    'menu_position' => '',
    'supports'      => array( 'title', 'editor', 'author', 'thumbnail', 'name_admin_bar', 'exclude_from_search', 'post-formats', 'custom-fields', 'revisions'),
    'has_archive'   => true,
    'show_in_menu' => true,
    'menu_icon' => 'dashicons-buddicons-groups',
    'taxonomies' => array('category', 'post_tag')
  );
  
  register_post_type( 'Events', $args);

}
  
add_action( 'init', 'Events' );

Save the file.

Step 2: Create the Page Template

In your theme directory, create a new file named template-resources.php. Copy the code from the template-resources.php file to the template you've created. Save the file.

Step 3: Assign the Page Template

  • Login to your WordPress admin dashboard.
  • Navigate to Pages and click on Add New to create a new page.
  • Enter a title for the page (e.g., "All Resources").
  • In the Page Attributes section on the right-hand side, locate the Template dropdown.
  • Select the All Resources template from the dropdown.
  • Publish or update the page.

Step 4: View the All Resources Page

Visit the permalink of the page you created in Step 3 to see the list of all the "Resources" posts displayed using the page template.

Customize and Extend

Feel free to customize and extend the code to fit your specific requirements. You can modify the labels, add additional fields to the custom post type, or style the page template according to your design preferences.

Requirements

WordPress 4.7 or later and Masonry JS

Contributing

Contributions are welcome! If you have any improvements or suggestions, please feel free to submit a pull request.

License

This project is licensed under the MIT License. Feel free to use, modify, and distribute the code as per the terms of the license.

Credits

WordPress - The open-source content management system. OpenAI - The organization behind ChatGPT, which provided assistance in generating this README file. Please note that this README file is generated by an AI model and may require human review and editing for accuracy and completeness.

Disclaimer

Please note that this script is provided as-is without any warranty. Use it at your own risk.

Make sure to update the repository URLs, project description, and other relevant information accordingly. Additionally, if you have any specific instructions or additional sections you want to include, feel free to customize the README to suit your needs.

About

Create a visually appealing page in WordPress that showcases your "Custom Post Type" posts in an engaging masonry layout, offering an attractive and dynamic presentation of your content in WordPress websites.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages