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: [code_snippet_source id=8 line_numbers=true] 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: [code_snippet_source id=9 line_numbers=true] 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: [code_snippet_source id=10 line_numbers=true] Step 6 Create a new file in the plugin folder called "ribbon-style.css" and add the CSS styles for the ribbon. For example: [code_snippet_source id=11 line_numbers=true] 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: [code_snippet_source id=12 line_numbers=true] 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: [code_snippet_source id=13 line_numbers=true] 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: [code_snippet_source id=14 line_numbers=true] 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: [code_snippet_source id=15 line_numbers=true] 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: [code_snippet_source id=16 line_numbers=true] 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: [code_snippet_source id=17 line_numbers=true] 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: [code_snippet_source id=18 line_numbers=true] 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: [code_snippet_source id=19 line_numbers=true] 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) [code_snippet_source id=20 line_numbers=true] You main css file (ribbon-style.css) [code_snippet_source id=21 line_numbers=true] 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!
