wordpress layout for online magazine
DESCRIPTION
Online Magazine layout slide for Bandung Blog Village's workshop: "Online Magazine for High School Student using WordPress", Comlabs ITB Dec 20, 2008TRANSCRIPT
![Page 1: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/1.jpg)
http
://w
ww
.flic
kr.c
om/p
hoto
s/ky
mbe
rlyan
ne/2
9133
3284
9/ht
tp:/
/ww
w.f
lickr
.com
/pho
tos/
kym
berly
anne
/291
3332
849/
Wordpress
by Bandung Blog Village:Ryan (deathrockstar.info) & Diki (chickenstrip.org)
for online magazinelayout
![Page 2: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/2.jpg)
Who am IWho am I ??
RyanRyan - blogger & journalist @ www.deathrockstar.info- blogger & journalist @ www.deathrockstar.info - music enthusiast & college student (ars unpar)- music enthusiast & college student (ars unpar)
DikiDiki - blogger & comic artist @ www.chickenstrip.org- blogger & comic artist @ www.chickenstrip.org - web programmer & (formerly) web designer- web programmer & (formerly) web designer
![Page 3: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/3.jpg)
http
://w
ww
.flic
kr.c
om/p
hoto
s/sh
eriff
of0/
3001
6929
51/
http
://w
ww
.flic
kr.c
om/p
hoto
s/sh
eriff
of0/
3001
6929
51/
wplayout1
![Page 4: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/4.jpg)
default default themethemeblog banget, xoxo...blog banget, xoxo...
![Page 5: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/5.jpg)
themeintroduction
![Page 6: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/6.jpg)
header
footer
postsidebarmenu
(widgets)
![Page 7: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/7.jpg)
magazinelooks2
http://www.flickr.com/photos/blackbiscuits/1615652119/http://www.flickr.com/photos/blackbiscuits/1615652119/
![Page 8: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/8.jpg)
professional professional magazinemagazine
![Page 9: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/9.jpg)
cnn.com
![Page 10: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/10.jpg)
how about how about wp wp based ?based ?
![Page 11: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/11.jpg)
media-ide.com
![Page 12: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/12.jpg)
twentea.com
![Page 13: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/13.jpg)
http://flickr.com/photos/cayusa/2896983287/http://flickr.com/photos/cayusa/2896983287/
okay,how?3
![Page 14: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/14.jpg)
download download arthemiaarthemiamagazine-like – made in bandung!magazine-like – made in bandung!
![Page 15: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/15.jpg)
extract to /wp-content/themes
![Page 16: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/16.jpg)
wp-admin, appearance, arthemia
![Page 17: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/17.jpg)
select & activate
![Page 18: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/18.jpg)
voila! voila! getting close!getting close!still need some customizationstill need some customization
![Page 19: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/19.jpg)
Arthemia Arthemia RulesRules
- create - create “headline”“headline” and and “featured”“featured” category category
- make arthemia's files writable- make arthemia's files writable
- hack some index.php codes for categories- hack some index.php codes for categories
- make the folder - make the folder “scripts”“scripts” and and “cache”“cache” writable writable
- custom field - custom field “Image”“Image” on the post on the post (with image path.. not URL, for auto image resize) (with image path.. not URL, for auto image resize)
![Page 20: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/20.jpg)
create create categoriescategories
![Page 21: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/21.jpg)
1345678
3 6 5 4 8
category
home
edit index.php
![Page 22: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/22.jpg)
set headline set headline & featured& featured
![Page 23: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/23.jpg)
headline/featured
custom field: Image
![Page 24: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/24.jpg)
widgets, widgets, plugins, plugins, css, css, custom imagescustom images
![Page 25: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/25.jpg)
magazine magazine lookslookscustomize more!customize more!
![Page 26: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/26.jpg)
http://flickr.com/photos/ikhlasulamalhttp://flickr.com/photos/ikhlasulamal
designtrend4
![Page 27: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/27.jpg)
web 2.0-ish?
vibrant,hi-contrast
colors
mirror effect / reflection
Also: centered layout, oversize text, glossy icons,highlight area, screenshot reflection
round flashes
glossy/sheen,3D effect
roundedcorners
gradients
diagonallines
plenty ofspaces,
clear text
backgroundsolid?
gradient?clean white?
![Page 28: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/28.jpg)
http://flickr.com/photos/quinndombrowski/2587844905/http://flickr.com/photos/quinndombrowski/2587844905/
and one more thing...
![Page 29: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/29.jpg)
![Page 30: WordPress Layout for Online Magazine](https://reader030.vdocuments.site/reader030/viewer/2022020207/55516effb4c9057e458b488c/html5/thumbnails/30.jpg)
Thank You !
http://www.slideshare.net/niwat0ri
Diki Andeas aka. niwat0riEmail: [email protected]: www.chickenstrip.org
Credits:Free images taken from www.sxc.huFlickr CreativeCommons licensed image collections (URL at each page)Ryryn & Puty Karina Puar's image collections