In content marketing, efficiency and collaboration are crucial. Using WordPress shortcodes within StoryChief can enhance content creation and distribution, improving productivity. This guide provides steps for effectively incorporating WordPress shortcodes in StoryChief to keep your content dynamic and engaging.
Start embedding CTA's
1. Using inline shortcode
🔔 Note: This requires version 1.0.33 or higher of our StoryChief WordPress plugin.
Step 1. Go to an article where a CTA is already embedded, copy the part of the HTML and go to the Power Mode (or a similar tool). Ask it to convert the code into a function.
Similarly, use our chat assistant to describe the setup of the CTA and let it generate the function.
Example input:
Create CTA to my WordPress website using shortcode, based on HTML and inline CSS. The setup: A title "Quicly generate your content marketing strategy" Subtitle "StoryChief introduces Alice, your marketing assistant" A button "Try it now". The button style is oval, blue background and white text. The button also links to https://app.storychief.io/register On the right of the text and button, place an image cta.png The output needs to be the shortcode [SC_cta] that can add in the functions.php file
Example output:
Certainly! Below is the shortcode that you can add to your functions.php file to create the desired call-to-action (CTA) for your WordPress website.
```php function SC_cta_shortcode() {
ob_start();
?>
<div style="display: flex; align-items: center;">
<div style="flex: 1;">
<h2>Quicly generate your content marketing strategy</h2>
<p>StoryChief introduces Alice, your marketing assistant</p>
<a href="https://app.storychief.io/register" style="display: inline-block; padding: 10px 20px; background-color: blue; color: white; border-radius: 25px; text-decoration: none;"> Try it now </a>
</div>
<div style="flex: 1;">
<img src="https://website/images/cta.png" alt="CTA Image">
</div>
</div>
<?php
return ob_get_clean();
}
add_shortcode('SC_cta', 'SC_cta_shortcode'); ```
Instructions for adding the shortcode and image:
1. Copy and paste the above PHP code into your theme's `functions.php` file.
2. Make sure to place an image named `cta.png` in a folder named `images` within your theme directory.
3. Use `[SC_cta]` in any post or page where you want this CTA to appear.
This will ensure that the CTA is displayed with the specified title, subtitle, button, and image as per your requirements.
Step 2. Go to the WordPress website, select 'Appearance' and click on 'Theme File Editor'.
Step 3. In the theme files, opt for 'Theme Functions' and paste the code that AI generated. Save the updates via 'Update File'.
Step 4. Go to the StoryChief article and paste the shortcode in the text. Finish by publishing the article.
Step 5. Check the website and review the CTA.
2. Using custom fields
Another way of using shortcode is by creating a custom field that will facilitate this. This help article uses our native support for the Advanced Custom Fields plugin to pass on the shortcode to the bottom of a WordPress post.
Requirements:
Step 1. Create first a custom field inside your StoryChief account. To do this, go to Settings ➜ Settings ➜ Custom Fields.
Step 2. Choose 'Text' and give it a memorable name. The other options can be left unchecked.
Step 3. Now that our custom field is created, log in to your WordPress backend and go to Custom Fields ➜ Field Group. Create a new group or edit an existing one.
Step 4. Create a text field inside a group and publish it.
Step 5. Go to Settings ➜ StoryChief ACF.
Step 6. Link your StoryChief custom field to the field you just created in Advanced Custom Fields. Click on Save changes.
Step 7. Finally, we need to add the field inside your WordPress theme. Go to Appearance ➜ Theme Editor and choose the PHP file for your default post type. For the Twenty Twenty WordPress theme, that is template-parts/content.php.
Add the following code just after where the content goes:
$embed = get_post_meta($post->ID,'shortcode',true);
echo do_shortcode($embed);
Click on Update file.
Step 8. And we are done! You can now add shortcode inside the Summary tab of a story and it will display at the bottom of your published post. Just make sure to format it in square brackets. To add a button using the Shortcodes Ultimate plugin, you could use:
[su_button url="https://storychief.io" target="self" style="flat" background="#5cfbbd" color="#414042" size="3" wide="no" center="no" radius="auto" icon="" icon_color="#FFFFFF" text_shadow="none"]Visit StoryChief![/su_button]
Need to add multiple shortcodes per story? Just repeat this process!