[Resolved] Call To Action – like a shortcode

[Michael]

Hi,
In our previous theme we used a shortcode for creating a call to action frame. It looked more or less like this image: https://www.dropbox.com/s/mgnv4p379h3pars/CTA.png?dl=0

Basically a responsive:
– Color (grey) frame
– Image
– Header
– Body text
– Button

We used to insert this short code on many different places on our site. But mainly in articles, in the written text.

How can I solve this with GP?

[David]

Hi there,

you could write your own shortcode to do that. But first off, will there be only the one CTA?

[Michael]

Hi David,
There would be many slightly different ones. So I would need to be able to change it.

[David]

And where would the CTAs take you to ? a specific page?

[Michael]

Yes, that was my thinking.
If we for instance get organic traffic to a certain article, I would like to place a CTA (or several) which would take the visitor to an optin page or a sales page of some sort.

[David]

Hmmmm….
The common way would be to use an Optin plugin like ThriveLeads, its premium but integrates with your mailing lists as well other stuff. There are other alternatives to Thrive.

The semi hackish method would be to use some thing like WP Show Posts:

https://wpshowposts.com

You could create a post for each of your sales pages, with a manual excerpt for the call line etc. then a single WP Show List could be added to your page. You may find this plugin handy for your post article grid on the home page as well ( thats what its designed for 🙂 )

[Michael]

Hi David,
I think we are off a tangent now 🙂

The basics of what I need is a button with href. Above that some body text. Above that a header. Above that a possibility to add an image. And all of it surrounded by a border or a certain color.

That is pretty much it 🙂

Just like the image from my first post

[David]

Then it would require writing a shortcode with the relevant HTML for each of the CTA’s. I can assist with the basics of doing that if you want?

[Michael]

That would be very nice of you 🙂

[David]

So this is the PHP function create a shortcode with the relevant markup:

function cta_name_shortcode() {
    ob_start();
    ?> 
    <div class="custom-cta">
        <img src="full_url_to_image" alt="image alt">
        <h3>CTA Headline</h3>
        <p>CTA body text</p>
        <a class="button gold" href="#">CTA button</a>
    </div>
    
    <?php
	return ob_get_clean();
}

add_shortcode( 'cta-name', 'cta_name_shortcode' );

The shortcode is [cta-name]

I suggest you swap the word name in the three instances it is used to something specific to that CTA. Then create another unique named shortcode for each of them you require.

The CSS which covers all the various elements and you can change fonts, colors etc looks like this:

.custom-cta {
	max-width: 260px;
	padding: 2%;
	border: 5px solid #dddddd;
	box-sizing: border-box;
}
.custom-cta h3, .custom-cta p {
	margin-bottom: 10px;
}
.custom-cta p {
	font-size: 0.7em;
}
.custom-cta .button {
	border-radius: 5px;
	padding: 8px 15px;
	font-size: 12px;
}
a.button.gold {
	background-color: #f1cf74;
	color: #000;
}
a.button.gold:hover {
	background-color: #f1bf74;
}

[Michael]

Hi David,
I’m just about to start the implementation of your proposal.

I will need a new php snippet for each CTA right?

[Michael]

Just to clarify my confused mind 🙂
Do I do the following?

1. Add the php function to WP using “Snippets”, the plugin?
2. Add the CSS to WP general using the Simple CSS plugin?
3. Add the shortcode to a page, by simply writing [cta_name] (when having selected Text, not the Visual).

And then it should show?

I think I have done something wrong. One because it does not show (on https://www.blojfri.se/vill-inte-bajsa/), and two because it seems a bit tedious to change the content of the CTA through having to go edit the Snippet each time…

Thank you for understanding my need for a bit more guidance.

[Ender]

Very cool Solution 🙂

[David]

Apart from step 3 it all looks fine – add the shortcode in the Visual editor and then test.

Yes you would need to create a new shortcode for each CTA – each time you need a unique function name e.g cta_name_shortcode which you will see at the top and bottom of the function and a unique shortcode name.

Yep – its not the most elegant solution. Personally if i required more than one or two i would create a CPT for this or use a lead management tool like Thrive leads or something similar.

For in page content like this the new Gutenberg editor is really rather cool – and you could set this up visually and save them as re-usable blocks… maybe something for future thought.

[Michael]

Hi David,
I must be doing something wrong…

I have created this snippet: https://www.dropbox.com/s/aqp97b7rzxhcwug/Screenshot%202019-05-28%2010.34.15.png?dl=0

With the following css: https://www.dropbox.com/s/4me8n8ifr7q6ote/Screenshot%202019-05-28%2010.34.49.png?dl=0

And then added the following to a specific page: https://www.dropbox.com/s/x944vxmgkzvuczo/Screenshot%202019-05-28%2010.32.59.png?dl=0

But as you can see, nothing shows up on the page itself: https://www.blojfri.se/vill-inte-bajsa/

Where have I failed?

[Author]

Posts