WordPress Customization for Higher Educational Institution’s
Websites
DIGITAL-MEDIA DEVELOPMENTBINUS UNIVERSITY
OCT 2013
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Fikri Rasyid@fikrirasyid
http://[email protected]
Deni Trifacebook.com/[email protected]
Friday, October 18, 13
Institution
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Higher Educational Institution
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
ALUMNI & binusian careeradmission
INPUT process OUTPUT
Community Industry
management
Registration Study Exam
SERVICES
registrant student alumni
Management Process inHigher educational institution
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
ALUMNI & BINUSIan CareerAdmission
Community Industry
Management
Registration Study Exam
SERVICES
INPUT Process OUTPUT
Registrant Student Alumni
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
ACADEMIC PROCESS +
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
ACADEMIC PROCESS +
BINUS University Sitebinus.ac.id
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
ACADEMIC PROCESS +
Departments & Divisions’ Sitesbm.binus.ac.idwebsimprug.binus-school.netbinus.edubinus.tvdmd.binus.ac.idand 40+ more
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
ACADEMIC PROCESS +
BINUS TRACKINGdmd.binus.ac.id/tracking
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
ACADEMIC PROCESS +
BINUS TICKETdmd.binus.ac.id/tICKET
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
ACADEMIC PROCESS +
ACHIEVEMENTSAchievement.binus.ac.id
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
ACADEMIC PROCESS +
BINUS MICROSITEsocs.binus.ac.id/beefest-mobile-2013/msi.binus.ac.id/commit/binus.edu/iea/binus.edu/porsekary/english.binus.ac.id/national-english-competition/
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
ACADEMIC PROCESS +
BINUS CALENDARevent.binus.ac.id
Friday, October 18, 13
Today’s FOcus:
Event
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Today’s FOcus: Event
Friday, October 18, 13
Let’s Talk
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
BINUS MICROSITE BINUS CALENDAR
&
Friday, October 18, 13
The Concept
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
BINUS MICROSITE BINUS CALENDAR
&
Friday, October 18, 13
BINUS Microsite
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Rationale
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
• Continuous need for organizing an event
• Demand for an event website become inevitable
• Every Division / Department website is already a child site of
binus.ac.id
• Whereas it takes 1 more depth for the event website
Friday, October 18, 13
THE PLAN
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
msi.binus.ac.id
Friday, October 18, 13
THE PLAN
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
msi.binus.ac.id
Friday, October 18, 13
THE PLAN
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
msi.binus.ac.id msi.binus.ac.id/commit/
Friday, October 18, 13
The Plan
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Display information, registration, schedule & Venue, paper submission, gallery
Friday, October 18, 13
The Plan
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Display information, registration, schedule & Venue, paper submission, gallery
Friday, October 18, 13
The Plan
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Display information, registration, schedule & Venue, paper submission, gallery
Friday, October 18, 13
The Plan
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Display information, registration, schedule & Venue, paper submission, gallery
Friday, October 18, 13
The Plan
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Display information, registration, schedule & Venue, paper submission, gallery
Friday, October 18, 13
BINUS Calendar
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Rationale
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
• Most sub-sites have an “event” section
• According to BINUS’ Marketing Communication Division, there are
at least 9 events reported monthly across BINUS
• If we really think about it, an academic institutions must have this
“academic plan”
Friday, October 18, 13
Let’s make a calendar, then
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
THE PLAN
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
CENTRALevent.binus.ac.id
Other site Abinus.ac.id
Other site Bscdc.binus.ac.id
Other site Cand many moore
Friday, October 18, 13
THE (REVISED) PLAN
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
CENTRALevent.binus.ac.id
Other site Abinus.ac.id
Other site Bscdc.binus.ac.id
Other site Cand many moore
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
CENTRALevent.binus.ac.id
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
CENTRALevent.binus.ac.id
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
The “CLIENTS”everywhere
binus.ac.id BINUS.edu scdc.binus.ac.id
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
The Tricks
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
BINUS MICROSITE BINUS CALENDAR
&
Friday, October 18, 13
BINUS Microsite
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
THE PLAN
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
msi.binus.ac.id
Friday, October 18, 13
THE PLAN
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
msi.binus.ac.id
Friday, October 18, 13
THE PLAN
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
msi.binus.ac.id msi.binus.ac.id/commit/
Friday, October 18, 13
Simple Solution
• Provide a new installation of Wordpress multisite for every
department that wanna hold an event
• Create a subsite and theme for each and every event
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Disaster
• it's impossible to handle the rapidly request for event from every
department
• Must maintain dozens of WordPress installation
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Better Solution
• Create a system that capable of building a microsite inside a
wordpress website, even though it's a subsite
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Here’s How it looks
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Here’s How It Looks
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Here’s How It Looks
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Here’s How It Looks
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Here’s How It Works
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Store it
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Rewrite, Flush, & Redirect
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Rewrite, Flush, & Redirect
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Microsite Redirect
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
msi.binus.ac.id/commit/
Friday, October 18, 13
THE API
• Rewrite_API(http://codex.wordpress.org/Rewrite_API/add_rewrite_rule)
• Administration Menu Functions(http://codex.wordpress.org/Administration_Menus)
• Options API http://codex.wordpress.org/Options_API
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Lesson Learned
• Microsite hooks & filters are for itself only
• Disable conflicted hooks & filtersi.e.: wp_ enqueue_style / wp_enqueue_script
• Convert every link of wordpress object in navigation menu / post
into microsite pattern link.www.abc.com/2012/12/{page-slug} is converted into www.abc.com/{microsite_name}/article/{page-
slug}
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Microsite hooks & filters Are For Itself only
1. Detect the environment
2. Hook into
template_redirect to add
microsite’s functions
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Disable conflicted hooks & filters
1. Create a function for
cleaning intended hooks
2. Get list of every hooks/
filters that we want to
disable, (the list is set by
administrator)
3. Loop the listed hooks
and call remove_filter for
every hooks
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Convert every on-site link into microsite pattern link.
1. Get the URL string from
href attribute and the
inner HTML of “a” element
on the post body /
navigation menu
2. pass the string on to
function
“microsite_article_convert
er” that responsible to
convert it into our
microsite pattern
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Convert every on-site link into microsite pattern link.
1. Get the URL string from
href attribute and the
inner HTML of “a” element
on the post body /
navigation menu
2. pass the string on to
function
“microsite_article_convert
er” that responsible to
convert it into our
microsite pattern
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Let’s extend the microsite
Assuming the environment is clean, we can put our creativities
here:
1.Implant any microsite feature as much as you wish
2.Add new redirection filter
3.Put every hook / filter based on your needs
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
BINUS Calendar
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
THE PLAN
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
event.binus.ac.id scdc.binus.ac.id/event/
Friday, October 18, 13
THe Plan
• Create a centralized event sitehttp://event.binus.ac.id
• Every site should have an event pagehttp://division_name.binus.ac.id/event/
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Here’s How It Looks
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Here’s How It Looks
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Lesson Learned
• Quite tricky queries, especially for the monthly view
• WordPress’ default XML-RPC Component can not be used for our
queries
• Extend the XML-RPC Components so the sub-site can fetch and
display similar result, only filtered to their own program taxonomy
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Thou Shall Extend WordPress’ XML-RPC Components
1. Filter xmlrpc_methods
2. Add new XML-RPC
component to it
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY
Friday, October 18, 13
Top Related