Support SVG: Best ways to support SVG in WordPress

Do you want to support SVG file or logo in your WordPress site? But it is a matter of sorrow that, by default, WordPress doesn’t support this type of file because of security issue. Don’t worry, this article will help you to support SVG in WordPress.

By default, WordPress supports all popular file formats like jpg, png, audio, video etc but SVG format is not included among them. Sometimes, you may need to use an SVG file for your WordPress theme. So, continue this article.

What is SVG format?

The full meaning of SVG is Scalable Vector Graphics. It is a file format which defines vector-graphics using XML language.

SVG format will provide you with a smart presentation of your graphics (Images). This type of file never becomes pixelated. As a result, you will find the high-quality graphics whose quality will never lose with an infinite zoom in.

The benefit of using SVG?

In the case of png or jpg image, if you zoom in them, they will be pixelated and blurry. As a result, the image will lose its quality. Because the png and jpg files are pixel based.

support SVG in wordpress

On the other hand, in case of SVG format, this is vector based not pixel based. So, if you zoom in this image, it will never be blurry or pixelated and lose its quality.

support SVG in wordpress

There is also another benefit of using SVG. SVG files are smaller in filesize than JPG or PNG. As a result, it will reduce the loading time of your website.

Usually, in the case of icons, icon fonts, branding image like logo etc, vector graphics are used. You can also add any vector graphics in your website when you will support the SVG format.

Why SVG format is not supported in WordPress

Vector graphics are not supported in WordPress because the SVG technology displays two-dimensional drawings which are based on the XML markup language.  

It means that the SVG files contain the codes of XML markup language which is similar to HTML codes.
As a result, anyone can use it to gain unauthorized access in your website data and destroy your data and files which is never expected.

Video Tutorial

You can skip this video tutorial and continue the article…..

Best way to use SVG files

We have already known that SVG files are really dangerous if the uploaded files are not trusted and reliable. So, before supporting the SVG files, you have to ensure the best way.

The best way to support SVG files is that the only administrator will be able to upload this type of file and others never will be able to upload these SVG files.

In the case of other users, the uploaded files must need to be trusted and reliable. So, to complete the uploading, must ensure reliability.

Otherwise, try your best to avoid uploading any SVG file to your website.

How to support SVG in WordPress?

When you will try to upload an SVG file in your WordPress site, you will get the following error message-


Sorry, this file type is not permitted for security reasons.

SVG support in wordpress

It is showing a security issue. So, we need to support SVG in WordPress. We will do this using two ways and these are –

  1. Using Plugin
  2. Editing functions.php without any plugin

So, now let’s go to discuss these methods in details.

Method 1: Using SVG Support Plugin

This is a simple and easy method. For this, you have to install a plugin which will allow supporting SVG files. There are a number of plugins available in the WordPress repository which are free to use.

I have found about 7 popular plugins which support SVG files. These are –

  1. SVG Support
  2. Safe SVG
  3. Add Full SVG Support
  4. WP SVG Icons
  5. SVG Uploads Support
  6. Easy SVG Support
  7. WP SVG Images

You can choose any of them to support SVG in your WordPress theme. But among theme, I recommend using SVG Support plugin. Because it has an option to restrict the file uploading.


If you install the SVG Support plugin and active it, you will find it in Settings >> SVG Support.

SVG support in WordPress

If you go to the options of SVG Support plugin, you will find two options one is Restrict to Administrators? And another is Enable Advanced Mode?

The most important option is Restrict to Administrators option. You must need to check mark this option if you don’t want to allow anyone to upload SVG files. Otherwise, you can uncheck it but that will be really dangerous.

The another option Enable Advanced Mode, simply you can skip it.

If you have completed the installation and activation of the SVG Support plugin, now you will be able to support vector graphics in your WordPress theme.

SVG Support in WordPress

I am skipping to discuss the other plugins. Because these are very simple just you need to know about WordPress plugin installation and activation.

Method 2: Without any plugin

If you want to avoid using any plugin to support SVG in WordPress, you can also do it editing the functions.php. You can edit the functions.php file through the control panel or FTP access to the theme directory.

I think it may be better if you want to avoid using the plugin because more plugins make slow your website. However, to continue the editing of functions.php, just you need to paste the following codes in the functions.php file-

