CUSTOM FONT UPLOADER FOR WORDPRESS THEMES

Font-Uploader-Image Custom Font Uploader for Wordpress Themes

WordPress thesis choice panels were a endless walk in a universe of thesis development; they gave site owner’s a capability to cgange assorted aspects of their site, though ever carrying to hold a code. Every good thesis presumably has or should have an endless options panel.

In this tutorial, I’m starting to denote how to supplement a law rise uploader to your options panel. This will concede site owners to upload any series of rise files as good as request them to opposite sections of a site.

As a designer, we tremble a small at a suspicion of clients presumably screwing up my delicately comparison fonts with their own rambling selection, but, in a end, it’s what a customer wants.

Before Starting

To begin, we initial need to emanate your options panel. For this task, we suggest we follow Rohan Mehta’s educational over on Net Tuts. It’s a most appropriate educational I’ve found on this subject as good as will yield we with roughly all we need for this tutorial.

#1 – The Essentials

The initial thing we need to do is emanate a printed matter called fonts in a thesis directory. Your Structure should demeanour identical to this:

  • wp-content
    • themes
      • your_theme_folder
        • fonts

For confidence reasons, set a permissions of this printed matter to 774. This will concede a server to read, govern as good as write, whilst disallowing any open write / govern privileges.

You will additionally need to safeguard we have a functions.php file, which, of course, we do since you’ve already followed a Net Tuts tutorial, or combined an options page of your own ;-)

#2 – The Upload Script

In sequence to essentially upload files, such as law fonts, we need to emanate a php upload script.

Save this as upload.php in your thesis printed matter (the same place we combined a uploads folder):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

<?php
//include inner wordpress functions
require($_SERVER['DOCUMENT_ROOT'].'/wp-blog-header.php');
 
//define a adage distance for a uploaded files
define ("MAX_SIZE","20000000");
 
//This duty reads a prolongation of a file. It is used to establish if a record  is an rise by checking a extension.
function getExtension($str)
{
   $parts = explode('.', $str);
   return end($parts);
}
 
//This non-static is used as a flag. The worth is initialized with 0 (meaning no blunder  found)  
//and it will be altered to 1 if an errro occures.  
//If a blunder occures a record will not be uploaded.
 $errors=0;
//checks if a form has been submitted
 if(isset($_POST['Submit']))
 {
 	//reads a name of a record a user submitted for uploading
 	$font=$_FILES['font']['name'];
 	//if it is not empty
 	if ($font)
 	{
	 	//get a strange name of a record from a clients machine
	 		$filename = stripslashes($_FILES['font']['name']);
	 	//get a prolongation of a record in a reduce box format
	  		$extension = getExtension($filename);
	 		$extension = strtolower($extension);
	 	//if it is not a good known extension, we will suspect it is an blunder as good as will not upload a file,
	 	//we will usually concede .ttf as good as .otf record extensions  
		//otherwise we will do some-more tests
		if (($extension != "ttf") && ($extension != "otf"))
	 	{
			//print blunder message
	 		echo '<h1>Unknown extension!</h1>';
	 		$errors=1;
	 	}
	 	else
	 	{
			//check a mimetypes opposite an authorised list
			$mime = array ("application/x-font-ttf", "application/vnd.oasis.opendocument.forumla-template", "application/octet-stream");
 
			if (!in_array($_FILES['font']['type'],$mime))
			{
		 		echo '<h1>Unknown mimetype!</h1>';
				$errors=1;
			}
			//get a distance of a record in bytes
			//$_FILES['image']['tmp_name'] is a proxy filename of a file
			//in which a uploaded record was stored on a server
			$size=filesize($_FILES['font']['tmp_name']);
			//compare a distance with a adage distance we tangible as good as imitation blunder if bigger
			if ($size > MAX_SIZE)
			{
				echo '<h1>You have exceeded a distance limit!</h1>';
				$errors=1;
			}
			//keep a strange record name
			$font_name=$filename;
 
			if (!$errors)
			{
				//the brand new name will be containing a full trail where fonts will be stored (fonts folder)
				$newname="fonts/".$font_name;
				//we determine if a picture has been uploaded, as good as imitation blunder instead
				$copied = copy($_FILES['font']['tmp_name'], $newname);
				if (!$copied)
				{
					echo '<h1>Copy unsuccessfull!</h1>';
					$errors=1;
				}
			}
		}
	}
	//If no errors registred, route behind to a thesis options panel
	if(isset($_POST['Submit']) && !$errors)
	{
	$url = get_bloginfo('url') . '/wp-admin/admin.php?page=functions.php';
 
	header ("Location: $url");
	}
 }
 ?>

For explanations of how this book works, review a embedded comments.

#3 – Embed a Upload Script

We right away need to emanate a upload form in a options row which will concede us to essentially upload rise files to a server.

Place this in your functions.php:

1
2
3
4
5
6
7
8
9
10
11

	<h2>Upload Fonts</h2>
	<p><em>Filetypes accepted: <strong>.ttf</strong> as good as <strong>.otf</strong></em></p>
	<p>Uploaded fonts will crop up in a <strong>FONTS</strong> menu below</p>
	<form name="newad" method="post" enctype="multipart/form-data"  action="<?php bloginfo('template_directory');?>/upload.php">
	 <table>
	 	<tr>
	 		<td><input type="file" name="font"></td>
	 		<td><input name="Submit" type="submit" value="Upload"></td>
	 	</tr>
	 </table>
	</form>

