WordPress Customization for Higher Educational Institution’s Websites

72
WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT BINUS UNIVERSITY OCT 2013 Friday, October 18, 13

description

Materi mengenai kustomisasi WordPress untuk website institusi pendidikan. Dibawakan oleh tim DMD BINUS (Fikri Rasyid & Deni Tri Hartanto) untuk WordCamp Indonesia 2013, Yogyakarta, 18 Oktober 2013.

Transcript of WordPress Customization for Higher Educational Institution’s Websites

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

WordPress Customization for Higher Educational Institution’s Websites

WordPress Customization for Higher Educational Institution’s Websites DIGITAL-MEDIA DEVELOPMENT ● BINUS UNIVERSITY

Friday, October 18, 13