<?php 
function svg_file_types_to_uploads($file_types){
    $new_filetypes = array();
    $new_filetypes['svg'] = 'image/svg+xml';
    $file_types = array_merge($file_types, $new_filetypes );
    return $file_types;
}
add_action('upload_mimes', 'svg_file_types_to_uploads');

If you have added the codes and update the functions.php file, you will be able to add SVG file. But you don’t get any preview of the SVG file in media preview section.

SVG support in WordPress

Most Important Issue: As I have already told that allowing to upload SVG files is must need to be safe and trusted. So, be careful about allowing to upload SVG files especially for the other users. Only allow trusted users. Otherwise, restrict it just for administrator only.

I hope, you have enjoyed this article. Just share it and appreciate us through commenting.


Custom Search URL: Best way to create custom search URL

The search form is an essential and important feature for any website, especially for blog type website. Sometimes, you may need to change the search URL and need to create custom search URL.

Custom search URL makes your website more professional and provides a better user experience to the visitors. Then the search URL looks clean and smart.

Benefits of using a Search form

A search form is more beneficial to provide a smart way to your visitors to find out the expected result. It helps the visitors to find their expected service or content easily.

Without using a search form, you can’t provide a better way for the visitors to find your services. So, you can’t skip it at all.

When needing a custom search URL

Usually, when an user searches something in the search form, the search result is passed through a form with an action. Usually, the name of the input field where users write their search query is “s”. I mean search query is processed by the input field’s name “s”. If you don’t know how the WordPress search form work, you can check out this page.

As a result, the default search URL becomes like this-

Default Search URL

But, it is not looking clear or smart or nice at all. So, to make it clean and smarter, you need to rewrite the search URL. If you rewrite search URL, it will look nice and smart.

So, if want to clean up your search URL, just use this trick. Otherwise, you can skip it.

How to Create a custom search URL?

Rewriting the search URL is a very easy and simple task. You just need to pass a redirect function through template_redirect hook. However, don’t get boring, just add the following codes in the functions.php file-

<?php 
function wpq_search_url_rewrite_rule() {
    if ( is_search() && !empty($_GET['s'])) {
        wp_redirect(home_url("/search/") . urlencode(get_query_var('s')));
        exit();
    }   
}
add_action('template_redirect', 'wpq_search_url_rewrite_rule');

Video Tutorial

Now the search URL will look like below-

Custom Search URL

Here, search word is used instead of s and now a clean and smart search URL is showing. If you need to change the search word also and want to put any word like result or something else, you have to add some extra code in functions.php. The code snippet for this is below-

<?php 
function wpq_search_rule(){
    add_rewrite_rule('^result/([^/]*)?', 'index.php?s=$matches[1]', 'top');
}
add_action( 'init', 'wpq_search_rule' );

Example: Suppose, I want to change the search word and replace it to result, then I have to add the following code snippet in my functions.php file.

Code Snippets 1:

<?php 
function wpq_search_url_rewrite_rule() {
    if ( is_search() && !empty($_GET['s'])) {
        wp_redirect(home_url("/result/") . urlencode(get_query_var('s')));
        exit();
    }   
}
add_action('template_redirect', 'wpq_search_url_rewrite_rule');

Code Snippets 2:

<?php 
function wpq_search_rule(){
    add_rewrite_rule('^result/([^/]*)?', 'index.php?s=$matches[1]', 'top');
}
add_action( 'init', 'wpq_search_rule' );

Finally, I will get the custom search URL like this-

Custom Search URL with Custom Word

How to support responsive viewport in genesis

Responsive is one of the most important features of any modern website. A responsive website responds on to most of the modern devices. Responsive websites provide a smart presentation to all users.

So, to support responsive viewport in your website is mandatory and you can’t skip it at all if you want to represent your websites to all users who are using a modern device.

Benefits to support responsive viewport

Benefits to support responsive viewport in your website is a lot. It increases the readability of your website content to the readers. Because all users of different devices can read your website easily.

In google search indexing, this responsive viewport plays an important role. It helps to generate more traffic and to get a better rank in google search engine.

So, to get a better result of your website, supporting responsive viewport is needed.

How to support responsive viewport in Genesis?

Now, I hope you are interested in supporting responsive viewport in your Genesis child theme. It is very simple to support in your child theme. However, make your that your child theme is ready to support it.

If you don’t make ready your child theme and need more guideline, you can follow this article. You also should know about Genesis hooks and how to use the theme. You can read this article to read about how to use genesis hooks and filters.