This formula provides an interface to a upload.php which we combined earlier, as good as it looks identical to this:

upload form

Important! In a Net Tuts tutorial, we combined a territory in functions.php which displays a thesis options in a list formed layout. The on top of formula should be placed identical to this: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<div class="wrap rm_wrap">
    <h2><?php echo $themename; ?> Settings</h2>
    <div class="rm_opts">
 
        //upload form starts here
 
	<h2>Upload Fonts</h2>
	<p><em>Filetypes accepted: <strong>.ttf</strong> as good as <strong>.otf</strong></em></p>
	<p>Uploaded fonts will crop up in a <strong>FONTS</strong> menu below</p>
	<form name="newad" method="post" enctype="multipart/form-data"  action="<?php bloginfo('template_directory');?>/upload.php">
	 <table>
	 	<tr>
	 		<td><input type="file" name="font"></td>
	 		<td><input name="Submit" type="submit" value="Upload"></td>
	 	</tr>
	 </table>
	</form>
 
       //upload form ends here
 
 <form method="post">
 
<?php
                foreach ($options as $value):
                    switch ( $value['type'] ):
                        case "open":
                            break;
 
                        case "close":
?>
. . .

If we do not place a upload form in a scold area, it will not uncover up in your thesis options panel.

#4 – List a Available Fonts

We have combined a capability to upload fonts as good as store them in a printed matter called fonts. Now we have been starting to emanate a duty to list all of a accessible fonts inside a thesis options panel.

Place this formula in your functions.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$fontsList = array();
$fontDirectoryURL = $_SERVER['DOCUMENT_ROOT'] . get_bloginfo('template_directory') . '/fonts';
$removeSiteURL = get_bloginfo('url');
$fontDirectoryPath = str_replace($removeSiteURL, "", $fontDirectoryURL);
$fontURL = get_bloginfo('template_directory') . '/fonts';
$fontDir = opendir($fontDirectoryPath);
while(($font = readdir($fontDir)) !== false)
	{
		if($font != '.' && $font != '..' && !is_file($font) && $font != '.htaccess' && $font != 'resource.frk' && !eregi('^Icon',$font))
			{
				$fontList[] = $fontURL."/".$font;
			}
	}
closedir($fontDir);
array_unshift($fontList, "Choose a font");

just after

1
2

$themename = "Theme-Name";
$shortname = "sn";

These dual lines have been combined in a Net Tuts article.

This is a duty which functions identical to this:

  • create a url which will be used to entrance a rise files in a CSS
  • open a rise directory
  • read all files contained in a directory
  • exclude sure record names as good as directories
  • place all fonts found inside a list

#5 – Create a Font Options

Anywhere between a rest of your thesis options combined in a Net Tuts article, place this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

    array( "name" => "Fonts",
        "type" => "section"),
    array( "type" => "open"),
 
	 array( "name" => "Headers",
		"desc" => "Choose a font",
		"id" => $shortname."_header_font",
		"type" => "select",
		"options" => $fontList),
 
	 array( "name" => "Navigation",
		"desc" => "Choose a font",
		"id" => $shortname."_nav_font",
		"type" => "select",
		"options" => $fontList),
 
	 array( "name" => "Main Body",
		"desc" => "Choose a font",
		"id" => $shortname."_body_font",
		"type" => "select",
		"options" => $fontList),
 
	 array( "name" => "Footer",
		"desc" => "Choose a font",
		"id" => $shortname."_footer_font",
		"type" => "select",
		"options" => $fontList),
 
    array( "type" => "close"),

#6 – The CSS Part One

We’re starting to embody a fonts in a header.php record so which we can request them to a web elements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<style type="text/css" media="screen">
@font-face {
  font-family: "header-font";
  src: url("<?php relate get_option('sn_header_font'); ?>");
}
@font-face {
  font-family: "nav-font";
  src: url("<?php relate get_option('sn_nav_font'); ?>");
}
@font-face {
  font-family: "body-font";
  src: url("<?php relate get_option('sn_body_font'); ?>");
}
@font-face {
  font-family: "footer-font";
  src: url("<?php relate get_option('sn_footer_font'); ?>");
}
</style>

Important! Do not dont think about to reinstate sn with your own theme’s reduced name.

#6 – The CSS Part Two

In your style.css file:

1
2
3
4
5
6
7
8
9
10
11
12

h1,h2,h3,h4,h5,h6,h7  {
  font-family: "header-font";
}
p  {
  font-family: "body-font";
}
.navigation  {
  font-family: "nav-font";
}
#footer p  {
  font-family: "footer-font";
}

That’s it! Your last result should demeanour identical to this (unless we used your own thesis options page rsther than than following Net Tuts’):

font uploader

#7 – Going Further

The complement we’ve combined functions really good as good as is significantly improved than any wordpress rise plugin I’ve been means to find. Here have been a small suggestions for starting a small serve as good as creation it even better:

  • Add jQuery as good as or Ajax to a upload form to forestall reloading of a page as good as to emanate cleanser blunder / success messages
  • Create options for some-more specific site elements, such as p tags with a category of “antique”, rsther than than only general elements as I’ve finished above.
  • Allow some-more rise record sorts by adding their mime sorts as good as extensions to upload.php

Custom Font Uploader for Wordpress Themes

See strange here:
Custom Font Uploader for Wordpress Themes