Roodhouse Tech Blog

Technology at Geneseo Community School District 228

Archive for the ‘Wordpress Tips and Tricks’ Category

A while back I used a cool online calendar program written in PHP which uses MySQL.  This Calendar product has not been supported for sometime and if you try to install it on newer machines you will get lots of PHP and MySQL errors.  I updated the installation files and the SQL installation script that sets up the database so that it functions on modern systems. calendarix Here is the latest version of Calendarix fixed to work on PHP 5.5 or higher and MySql 5x and higher.  To install extract the zip file and place on your web server.  Look inside the config directory to find the file.  This is where you setup the connection to a database for the calendar. Here is the official instruction file as well.  I create the database in Phpmyadmin then run the SQL commands from the config directory in phpmyadmin to setup the database tables correctly.  That is about it. Official Installation file. Calendarix Screenshot calendarixrunning   Calendarix Mini Calendar Screenshot mini
If you have updated your WordPress site to latest version and you use the JWPlayer version 6 you may have run across and error where your videos do not play. ¬†This is because of an slight error in one file on the JWPlayer which makes it incompatible with the newer WordPress. Good news is you do not have to update to JWPlayer Version 7 if you don't want to you can simply fix the one selected line of code or download my modified version of the plugin which is already fixed. jwplayerfixed¬†(JWPlayer 6.9 fixed) If you feel like manually fixing your own plugin you can by going to Plugins, click on JWPlayer and then choose the Editor. Here edit the file called jwplayermodule.php.   Look for this line of code */ define("JWP6_USE_CUSTOM_SHORTCODE_FILTER", true); /* and change it to¬†false¬†like this   */ define("JWP6_USE_CUSTOM_SHORTCODE_FILTER", false); /*   Thats it save and you the player should now work. jwfix
Hello,¬† here is how I like to publish Podcasts or videos onto a website running a wordpress engine.¬† This process has changed a bit since now all modern browsers can play MP4 (M4V) content directly without any plugins.¬† Also with recent versions of WordPress the built in player handles the native playback of MP4 perfectly and no plugins are really needed. Okay, so lets say I made a video on a Mac and saved it with Quicktime.¬† Chances are this video will be saved with an extension .mov.¬† Okay the problem with .mov is that they are huge and are terrible for publishing to the web.¬† Using quicktime you could export the video as a MP4 but I have found that it's compression settings are not ideal and still leave the video large. Okay so with a saved podcast in the .mov format.¬† I first convert it to MP4 using a program called Handbrake. You can visit Handbrakes website here¬† If you want to download the latest version for Mac you can click here. Okay so take a look at this mov clip. Deadmaubig Notice the file is 221 megs for a movie that is only 3 minutes and 7 seconds long. Okay so lets take this .MOV file and now load it into Handbrake. Handbrakes Icon. handbrakelogo   Okay with program open I select my .MOV file and now hit the button TOGGLE PRESETS so that I can choose iPad from the list.¬† Really this format is perfect for the web and you can ignore all other settings on this program.¬† It may look a bit confusing but really that is it. Pick your file hit iPad (or can choose Android) then hit START,¬† I am saving my file to the Desktop and will have a new file that ends with .MP4. Note: If you choose iPad or iPhone or Android your video will still be playable on all devices, including iphones and android phones and computers.¬† The MP4 format is universal with modern internet devices and will play on just about anything. handbrakeworking     Okay when it is all done lets compare the sizes. So the file was 211 megs before and now is: deadmausmallergood   15.9 megs.¬† Yes that is correct more then 10 times smaller.¬† This means it will load almost 10 times faster and if you want multiple people to view your site and watch your podcast at the same time it will work way better.¬† If you have ever uploaded a video to youtube you will notice that before you can view it,¬† you will see a message about youtube processing the video.¬† What are they doing?¬† You guessed it they are using a converter and compressing it to mp4 so that the video will play on all devices, will be small and load quickly. If you follow my method above you will do be doing the same thing and avoiding the advertising nightmare land which youtube has unfortunately become. Okay so now to embed the video. Just Go to your website, edit a post or page and then click on ADD MEDIA. addmedia   Choose your MP4 file you converted with Handbrake and Upload. Now simply choose Embed with Media Player (built in) embedwithmediaplayer Thats it,¬† here is my final product.¬† The file will auto embed and be playable,¬† if it cannot be playable on a device directly it will auto detect and the link will say download.¬† In this case click download and the video will still play.¬† If you are using Chrome, Firefox or Safari you should be able to play the file directly on the website. Try this post on a smartphone and you will see the video loads as well .. and quickly 🙂
One problem when uploading videos online is the problem with needing plugins, players, codecs etc for them to play.  Also some browsers behave differently and handle video differently.  For example Chrome will play a h264/mp4 file natively in the browser, where as Firefox as of version 27 will not and will instead download the file.  Some browsers and configurations will prompt users about missing plugins / etc. This just translates to frustration on the audience side of things who may be using a phone, tablet, laptop, or who knows what device. I have the found the easiest way to show and embed a video is to the use the JW Player plugin.  Here is a quick video on using installing and using this plugin to upload video.  This player creates a youtube like player in the website itself making it really easy for a visitor to watch. [jwplayer mediaid="3308"] In a nutshell after plugin is installed, upload a movie then click Insert with JW Player. embed
There are multiple ways to use YouTube.  You can subscribe to channels you can comment and join the YouTube community or if you are like the me you may just want to watch the video.  This applies to schools and educational settings where teachers and students find value in watching certain videos but do not need comments or suggestions for other videos / in fact these things actually distract and more importantly slow things down.  The fix for this has been created by Google itself and is called YouTube Feather. Click here to Access Google Feather and check the box to participate in the Beta  Youtube Feather Feather works by removing google + integration, removing comment section, removing suggested videos, and by defaulting to playing mid level video quality based on network connection.  It also minimizes advertising - overall it returns to the simplicity and core of what makes YouTube great. Again Feather is great for use in Educational settings where users post inappropriate comments or where suggested videos that pull up with the content are off topic or just simply inappropriate.  Lets hope Google does not kill this beta and keeps it going. youtubefeather
I spoke with a Chemistry teacher at the High School Today who wanted a simply way for students to submit assignments to them but did not want to use email. ¬†I looked at a few PHP scripts for a simply upload but then ran across a simply widget that does the job nicely. ¬†Its called Upload Widget, ¬†pretty straightforward. uploadwidget1You can change the settings on the widget to pick which kind of files are approved for uploading and change the title. ¬†In this case changed to Submit an Assignment.   uploadwidgetHere you can see edited the Title then added the following files types, pdf, doc, ppt, docx, etc. ¬†I also created a subfolder on the webiste called dropbox where all the uploads will reside. Now on the teachers machine I create a shortcut to this same location but logged in with full admin privileges. ¬†This way the teacher clicks the shortcut link on their laptop and can drag and drop files and delete, organize move to there own desktop. Thought I would share this because this method actually works well and is end product pretty slick and easy from both Teacher and Student perspective. ¬†Student just clicks on your website and hits upload and they are done. ¬†Students cannot¬†view the upload or see other uploads so you have built in protection from anyone looking to "borrow" another students assignment. There is a little bit of background work on the web server but only about 5-15 minutes setup time . ¬†I am hosting these sites on Linux and have created the dropbox subfolder as a samba share to enable teacher full access via a login. ¬†This allows the teacher to have a simply desktop shortcut on a Linux/Mac/ or PC machine that gets them to the Drop location with full admin access. ¬† You could use NFS, AFP, Webdav really just about whatever sharing protocol you want I just went with samba ¬†because the teacher had both a PC Laptop and Mac Desktop. Maybe another way to make a teacher website more functional / Easy way for student to submit an assignment from school or home from a variety of devices. You can download the widget here (zip): ¬†upload-widget   SubmitAssignment  
This summer I migrated two servers to Linux based platforms running on Dell PowerEdge R210's. ¬†Previously a G5 Xserve was running our mail server for the last 7 years and it has done a great job. ¬†Kerio no longer supports the PPC based architecture meaning no more software updates. ¬†In addition the age of the machine itself in terms of hardware meant ready for a change. ¬† ¬†Kerio now has a true 64 bit version of their software and supports Linux natively. Kerio Running On Ubuntu 64bit Kerio The migration process was smooth although time consuming, ¬†with over 400 active email accounts and 300 gigs of information simply copying the info took well over 5 hours. ¬†The configuration files are for the most part interchangeable and could simply copy from old server to the new with just some minor changes to file paths. ¬†Mac uses /usr/local/kerio and Linux uses /opt/kerio. The new version of Kerio supports jabber protocol and would like to enable this having the server handle all instant messaging, video chats and email. In a similar move I setup another server which hosts all staff websites and it running latest version of Apache, PHP. ¬†The Windows server that these sites were previously on was 32 bit based and was starting to max out the RAM limit of 3.5Gigs. ¬†PAE extension was possible but simply running on a dedicated 64 bit server with less overhead seemed a better path. ¬†Moving the information was pretty slick in this case as well (200 gigs of website data, 70 websites). ¬†The only trouble here was correcting URL pathnames to case sensitivity (Windows not case sensitive, all flavors of Linux are case sensitive). Both Servers are R210 Dell PowerEdge running a RAID 1 configuration with Western Digital SE4 drives. ¬†Plan to continue to reduce the number of Microsoft based servers with Linux. r210    
apple_ibooks_authorThe iBooks Author applicaton saves and exports its finished products as an .iBooks file.¬† By default Apache and IIS do not allow the MIME type .ibooks or really any really any form of ebook besides .pdf by default.¬† The ibook format is a slight variation of .epub format but with some custom DRM restrictions and Apple platform lock-in measures.¬† To allow WordPress sites to add both .epub and .ibooks formats directly to a webpage you must set the mime type in either the Apache configuration or by using a WordPress plugin. Using the PJW Mime Config plugin for Wordpess is a very easy way to quickly add new mime file types. You can download the Plugin Here pjw-mime-config.1.00 Or you can simply login to the admin portion of WordPress, click on Plugins, click on Add new and search for PJW Mime Config. PJMime   After installing the Plugin simply make sure it is ativated then click on Settings | and choose Mime types. Mime Types Now simply add the correct file extension for the file types you want to be able to upload and host. For example ibooks you could use: File Extension:¬† .ibooksMIME type:¬† video/ibooks For epub you could use: File Extension: .ibooks Mime type: video/epub Example for ibooks Thats it, after you hit add mime type you can now upload files with this extension and not get a security warning. registeredmimetypes If you are interested in MIME (Multipurpose Internet Mail Extensions) types take a quick look here.
WPTouch is a great wordpress plugin to add instant mobile phone / touch formatting to any wordpress based site.¬† The latest free version of the plugin is 1.9.6 is outstanding and only missing a few options that allow for greater customization.¬† One option is the ability to remove the mobile site on | off toggle attached to the footer section of each mobile formatted page.¬† If you are a¬† big fan of the plugin and do not like editing code simply purchase the the Pro plugin which provides this option under settings, the pro version can be purchased from¬† If you are happy with the free version and are a bit more tech savy you can edit the footer.php file that is located within the plugins directory. In most cases this will be site installation/plugins/wptouch/themes/default/footer.php If you edit this file you will see a section that looks like this: To remove the section with the Mobile Site on | off toggle simply delete this highlighted section.¬† Be aware that if you update this plugin it is quite likely that this file will also be updated and this seciton of code will be returned. The free version of this plugin can be found here. I have also attached a custom modified version of the plugin which has the mobile toggle switch removed already.¬† WPTouch No Mobile On | Off Toggle.  
Here are some handy capture Video and Audio tools that allow you to save and embed content from the web.¬† Additionally I have placed some other handy add-on's and tools that make for a better web surfing experience. Goals of this Post: 1.¬† Learn how and why to manipulate and save video from the Web. 2.¬† Learn how and why to convert video from various video codecs for playback on mobile devices. 3.¬† Learn how to extract audio tracks from Video files on youtube. 4.¬† Learn how to add plugins to Firefox that allow customizations and more features. 5.¬† Learn how to embed video as a link on a WordPress Page. 6.¬† Learn how to embed Video directly and have it play natively in a WordPress based page. Get Latest Version of Firefox and Other Useful Apps To Start lets pick the browser that allows the most customizations - Mozilla Firefox.¬† (Chrome or Chromium would be a close second). Latest Version of Firefox (14.01 Mac) HandBrake - best Overall Video to iOS Converter for Mac (Great Converter for other things as well) VLC (VideoLAN) - Best Overall Video Player for all Computers Period.¬†¬†   Here is a quick Podcast tutorial on how to install (Click Here to Download or Watch Below) [embedwidth src=""] ¬†Add Plugins to Firefox With the latest version of Firefox installed now lets add a couple of basic plugins that will make overall surfing the web better/ faster. ¬†AdBlock Plus(Firefox Version) This is a great plugin as it simply is designed to try and remove/block advertisements from as many websites as possible.¬† In terms of both network flow and user enjoyment advertisements waste both bandwidth and time.¬† With more and more people connecting to the web it has evolved since the early 90's and now is heavily inundated with adds and at times can resemble TV.¬† Not a perfect plugin but overall helps things run smoother and web pages are slightly less annoying with ads. Video Download Helper Version 4.99 for Firefox This is my favorite video download plugin.¬† What it does is extract the source file from as many video based sites as possible allowing you to save the video file locally.¬† Site works well on youtube and many other popular video hosting sites.¬† Look youtube is great,¬† easy to use, easy to upload but in the last year or two has taken a couple steps closer to TVness.¬† Notice the number of advertisements in the form of 30 second commercials and banners across the bottom, yes believe it or not there was a time when youtube did not have ads.¬† Now with the help of Adblock Plus and Video Download helper you can quickly download a video and save it, allowing you to play it back to your class or embed in your own website advertisment free :). Using Download Video Helper Here is a screenshot of me using Video Download Helper to download a YouTube Video.¬† Notice where I have put a little red circle,¬† if you see the little triangle next to the floating balls symbol this is where you can save the video.¬† When the three colored balls are lit up and rotating this means that video download helper has found video it can extract.¬† If the three balls are grey and not moving, Video Download helper is unable to access the video source. In the example below notice there are lots of different options to choose from.¬† You will see 240p flp, 360 flp, something.3gp, etc.¬† The rule of thumb here is always get the MP4 Version if it is available.¬†¬† Apple and Apple Products (iPad, iPhone) like MP4.¬† You can see in my screenshot I have selected the MP4 option and can now DOWNLOAD and save where I want. Okay so lets say that you have done this but none of the optoins let you save the file as MP4.¬† You are not out of luck here you just now need to do an extra step and convert the video to MP4.¬† You will want to convert the Video to MP4 if you want visitors to be able to view your video on an iPad, iPhone, iPod, etc.¬† If your audience is using a full computer this is uncessary. Converting Video to MP4 Okay again let me cover the why this is something you may want to do.¬† MP4 is a video container and codec that Apple uses and this format can be played on iPad, iPhones, iPods, Computers you name it.¬† The FLV format is flashed based and can only be played by devices that have flash installed - there is no flash on ios devices. Video download has a built in converter but I have found that it does not really work that well with FFMpeg installed.¬† So instead to convert I recommend using Handbrake. With VLC and Handbrake installed - Handbrake can convert videos into formats that are easily playable on the ipad.¬† For example I will download a FLV video off of youtube and then convert with Handbrake to MP4 (iPhone Optimized).¬† Here is a quick podcast on doing a conversion with Handbrake. Click Here to Download Podcast or Watch Below [embedwidth src=""] Converting YouTube to MP3 Audio Files Often users find it useful to create a quick audio file from a youtube video. ¬†This process is quite easy thanks to a useful site called¬†. ¬†Process is easy to do you simply copy and paste a youtube URL into the box and hit convert. Click here to download a quick podcast on using or watch below. [embedwidth src=""]¬† Embedding into WordPress using the Embed-Width Plugin If you would like to make it so someone visiting your website can view the video natively on iPads, iPhones, iPods, Android Based, PC or Mac directly on your website itself you can using a plugin called Embed Width. ¬†There are actually a few plugins and methods in which you can do this but this one seems to work well and have tested it out on iOS and Android devices. Here is a screenshot viewing this site from an iPhone notice the videos can be easily played and viewed. To do this takes a bit more effort so I have placed this final podcast at the bottom of the post. ¬†So lets say you have a video you have saved from the internet and converted to mp4 and now want to embed to play natively in the web browser. ¬†Watch the Podcast Below to show how I embed a video using the Embed-Width plugin. Click here to download the Podcast or Watch Below. [embedwidth src=""] Other Ways to Embed - HTML 5 Method & Podcast Producer Link to my website on Post on HTML 5 Direct Embedding Method. Using Podcast Producer and Embedding (older version) Another way to save YouTube -
January 2017
« Sep    

Roodhouse Tech on Twitter