Using ACF and CPT UI to create shortcode plugin

  • Hello WordPress Forum,

    This is my first time ever asking for assistance on a forum but I can’t wrap my head around this problem. I am also kinda new to PHP and WordPress-development. I have searched a lot trying to fix this but I might be searching with the wrong keywords.

    Sorry in advance if anything I say in this post is kinda stupid.

    I want to create a plugin that contains HTML elements and CSS style. I want this plugin to help my coworkers to easily change images and links inside of this plugin. I want this plugin to be available to be shown inside of widgets by the help of shortcode.

    My thought was to use ACF combined with CPT UI. By creating a post-type with specific fields bound to it.

    Example:
    Have a post with the field “Image” and “Link” called Custom Widget.
    Take the fields key from ACF and put these inside the plugin so when a user from the Admin-panel changes these fields (Image and Link) it updates inside the plugin to show the correct image and link.

    The HTML element could for example be as easy like this:

    <a href="fieldkey-link" target="_blank">
<img src="fieldkey-image>
</a>

    Take the shortcode from this plugin to present it on the frontend inside a widget.

    I found a plugin that kinda do the same thing called “Shortcoder” but instead I would have to write the HTML and CSS and my coworkers would need to change out images and links inside the code, this will not work cause my coworkers don’t understand HTML and CSS at all.

    My thought was that this was going to be easy, should be loads of information on the internet of similar methods but I cant seem to find it.

    I don’t know if I’m on the right path at all or if there is a better way to make this but I thought using ACF and CPT UI combined with a own plugin would be easiest.

    I just need a little guidance to lead me to the right path.
    Thanks in advance for any help!

Viewing 2 replies - 1 through 2 (of 2 total)

  • In ACF I made a group called Custom Widget. In that group one field called image set to type image. Another called link set to type of url. Set that group to appear on posts.

    the shortcode:
    [get_custom_widget]

    It accepts one option of id eg:
    [get_custom_widget id="147"]

    If the id is set, it will pull the fields from whatever post id you set. If id isn’t set, it uses the current post.

    <?php
/*
Plugin Name: Get Custom Widget
Version: 1
*/

function get_custom_widget_css_tug23f() {
    wp_enqueue_style( 'gcw-styles', plugins_url('gcw.css' , __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'get_custom_widget_css_tug23f', 11 );

function get_custom_widget_tug23f($atts, $content = null) {
    $a = shortcode_atts( array(
        'id' => '',
    ), $atts );
	$id = $a['id'];
	if($id == ''){
		$id = get_the_ID(); /* if $id isn't set, use the current posts' id */
	}
	$image = get_field('image', $id);
	//print_r($image); /* print this to see all the image options */
	$link = get_field('link', $id);

	$parsed = parse_url($link); /* make sure the link starts with http - ACF already does this on URL type fields so... */
	if (empty($parsed['scheme'])) {
		$link = 'https://' . ltrim($link, '/');
	}
	
	$gcw = '';
	$gcw .= '<div class="gcw">'."\n";
	$gcw .= '<a href="'.$link.'">'."\n";
	$gcw .= '<img src="'.$image['sizes']['thumbnail'].'" alt="" />'."\n";
	$gcw .= '</a>'."\n";
	$gcw .= '</div>'."\n";

	return $gcw; 
}
add_shortcode('get_custom_widget', 'get_custom_widget_tug23f');
?>

    simple gcw.css:
    .gcw { background: #ccc; padding: 20px; border: 1px solid #f27; }

    I assume this is basically what you wanted?

    Since you are using images, I would suggest adding alt text field and with links, maybe open a new window or not checkbox/radio.

    You should also out in some logic for “if this field exists…” and ” if this field has value/not null…”

    I would also use better field names something like gcw_image and gcw_link just to make sure you’re unique.

    • This reply was modified 3 years, 3 months ago by tugbucket.
    Thread Starter danieloberg95

    (@danieloberg95)

    Hello @tugbucket and thank you for your quick response!

    I will definitely try this out! It looks promising.
    I will update as soon as I’ve done any progress.

    Thank you again!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Using ACF and CPT UI to create shortcode plugin’ is closed to new replies.