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:
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’):
#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
See strange here:
Custom Font Uploader for Wordpress Themes