I hope your child theme is ready and you know about Genesis hooks and filters. Now, simply add the following codes in the functions.php file-

<?php 
add_theme_support( 'genesis-responsive-viewport' );

This code snippets must be inside the initial hooks or after_setup_theme. If you don’t have this hook in your functions.php file, add the following codes with this hook-

<?php 
function wpq_theme_support(){
  add_theme_support( 'genesis-responsive-viewport' ); 
}
add_action('init','wpq_theme_support');

Or you can use it using the after_setup_theme hook. Like this-

<?php 
function wpq_theme_support(){
  add_theme_support( 'genesis-responsive-viewport' ); 
}
add_action('after_setup_theme','wpq_theme_support');

You can also check the main code snippets from the official site of StudioPress.

Now, your site is supported with the responsive viewport. Just enjoy it.


How to use Genesis hooks and filters

Hooks are the most powerful feature of any WordPress theme or WordPress based framework like Genesis Framework. They will give you an unlimited scope of customization of the core functionality of a theme. So, we have to know how to use genesis hooks and filters for more benefits.

So, hooks based themes provide a better user experience to the theme developer and make easy to build an expected theme without any pressure. They save their times and energy.

Benefits of using hooks and filters

Hooks provide powerful customization of any features of a theme without editing the core functionalities or core codes of the theme. In this case, You can easily add, edit or remove any hook based feature without editing or removing the main codes.

For this case, in case of development of parent theme, hooks are so much important so that any features of the parent theme can be edited or removed from the child theme without editing or removing the main codes from the parent theme.

The Genesis Framework has done an excellent job. Because it has built with a number of hooks, as a result, a theme developer can easily customize the features of the theme without any change in parent theme I mean Genesis Framework.

Types of hooks

A hook is a function to execute an event to modify the default functionality. In WordPress based websites, hooks are two types depending on their activity. They are called action hooks and filter hooks.

Action Hooks: Action hooks play an action which doesn’t edit or modify a feature let alone it executes something.
Filter Hooks: Filter hooks are used to edit an existing feature. Filter hooks work like as a filtration to execute an event.

What should know to use hooks and filters

We have already understood using hooks like action and filter hooks. So, before starting to use these hooks, you have to know the names of these hooks and their specific uses.

If you have a solid understanding of the hooks of any parent theme, you will be able to edit the theme easily using a child theme with the help of these hooks. As a result, you will provide better customization and user experience to the customer.

In the case of the Genesis child theme, you also should have knowledge about the various Genesis hooks. You will find a clear concept of hooks and their position after visiting this link.

If you are looking for a complete list of all genesis hooks, in the case, this link can satisfy you as per your expectation.

However, before start working with genesis custom theme, you should also have a concept of starting the development of custom Genesis child theme development. You may read this article to get starter guideline.

How to use Genesis hooks and filters?

Now, I will share some examples of using Genesis hooks both action and filter hooks. As a result, you will also be able to use these hooks as per your need.
Example 01: Look at the first picture, it is showing the site title on the left side. Now I want to add some content like the text at the below of the site title.

genesis hook
Before without using any genesis hook

Video Tutorial

How to use genesis hooks and filters

You can enjoy the video or skip it to continue reading the content.

Now, without editing the core functionality, we will do this job with an action hook. To do this particular job, the name of the action hook is genesis_site_title. Now simply add the following codes in the functions.php file –

<?php 
function wpq_add_text_below_site_title(){
	echo "Text below site title";
}
add_action('genesis_site_title','wpq_add_text_below_site_title');
genesis hook
After using genesis hook

So, we can see, easily we have added the above text at the below of the site title using hooks.

Example 02: Look another image at the below, this a picture of the right sidebar of genesis sample child theme. Suppose, we want to add a button at the top of the sidebar.

genesis hook
Before using genesis hook

In the case, we need an action hook which is known as genesis_before_sidebar-widget_area . Now, add the following codes in the functions.php file. As a result, you will get the following button at the top of the sidebar.

<?php 

function wpq_text_before_sidebar(){
	$input = "<input type='submit' value='Button'>";
	echo $input;
}
add_action('genesis_before_sidebar_widget_area','wpq_text_before_sidebar');
genesis-hook
After using genesis hook

So, here I have shared two simple examples of using Genesis hooks. Similarly, you can use any action and filter hook as per your need. If you need to know how to use genesis hooks and filters, you should keep in touch with my posts.

