How you can Create a Library of Post Thoughts to utilize in Your Posts and Pages

Many WordPress websites use custom code or functions somewhere within their posts and pages. The platform makes it easy to add this program code, in case you’ re going to recycle snippets throughout your site, it may be a pain to add code manually whenever you need to.

Instead of having to insert your code snippets by hand every time they’ re needed, it makes more feeling to both organize and save all of them using plugins. In this article, we’ ll discuss the benefits of keeping your code snippets organized, then display you how to do it making use of the Code Snippets Extended plugin in two steps. Let’ s get to work!

Why You Ought to Organize Your Code Snippets

Some WordPress code.

Even if you’re not a developer, chances are you’ll have to add some code to your website manually.

Lots of WordPress users add custom code snippets to their posts and pages. Regardless of your niche and size, there are plenty of situations where you’ ll need to add a little code to your site. Take Google Adsense or Facebook Pixel, for example, which usually both need you to add a few outlines of JavaScript to your website before they may work. Plenty of WordPress plugins furthermore require you to use shortcodes, therefore the chances of adding custom code in order to your website are high.

Given this, it’ s a great idea to find a way to conserve all of those snippets of program code you’ re using on the site. Here’ s why:

  • You can reference your code whenever necessary. Sometimes, you may neglect what lines of custom code you added to your files, so this pays to organize your snippets using a library.
  • You’ll be able to reuse your program code snippets more easily. If you wish to use the same code multiple moments, it makes sense to store it for later use.

You could, of course, just conserve those code snippets using regular text files on your pc or within the cloud. However, using the right WordPress plugin can provide you with a a lot more suitable way to store them within your site. That way, you’ ll understand what code you’ ve put into every specific website you work with.

Introducing the Code Snippets Prolonged Plugin

The Code Snippets Extended plugin.

The Code Snippets Extended plugin is definitely an interesting tool that enables you in order to set up an easy code library within WordPress. It lets you save custom program code, identify it using any name a person want, then add it to any of your posts and pages with a few clicks.

Plus, the particular plugin also enables you to preview the effects of your code thoughts, as long as they are easy JavaScript or CSS. It also supports PHP, but those snippets don’ t usually display as well using the tool’ s preview functionality.

While the plugin plays nicely with the Divi Builder on the whole, there’s 1 issue that requires a workaround. Simply by default, the tool adds a brand new button to the editor, which enables you to add any of your library’ s snippets to your article or page. However, the button disappears when switching over to the Divi Builder. The fix is simple even though, and we’ ll explore it more in a minute.

Crucial Features:

  • Save all of the of your custom code snippets to a centralized library in your dashboard.
  • Identify each snippet using the unique name.
  • Assign easy-to-use shortcodes to each item in your library.
  • Add snippets for your posts and pages using a new choice on the WordPress editor, without having to touch the code.

Price: FREE | More Information

How to Create a Library of Submit Snippets to Use in Your Articles and Pages (In 2 Steps)

Before we get started, you’ll need to install and activate the plugin. Once you’re ready, jump into step number one!

Action #1: Add New Snippets to Your own Library

After installing the particular plugin, you’ ll see a new tab called Snippets on your own WordPress dashboard. Click this and look for the Add Snippets option. Upon the next screen, you’ ll become able to set a name to identify your code within the collection, as well as upload any mass media files that are needed for the particular code to execute:

Adding a new snippet.

Keep in mind – the code will still work also if you don’ t upload the necessary media from this page, since long as it’ s in your own library. This feature is just there therefore you can preview the effects associated with your code using the Test button at the bottom of the page.

Moving on, you’ ll also notice an editor into which you’ll kind your CSS, JavaScript, PHP, and jQuery code. However, it will need in order to be wrapped in specific tags pertaining to each language. Here are some quick examples for reference:

  & lt; style& gt; CSS goes between these tags. & lt; /style& gt;  

   & lt;? php PHP tags, on the other hand, are different, so keep that in mind.? & gt; & lt; script type=& quot; text/javascript& quot; & grand touring; Same applies to JavaScript, which uses this tag type. & lt; /script& gt; & lt; script type=& quot; text/javascript& quot; & gt; jQuery(function($)  $(document).ready(function() // jQuery uses the most complex tags – they need to be set up exactly as shown, and any code should go within this section. );  ); & lt; /script& gt;   

You can reference all of these tags below the editor whenever you’ re adding a new snippet, plus as long as you remember that will each language requires a different one, a person don’ t need to memorize them. Plus, you can use multiple languages inside the same snippet – just become sure to wrap them using their respective tags.

Once you’ re done typing or pasting your code, use the Save Snippet button at the bottom of the page, and it’ ll show up within the Snippets > Snippets tab on your WordPress dashboard:

The Snippets tab.

Now, all that’ s remaining is to test your new snippet making use of both the WordPress editor and the Divi Builder.

Step #2: Insert Your Snippets Into Your Divi Posts and Pages

In case you’ re not using the Divi Builder, you can just open any kind of of your posts or pages making use of the regular WordPress editor. At the very top you’ ll see a new Insert Snippet button:

Insert a snippet.

Clicking upon it is going to bring up an overlay displaying all of the items in your library, and you can select whichever one you want:

Choosing which snippet you want to add.

Now the plugin can add the code to the editor, and you’ re set – it’ s that simple. However , if you’ re using the Divi Builder, a person won’ t be able to gain access to this choice. The easiest way to work around this problem is to open your dashboard’ s Thoughts tab in a new window and copy the corresponding shortcode for the code you want in order to add. Once you have it, come back to the Divi Builder and add a Code module to the page you’ lso are working on:

Adding a Code module.

Once you’ re in, paste your shortcode within the Content field and save your changes:

Adding a shortcode to your Code module.

Now, your snippet will work as usual. Using the Divi Builder adds 1 step to the process, but you still get to store all your code snippets in an internal library that’ s easy to access.

Bottom line

If you’ re anything like us, you value efficiency in all of your projects. Adding the exact same code to multiple pages or content by hand is possible, but it’ s not a good use associated with your time. Instead, it’ s much better to test the code as soon as, save it to your library, and after that keep it in your virtual back again pocket for whenever you need this.

The Code Snippets Extended plugin enables you to do just that. Simply install it and follow these types of two steps:

  1. Add new snippets for your library.
  2. Insert your snippets into your Divi posts and pages.

Do you have any queries about how to add code thoughts to your Divi website? Ask away in the comments section below!

Article thumbnail picture by Andrii Bezvershenko / shutterstock. possuindo.

The post How to Create a Library of Submit Snippets to Use in Your Content and Pages appeared first on Elegant Themes Blog.