How to Create Post Cards in the Woomen Theme

How to Create a Post Card

Follow the steps below to create and style a custom Post Card using CubeWP:

Step 1: Define Post Card Styles

1.      Navigate to your WordPress Dashboard > CubeWP > Settings > Post Settings.

2.      Under Create Post Card Styles, select the Post Type for which you want to create post card styles.

3.      Enter the style names as comma-separated values (e.g., Style1,
Style2).
This will initialize the available layout styles for your selected post type.

Step 2: Configure Post Card Settings

1.      Go to WordPress Dashboard > CubeWP > Post Cards.

2.      Configure the following settings:

o    Select Post for Preview

o    Select Post Type

o    Select Loop Style (the styles created in Step 1 will appear here)

These settings will determine how the post card will appear and behave for the chosen post type.

Step 3: Design the Post Card Layout

You’ll find two primary configuration areas:

1.      Edit Post Card Layout

o    Add the HTML markup to structure your post card.

2.      Layout CSS

o    Apply custom CSS to style your post card layout.

This allows for full control over both structure and presentation.

Step 4: Use Shortcodes in HTML

In the HTML section, you can insert shortcodes available in the right sidebar. These are grouped under:

·         WordPress Default Fields

·         Taxonomies

·         Author

·         CubeWP UI & Custom Tags

·         WooCommerce

Example: Adding a Shortcode in HTML

To display the post title and content with a link, use the following structure:

	<div class="cwp-post-content-container">
			<div class="cwp-post-content">
				<h4><a href=" [loop_post_link] "> [loop_the_title] </a>
				</h4>
				[loop_the_content] 
			</div>
			<ul class="cwp-post-terms">
				<li>
					<a href=" [loop_property_type_tax_link] "> [loop_property_type] </a>
				</li>
			</ul>        
		</div>

You can place any shortcode in your desired location within the HTML layout for dynamic content rendering.