Custom SVG WordPress Handeler

This code will add a SVG area to your back-end

Then you can call the SVG with a shortcode. That way your SVG code doesn’t take over your layout. Just paste this entire snip into your function.php file.

function custom_svgs_menu() {
   add_menu_page('SVGs', 'SVGs', 'manage_options', 'SVGs','top_level_svgs');
}
 
function top_level_svgs() { //844AM
 
 
if(isset($_POST['has_submitted_custom_svgs'])) { //117PM

    if (!wp_verify_nonce( $_POST['custom_svgs_nonce'], 'process_custom_svgs' )) { exit; }
 
 
    $custom_svg_name  = $_POST['custom_svg_name'];
    $custom_svgs_data = $_POST['custom_svgs_data'];
    
    $all_custom_svgs = get_option('custom_svgs');
 
 
    if ( !empty($custom_svg_name) && !empty($custom_svgs_data)) { $all_custom_svgs[$custom_svg_name] = $custom_svgs_data ; }
    
    
                         if ($_POST['delete_svg'] == "yes") {  //117PM                         
                         
                            unset($all_custom_svgs[$custom_svg_name]);
                         
                         } //117PM
                         
     
    update_option( 'custom_svgs', $all_custom_svgs );
 
 
 
}//117PM
 
 
    $all_custom_svgs = get_option('custom_svgs');
 
?>
 
<style>
        
.custom_svgs_form label {
    display: block;
}   


.custom_svgs_form input{
    width :300px;
    padding: 5px;
    margin-bottom: 10px;
}
 
.custom_svgs_form textarea{
    width :500px;
    height :350px;
    padding: 5px;
    margin-bottom: 10px;
}

.svgs_submit {
    cursor:pointer;
    width: auto !important;
    display: inline-block;
    border: 1px solid #000000;
    border-radius: 6px;
}


.custom_svgs_form {

   background-color: #C9C7C7;
   padding: 15px;
   margin-bottom: 15px;
}

.delete_svg {
    width: auto !important;
}

.delete_svg_wrap {
  display: inline-block;
  margin-left: 340px;
}

.custom_svgs_form h2 span {
	font-size: 12px;
	display: inline-block;
	margin-left: 300px;
}
 
</style>
 
<h1>Custom SVGs</h1>               
         
        
        <form class="custom_svgs_form" method="post" enctype="multipart/form-data">
                <h2>New SVG</h2>         
                 
                <label>SVG Name</label> 
                <input type="text" name="custom_svg_name" class="svg_name_input" value=""/> 
                 
                <label>SVG Data</label>  
                <textarea  name="custom_svgs_data" class="svg_textarea"></textarea> <br />
 
                <? wp_nonce_field( 'process_custom_svgs', 'custom_svgs_nonce' ); ?>  
                
                <input type="submit" class="svgs_submit" value="Submit" />       
                <input type="hidden" name="has_submitted_custom_svgs" id="custom_svgs_submitted" value="true" /> 
        </form>
        
        
<? if (!empty($all_custom_svgs)) { foreach ($all_custom_svgs as $svg_name => $custom_svg) { //434PM ?>



        <form class="custom_svgs_form" method="post" enctype="multipart/form-data">
                <h2><? echo $svg_name; ?>  <span> [svg name="<? echo $svg_name; ?>"]</span> </h2>         
                 
                 <input type="hidden" name="custom_svg_name" class="svg_name_input" value="<? echo $svg_name; ?>"/> 
                 
                <label>SVG Data</label>  
                <textarea  name="custom_svgs_data" class="svg_textarea"><? echo stripslashes($custom_svg); ?></textarea> <br />
 
                <? wp_nonce_field( 'process_custom_svgs', 'custom_svgs_nonce' ); ?>  
                
               
                <input type="submit" class="svgs_submit" value="Submit" />
                
                
                <div class="delete_svg_wrap"><input type="checkbox" class="delete_svg" name="delete_svg" value="yes" /><span>DELETE SVG</span></div>
                
                       
                <input type="hidden" name="has_submitted_custom_svgs" id="custom_svgs_submitted" value="true" /> 
        </form>



<? } } //434PM        
        
        
         
} //844AM
 
add_action('admin_menu', 'custom_svgs_menu');



function custom_svg_shortcode( $atts ){

	extract( shortcode_atts( array(
		'name' => '',
	), $atts ) );


    $all_custom_svgs = get_option('custom_svgs');
    
    $svg = stripslashes($all_custom_svgs[$name]);

	return $svg;
}

add_shortcode( 'svg', 'custom_svg_shortcode' );