SayPro User Training Manual: Short Code Usage and Customization

Introduction

The SayPro User Training Manual is designed to assist content creators and administrators in utilizing and customizing short codes efficiently within their daily workflows. Short codes provide a convenient way to embed complex elements such as galleries, forms, media, and dynamic content into posts, pages, and other elements of the SayPro platform. This manual covers the basic and advanced usage of short codes, as well as guidance on customization and troubleshooting.

---

Table of Contents

1. Overview of Short Codes
2. Basic Usage of Short Codes
   • Inserting Short Codes into Posts and Pages
   • Using Short Code Parameters
3. Customizing Short Codes
   • Customizing Short Code Outputs
   • Modifying Appearance (CSS & Styles)
4. Advanced Short Code Features
   • Nested Short Codes
   • Conditional Logic with Short Codes
5. Troubleshooting Short Code Issues
6. Best Practices for Short Code Usage
7. FAQs

---

1. Overview of Short Codes

Short codes are simple snippets enclosed in square brackets ([]) that enable content creators to insert complex functionality and elements into their content without requiring advanced technical knowledge. These can range from displaying galleries to embedding forms, displaying recent posts, or adding dynamic content like testimonials.

Example Short Codes:

• [product_gallery]: Displays a gallery of products.
• [contact_form]: Embeds a customizable contact form.
• [recent_posts]: Displays a list of the most recent posts on the site.
• [testimonial_slider]: Displays a carousel of customer testimonials.

---

2. Basic Usage of Short Codes

2.1 Inserting Short Codes into Posts and Pages

To insert a short code into a post or page, follow these steps:

1. Navigate to the Content Editor: Open the post or page where you want to insert the short code.
2. Insert the Short Code: Type or paste the short code directly into the content editor at the desired location. For example:
   • To add a product gallery, type: [product_gallery].
3. Publish or Update the Page: After inserting the short code, click the “Publish” or “Update” button to save the changes.
4. View the Page: Visit the live page to confirm that the short code has rendered correctly.

2.2 Using Short Code Parameters

Short codes can often be customized using parameters that control the output. For example, a gallery short code might allow you to specify the number of columns or the category of products to display.

Example: To display a product gallery with 3 columns: [product_gallery columns="3"]

Here are some common parameters you can use with various short codes:

• columns="3": Specifies the number of columns for a gallery or product display.
• category="featured": Filters content by a specific category (e.g., featured products or posts).
• limit="5": Limits the number of items to display.

Always refer to the Short Code Library for a full list of available parameters and their descriptions.

---

3. Customizing Short Codes

3.1 Customizing Short Code Outputs

Short codes can be customized to meet specific design and functionality needs. Here’s how:

1. Editing Text Outputs: Some short codes allow you to add custom text or descriptions. For example: [testimonial_slider title="Customer Testimonials"] This will add a custom title above the testimonial slider.
2. Customizing Display Options: Many short codes come with display options that you can modify using parameters. For example:
   • [recent_posts count="3" orderby="date"]: Displays the three most recent posts, ordered by date.
   • [product_gallery columns="4" category="new-arrivals"]: Displays products from a specific category with four columns.

3.2 Modifying Appearance (CSS & Styles)

You can adjust the look and feel of short code outputs using custom CSS.

1. Identify the CSS Class: Most short codes output HTML with unique CSS classes. To identify the class, use your browser’s Developer Tools (right-click on the page and select “Inspect”).
2. Write Custom CSS: Add custom styles for the short code in the Custom CSS section of the SayPro CMS.
   • Example: If the short code for a product gallery has the class .product-gallery, you can write:
   cssCopy.product-gallery { background-color: #f0f0f0; padding: 20px; }
3. Test the Changes: After adding custom CSS, refresh the page to ensure the appearance is as expected.

---

4. Advanced Short Code Features

4.1 Nested Short Codes

You can use one short code inside another, also known as nesting. For example, you could have a recent posts list inside a tabbed interface.

Example:

[tabs]

[if_logged_in]WelcomeCopy[if_not_logged_in]Please log in to view the content.[/if_not_logged_in]