iPixel Creative is a Singapore web design and development Company. At iPixel Creative, we provides web design solution which helps your company stand out from the competitors. Our Solutions includes web design, website development, cms development, ecommerce solution and hosting solutions.
SVG has been rapidly increasing in popularity, with SVG icons, fonts, inline SVG, SVG styling, and JS/CSS3 animation of SVGs. All great examples of smart SVG use. Aside from its responsiveness and animation features, SVG can take design to a whole new level.
Using a newly-developed editor, we’ll show you how any vector can be made customizable. The editor is still experimental, so it cannot be integrated here, but we’ll walk you through the process and illustrate this post with a sporty little swimmer (credit for the design goes to Lisandro Trepeu).
1.Draw your vector
The first step is to design your illustration in your favorite graphical editor.
2.Export as SVG
Once you’re done, you’ll need to save your illustration as an SVG.
You can keep the export settings to the standard SVG 1.1 format. The only setting that will affect the way you work with your SVG is “CSS Properties”. You have two options: you can either select “style elements” (which will add CSS classes on top of your SVG) or you can choose “style attributes” (to style each element separately). The choice depends mainly on how you’ve built up your design and how you want to link variables to it.
You can then open your .svg file using a code/text editor to see what’s inside:
A good exercise is to try to identify elements of your design by looking at the code. In our case, the elements are pretty easy to find with only <path> elements and id’s (names are automatically taken from the layers): swimsuit, goggles and cap.
Once we’ve pasted the code into our text editor, you’ll notice a “clean SVG” button in the upper right corner. This button was added to automatically remove useless metadata and prepare your SVG for customization (it’s based on SVGO). The way your SVG appears on screen depends on the original artboard in your graphical editor. If it doesn’t display well, you can still adjust the viewbox values: viewBox="0 0 1024 1024".
3. Style your SVG
Now you’re ready for the actual customization. The good news is that you can style pretty much anything in your illustration from color to text, position and visibility.
Let’s turn Michael into a Speckyboy swimmer. To do so, we’ll change several things:
Change the color of the swimsuit, glasses and logo from purple to #587898 blue;
Hide the swimming goggles;
Put “Speckyboy” on his swim cap
This will be done inside the editor, so we need UX controls to interact with our mouse: we’ll simply add a color picker, a boolean, and a text input.
The editor to style the SVG is right next to the SVG and is called CSS, because of it’s similarities with its HTML counterpart.
Elements from the SVG need to be linked to the UX controls to make them customizable. As with most styling languages, this comprises two steps:
Selecting the ID element using # (e.g. #hat1) (or alternatively using classes);
Applying a method to the element (e.g. ‘fill’, ‘visible’ or ‘text-content’);
The $name is a reference to the UX control we have defined above.
The controls should now be linked to the illustration and you should be able to customize the illustration. Here’s our Speckyboy Swimmer:
You can find the full customization code and play with the Speckyboy swimmer here.
Although they may not know its name, everyone who uses WordPress is familiar with the TinyMCE editor. It’s the editor you use when you create or edit your content – the one with the buttons for creating bold text, headings, text alignment and so on is. That’s what we’ll be taking a look at in this post, and I’m going to show you how you can add functionality and how you can use it in your plugins.
The editor is built on a platform-independent Javascript system called TinyMCE which is used in a number of projects on the Web. It has a great API which WordPress allows you to tap into to create your own buttons and to add it to other locations within WordPress.
WordPress uses some options available in TinyMCE to disable particular buttons – such as superscript, subscript and horizontal rules – in order to clean up the interface. They can be added back without too much fuss.
The first step is to create a plugin. Take a look at the WordPress codex on how to do that. In a nutshell, you can get by with creating a folder named ‘my-mce-plugin’ in the wp-content/plugins folder. Create a file with the same name, with a PHP extension: my-mce-plugin.php.
Inside that file paste the following:
<?php /** *Plugin Name: My TinyMCE plugin *Description: A plugin for adding custom functionality to the WordPress TinyMCE plugin. */
Once done you should be able to select this plugin in WordPress and activate it. All the code from now on can be pasted inside this file.
So, back to enabling some built-in but hidden buttons. Here’s the code that allows us to enable the 3 buttons I mentioned:
How about creating our own buttons from scratch? Many websites use Prism for code highlighting which uses a very semantic approach to marking up code segments. You have to wrap your code within <code> and <pre> tags, something like this:
<pre><code>$variable = "value"</code></pre>
Let’s create a button which will do this for us!
This is a three-step process. You will need to add a button, load a javascript file and actually write the content of the Javascript file. Let’s get started!
Adding the button and loading the Javascript file is pretty straightforward, here’s the code I used to get it done:
When I see tutorials about this I frequently see 2 problems.
They neglect to mention that the button name added in the pre_code_add_button() function must be the same as the key for the $plugin_array variable in the pre_code_add_javascript() function. We will also need to use the same string in our Javascript later on.
Some tutorials also use an additional admin_head hook to wrap everything up. While this will work, it is not required and since the Codex does not use it, it should probably be avoided.
The next step is to write some Javascript to implement our functionality. Here’s what I used to get the <pre> and <code> tags output all at once.
Most of this is dictated by how a TinyMCE plugin is supposed to be coded, you can find some information about that in the TinyMCE documentation. For now, all you need to know is that the name of your button (pre_code_button) should be used in line 2 and 3. The value of "text" in line 4 will be displayed if you do not use an icon (we’ll take a look at adding icons in a moment).
The onclick method dictates what this button does when it is clicked. I want to use it to wrap selected text within the HTML structure discussed earlier.
The selected text can be grabbed using tinyMCE.activeEditor.selection.getContent(). Then, I wrap the elements around it and insert it, replacing the highlighted content with the new element. I’ve also added a new line so I can easily start writing after the code element.
If you want to use an icon I suggest selecting one from the Dashicons set which ships with WordPress. The Developer Reference has a great tool for finding icons and their CSS/HTML/Glyph. Find the code symbol and note the unicode underneath it: f475.
We’ll need to attach a stylesheet to our plugin and then add a simple style to display our icon. First up, let’s add our style to WordPress:
Go back to the Javascript and next to the icon in the addButton function, replace “false” with a class you would like your button to have – I used pre_code_button.
Now create the style.css file in your plugin directory and add the following CSS:
Note that the button will receive the mce-i-[your class here] class which you can use to target and add styles. Specify the font as dashicons and the content using the unicode value from earlier.
Using TinyMCE Elsewhere
Plugins often create textareas for entering longer text, wouldn’t it be great if we could use TinyMCE there as well? Of course we can, and it’s pretty easy. The wp_editor() function allows us to output one anywhere in admin, here’s how it looks:
The first parameter sets the initial content for the box. This could be used to load an option from the database, for example. The second parameter sets the HTML element’s ID. The third parameter is an array of settings. To read about the exact settings you can use, take a look at the wp editor documentation.
The most important setting is the textarea_name. This populates the name attribute of the textarea element, allowing you to save the data easily. Here’s how my editor looks when used in an options page:
The TinyMCE editor is a user-friendly way of allowing users more flexibility when entering content. It allows those who don’t want to format their content to just type it up and be done with it, and those who want to fiddle around with it to spend as much time as they need getting it just right.
Creating new buttons and functionality can be done in a very modular way, and we’ve only just scratched the surface of the possibilities. If you know of a particularly good TinyMCE plugin or use case which has helped you a lot, do let us know in the comments below!
Although they may not know its name, everyone who uses WordPress is familiar with the TinyMCE editor. It’s the editor you use when you create or edit your content – the one with the buttons for creating bold text, headings, text alignment and so on is. That’s what we’ll be taking a look at in this post, and I’m going to show you how you can add functionality and how you can use it in your plugins.
The editor is built on a platform-independent Javascript system called TinyMCE which is used in a number of projects on the Web. It has a great API which WordPress allows you to tap into to create your own buttons and to add it to other locations within WordPress.
WordPress uses some options available in TinyMCE to disable particular buttons – such as superscript, subscript and horizontal rules – in order to clean up the interface. They can be added back without too much fuss.
The first step is to create a plugin. Take a look at the WordPress codex on how to do that. In a nutshell, you can get by with creating a folder named ‘my-mce-plugin’ in the wp-content/plugins folder. Create a file with the same name, with a PHP extension: my-mce-plugin.php.
Inside that file paste the following:
<?php /** *Plugin Name: My TinyMCE plugin *Description: A plugin for adding custom functionality to the WordPress TinyMCE plugin. */
Once done you should be able to select this plugin in WordPress and activate it. All the code from now on can be pasted inside this file.
So, back to enabling some built-in but hidden buttons. Here’s the code that allows us to enable the 3 buttons I mentioned:
How about creating our own buttons from scratch? Many websites use Prism for code highlighting which uses a very semantic approach to marking up code segments. You have to wrap your code within <code> and <pre> tags, something like this:
<pre><code>$variable = "value"</code></pre>
Let’s create a button which will do this for us!
This is a three-step process. You will need to add a button, load a javascript file and actually write the content of the Javascript file. Let’s get started!
Adding the button and loading the Javascript file is pretty straightforward, here’s the code I used to get it done:
When I see tutorials about this I frequently see 2 problems.
They neglect to mention that the button name added in the pre_code_add_button() function must be the same as the key for the $plugin_array variable in the pre_code_add_javascript() function. We will also need to use the same string in our Javascript later on.
Some tutorials also use an additional admin_head hook to wrap everything up. While this will work, it is not required and since the Codex does not use it, it should probably be avoided.
The next step is to write some Javascript to implement our functionality. Here’s what I used to get the <pre> and <code> tags output all at once.
Most of this is dictated by how a TinyMCE plugin is supposed to be coded, you can find some information about that in the TinyMCE documentation. For now, all you need to know is that the name of your button (pre_code_button) should be used in line 2 and 3. The value of "text" in line 4 will be displayed if you do not use an icon (we’ll take a look at adding icons in a moment).
The onclick method dictates what this button does when it is clicked. I want to use it to wrap selected text within the HTML structure discussed earlier.
The selected text can be grabbed using tinyMCE.activeEditor.selection.getContent(). Then, I wrap the elements around it and insert it, replacing the highlighted content with the new element. I’ve also added a new line so I can easily start writing after the code element.
If you want to use an icon I suggest selecting one from the Dashicons set which ships with WordPress. The Developer Reference has a great tool for finding icons and their CSS/HTML/Glyph. Find the code symbol and note the unicode underneath it: f475.
We’ll need to attach a stylesheet to our plugin and then add a simple style to display our icon. First up, let’s add our style to WordPress:
Go back to the Javascript and next to the icon in the addButton function, replace “false” with a class you would like your button to have – I used pre_code_button.
Now create the style.css file in your plugin directory and add the following CSS:
Note that the button will receive the mce-i-[your class here] class which you can use to target and add styles. Specify the font as dashicons and the content using the unicode value from earlier.
Using TinyMCE Elsewhere
Plugins often create textareas for entering longer text, wouldn’t it be great if we could use TinyMCE there as well? Of course we can, and it’s pretty easy. The wp_editor() function allows us to output one anywhere in admin, here’s how it looks:
The first parameter sets the initial content for the box. This could be used to load an option from the database, for example. The second parameter sets the HTML element’s ID. The third parameter is an array of settings. To read about the exact settings you can use, take a look at the wp editor documentation.
The most important setting is the textarea_name. This populates the name attribute of the textarea element, allowing you to save the data easily. Here’s how my editor looks when used in an options page:
The TinyMCE editor is a user-friendly way of allowing users more flexibility when entering content. It allows those who don’t want to format their content to just type it up and be done with it, and those who want to fiddle around with it to spend as much time as they need getting it just right.
Creating new buttons and functionality can be done in a very modular way, and we’ve only just scratched the surface of the possibilities. If you know of a particularly good TinyMCE plugin or use case which has helped you a lot, do let us know in the comments below!