How to create a genesis child theme from scratch

Genesis Framework is a WordPress based parent theme which works with its child theme. It is developed by Brain Gardner who is the Founder of StudioPress. Nowadays, the Genesis Framework has become a more popular framework all over the world.

Genesis-framework

Thousands of people love Genesis because it provides them with exactly what they need. It is more secure, SEO friendly powerful WordPress theme.

How Genesis Framework Works?

As Genesis Framework is a parent theme, it works only with its child theme. Using a child theme, easily you can customize your design, layouts and other features. You can also add or remove any element using Genesis hooks and filter through the child theme.

Pre-step for developing a genesis child theme

Before start developing a genesis child theme, you have to ensure that in your theme directory, the Genesis Framework has been already uploaded. Without existing of the framework, you can’t go ahead of developing a genesis child theme. You can buy this framework from their official website. Click here

When the Genesis Framework will be uploaded in the theme directory, a warning message will display at the top of the theme dashboard if there don’t have any Genesis child theme. The message will say to upload a child theme.

How to start with Genesis child theme

To start with the Genesis Framework, you must need to have a Genesis child theme. So, to start with a genesis child, we can do it in different ways.

Firstly, you can start with a sample genesis child theme which is free to use. It is a sample child theme. You have to customize it as per your need. You will get this from Github following this link

Secondly, it may be an easy option and that is you have to buy a child theme from StudioPress premium theme store. You will get a complete list of different premium child themes from here. Depending on your business need, you can start your business buying a theme from this store.

But the main issue related to this option is that the theme won’t be a unique theme just for your own branding. However, you can customize it as per your needs.

Thirdly, it is most important if you think to develop your own branding. Need to develop a custom Genesis child theme from scratch depending on your business needs.

In this article, I will discuss the basic needs and steps to start developing a custom theme from scratch. To know more in details, you have to follow my other articles.

Required files for developing a custom Genesis child theme

The essential file to start developing a custom Genesis child theme from scratch is style.css. It is required file and you can’t skip it at all. Simply, you can start your custom Genesis child theme just with this style.css file.

There is another file called functions.php. Although it is not a required file, to override or to access the main functionality of the Genesis Framework or to implement any hooks or filter, this file is required.

Even, to control the flow of the core functionality of the Genesis Framework, the functions.php file is required. It helps you to do unlimited powerful customization.

If you need any other third-party resource or library to implement in your theme, you can easily do that using functions.php. I want to mention you that you can do what you want in the child theme like as a general WordPress parent theme.

Video Tutorial

How to create a genesis child theme from scratch

You can skip the video tutorial and continue in reading the article.

Essential Code snippets for a custom Genesis child theme

To start developing a custom Genesis child theme, you must need to implement the following code snippets in the style.css file.

/*
Theme Name: 
Theme URI:
Description:
Author:
Author URI: 
Version: 
Tags: 
Template: genesis
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 
*/

In the above fields, provide the necessary basic information about your child theme like your theme’s name, author, description, version etc.

Important: The most important step is the template. The template must be exactly the name of the Genesis Framework folder name, usually, it becomes genesis. So, in the template, the name will be genesis. It will look like this-

To override or customize or to implement any extra features or to support any feature in the child theme, you need to access the core functionality of the Genesis Framework. This access can be done using a functions.php file. So, you need to create a functions.php file in the theme directory.


The most important part after creating a functions.php is to add the following codes in the functions.php file.

<?php 
// including init.php file from genesis framework
require_once get_template_directory() . '/lib/init.php';

This code snippet is to add the init.php from the Genesis Framework to the child theme. This init.php file contains all core functionalities of the Genesis Framework which is working as a parent theme.

Use of functions.php file for custom Genesis child theme

The functions.php file a root file. You can do anything using this file. Here, I am just giving a simple example of adding language support in the child theme. To support the language, we need to load the text domain. To load the text domain and languages support file, we have to add the following codes-

<?php 
 function genesis_theme_setup() {
     load_child_theme_textdomain( 'text-domain', get_stylesheet_directory() . '/languages' );
 }
 add_action( 'after_setup_theme', 'genesis_theme_setup' );

Next step: After reloading your custom theme, you will get a theme which is working well like as a theme but there is not style at all. It is happening because of the lack of CSS styling. Now you have to support all necessary supports and style it with CSS. You can follow my other articles.