WordPress | Create shortcode

I need a simple way for give to our copy writers the ability to insert buttons with pdf download in page contents.
Basically the button is a link with a pseudo element “before” with a Fontawesome icon.
For that we don’t want that copy writer use html directly in the editor.

I decide to use a shortcode, so copywriter can pass parameters ( as url ) and insert button everywhere he / she wants.

Basically we need 3 steps :

1. Creates the shortcode
2. Create the HTML for the shortcode
3. Create the legend in admin post /page sidebar ( so the copywriter can simply copy and paste the sortcode )
4. Test the shortcode

Let’s start by open functions.php from our theme and add :

function pdf_button_html() {
    
 }
 add_shortcode("pdfbutton", "pdf_button_html"); 

Basically is a function ( where we insert the html code that will be inserted using shortcode ), and an action, that contain the shortcode ( in my case [pdfbutton][/pdfbutton] ) and callback function ( pdf_button_html ).

Now we need to create the HTML:
Transform the function created before in this way :

function pdf_button_html($atts, $content = null) {
    extract(shortcode_atts(array(
       "file_url" => "info"
    ), $atts));
    return '<a class="pdf_button" href="'.$file_url.'" target="_blank">'.$content.'</a>';
 }
 add_shortcode("pdfbutton", "pdf_button_html"); 

Now we have the HTML and a parameter ( url ) that we pass with the shortcode:

[pdfbutton file_url="http://url_del_pdf_prelevato_da_i_media"]Testo del pulsante[/pdfbutton]

Last thing to do is open the backend, navigate to ACF ( if you don’t have acf installed, instal it from wordpress’s repository ), create a new field group.
I use a “Text” field, ( i need a field that basically don’t do nothing , but comunicate to copywriter how use the shortcode ), so in instruction field add ” how to use an compile the shortcode “, and in the text box, as default text add an example of shortcode.
From now if a copywriter open a page or a post, on sidebar ho find a box where can copy and paste the shortcode.