Quick and easy make a WordPress Plugin – level 2

Make a WordPress plugin: In today’s tutorial we are going to make a WordPress that adds a ribbon (label) with a link on the left corner of the page.

This is the second article of this mini series, if you haven’t read the first one you can do so at this link here.  As this is a level 2 plugin we have added a little more complications compared to last week’s level 1 plugin development tutorial. In this plugin instead of writing inline css on the main php file we are going to have a dedicate stylesheet and we are going to  show you how to enqueue it in your plugin. Right, without further ado, let’s begin! 

Create a WordPress plugin level 2

To create a WordPress plugin that adds a ribbon on the left corner of the page, you can follow these steps:

Step 1

Create a new folder in the wp-content/plugins directory and give it a unique name, such as “ribbon-plugin“.

Step 2

Inside the folder, create a new file called “ribbon-plugin.php“. This will be the main plugin file.

Step 3

In the plugin file, add the plugin header at the top. This will include the plugin name, description, and other information. The plugin header should look something like this:

<?php

/*
* Plugin Name: Ribbon Plugin
* Plugin URI: https://www.example.com/ribbon-plugin
* Description: This plugin adds a ribbon on the left corner of the page.
* Version: 1.0
* Author: Your Name
* Author URI: https://www.example.com
* License: GPL2
*/

Step 4

Next, you will need to add the code to display the ribbon on the left corner of the page. You can do this by adding an action hook that will insert the ribbon HTML into the page. To do this, you can use the wp_footer action hook, which is called in the footer of every page.

Add the following code to your plugin file to add the action hook:

<?php

function ribbon_display() {
echo '<div class="ribbon">Ribbon</div>';
}
add_action( 'wp_footer', 'ribbon_display' );

Step 5

To style the ribbon, you will need to add some CSS. You can do this by enqueuing a stylesheet in your plugin. Add the following code to your plugin file to enqueue the stylesheet:

<?php

function ribbon_styles() {
wp_enqueue_style( 'ribbon-style', plugin_dir_url( __FILE__ ) . 'ribbon-style.css' );
}
add_action( 'wp_enqueue_scripts', 'ribbon_styles' );

Step 6

Create a new file in the plugin folder called “ribbon-style.css” and add the CSS styles for the ribbon. For example:

.ribbon {
position: fixed;
left: 0;
top: 0;
background-color: red;
color: white;
padding: 10px;
}

Styling and customization

Add text to the ribbon

To add text to the ribbon, you can modify the HTML code that is displayed by the plugin.

For example, you can modify the ribbon_display function in your plugin to include the text that you want to display in the ribbon:

<?php

function ribbon_display() {
echo '<div class="ribbon">Your text here</div>';
}

Alternatively, you can also use a shortcode to display the text in the ribbon. To do this, you can modify the ribbon_display function to include a shortcode and then use the shortcode in the ribbon HTML:

<?php

function ribbon_display() {
echo '<div class="ribbon">' . do_shortcode('[ribbon_text]') . '</div>';
}

function ribbon_shortcode( $atts ) {
return 'Your text here';
}
add_shortcode( 'ribbon_text', 'ribbon_shortcode' );

Then, you can use the shortcode [ribbon_text] in the content of any post or page to display the text in the ribbon.

Add a link to the ribbon

To add a link to the ribbon, you can modify the HTML code that is displayed by the plugin.

For example, you can modify the ribbon_display function in your plugin to include an anchor tag with the desired link:

<?php

function ribbon_display() {
echo '<div class="ribbon"><a href="https://www.example.com">Link</a></div>';
}

This will add a link to the ribbon. You can also customize the link text by modifying the anchor tag content.

Alternatively, you can also use a shortcode to display the link in the ribbon. To do this, you can modify the ribbon_display function to include a shortcode and then use the shortcode in the ribbon HTML:

<?php

function ribbon_display() {
echo '<div class="ribbon">' . do_shortcode('[ribbon_link]') . '</div>';
}

function ribbon_shortcode( $atts ) {
return '<a href="https://www.example.com">Link</a>';
}
add_shortcode( 'ribbon_link', 'ribbon_shortcode' );

Then, you can use the shortcode [ribbon_link] in the content of any post or page to display the link in the ribbon.

Open the link on a new tab

To open the link in a new tab, you can add the target attribute to the anchor tag with the value _blank.

For example, you can modify the ribbon_display function in your plugin to include the target attribute:

<?php

function ribbon_display() {
echo '<div class="ribbon"><a href="https://www.example.com" target="_blank">Link</a></div>';
}

Alternatively, you can also use a shortcode to display the link in the ribbon. To do this, you can modify the ribbon_shortcode function to include the target attribute:

<?php

function ribbon_shortcode( $atts ) {
return '<a href="https://www.example.com" target="_blank">Link</a>';
}

Force the color of the link to be white

To force the color of the link to be white, you can use the color property in your CSS styles.

For example, you can modify the ribbon class in your “ribbon-style.css” file to include the color property:

.ribbon a {
color: white;
}

This will set the color of the link to white.

Alternatively, you can also use the !important keyword to make sure that the color property takes precedence over any other styles that may be applied to the link. For example:

.ribbon a {
color: white !important;
}

The final output

your final output for a left corner ribbon with a white text line and a link that opens in a new tab will as follow:

You main php file (ribbon-plugin.php)

<?php
/*
* Plugin Name: Ribbon Plugin
* Plugin URI: https://danielepais.com/journal
* Description: This plugin adds a ribbon on the left corner of the page.
* Version: 1.0
* Author: Daniele Pais
* Author URI: https://danielepais.com
* License: GPL2
*/

function ribbon_display() {
echo '<div class="ribbon">' . do_shortcode('[ribbon_link]') . '</div>';
}

add_action( 'wp_footer', 'ribbon_display' );


function ribbon_styles() {
wp_enqueue_style( 'ribbon-style', plugin_dir_url( __FILE__ ) . 'ribbon-style.css' );
}
add_action( 'wp_enqueue_scripts', 'ribbon_styles' );


function ribbon_shortcode( $atts ) {
return '<a href="https://www.example.com" target="_blank">Link</a>';
}
add_shortcode( 'ribbon_link', 'ribbon_shortcode' );

You main css file (ribbon-style.css)

.ribbon {
position: fixed;
left: 0;
top: 0;
background-color: red;
color: white;
padding: 10px;
transform: rotate(90deg);
}

.ribbon a {
color: white !important;
}

Final step

Save all your files and activate the plugin in the WordPress admin dashboard.

The ribbon should now be displayed on the left corner of the page and display a white link that opens on a new tab.

This post is part of a series and according to what the readers approach to it will be I might extend it to an additional level 3. Have fun with your make a WordPress Plugin!