Bạn đang muốn thiết kế 1 theme WordPress hoàn chỉnh? Hãy click vào!

WordPress đang là nền tảng web/blog phổ biến nhất hiện nay! Nhiều website lớn trên thế giới đang sử dụng WordPress bởi vì đây là nền tảng SEO rất tốt, nhiều người sử dụng, cộng đồng hỗ trợ đông đảo và đặc biệt là kho tài nguyên giao diện và plugin đi kèm rất khổng lồ.

Mặc dù theme WordPress chia sẻ trên mạng rất nhiều, từ free cho đến premium đều có đủ cả. Nhưng nếu bạn có khả năng design và code, thì hoàn toàn có thể tạo cho chính mình 1 WordPress Theme hoàn toàn đẹp theo ý thích của mình và do chính các bạn làm ra, hàng độc quyền luôn...

Hôm nay mình xin chia sẻ 1 bài tổng hợp toàn bộ những thứ mà các bạn cần để thiết kế theme WordPress, từ thiết kế giao diện cho đến coding.

1. DESIGNING YOUR THEME

Đầu tiên bạn cần thiết kế giao diện của mình đã, bạn có thể thiết kế nó trên Photoshop, sau đây là các tutorial, tài nguyên Photoshop dành cho thiết kế theme WordPress...

PHOTOSHOP TUTORIALS“BRUSH” UP ON YOUR PHOTOSHOP: 20 BLOG DESIGN TUTORIALS & .PSDS


“Brush” up on your Photoshop: 20 Blog Design Tutorials & .PSDs »

WORKING ON A MOVIE THEME


Working on a Movie Theme »

BRUSH UP ON YOUR PHOTOSHOP (PART 2): 20 HIGH QUALITY BLOG .PSDS


Brush up on your Photoshop (Part 2): 20 High Quality Blog .PSDs »

HOW TO CREATE A WORDPRESS THEME IN PHOTOSHOP

How to create a wordpress theme in Photoshop »

CREATE A MINIMAL WORDPRESS THEME IN PHOTOSHOP


Create a Minimal WordPress Theme in Photoshop »

PHOTOSHOP TEXTURES & PATTERNS20 REPEATABLE PIXEL PATTERNS


20 Repeatable Pixel Patterns »

APPLE IOS LINEN TEXTURE


Apple iOS Linen Texture »

PHOTOSHOP PATTERNS


Photoshop Patterns »

650+ FREE PHOTOSHOP PATTERNS


650+ Free Photoshop Patterns »

THE ULTIMATE COLLECTION OF FREE PHOTOSHOP PATTERNS


The Ultimate Collection Of Free Photoshop Patterns »

800+ PHOTOSHOP PATTERNS FOR YOUR NEXT WEB DESIGN PROJECT


800+ Photoshop Patterns For Your Next Web Design Project »

50 EXTREMELY BEAUTIFUL PHOTOSHOP PATTERNS FOR ELEGANT DESIGNS


50 Extremely Beautiful Photoshop Patterns for Elegant Designs »

8 SEAMLESS “DARK METAL GRID” PATTERNS


8 Seamless “Dark Metal Grid” Patterns »

MASTERING PHOTOSHOP: NOISE, TEXTURES, GRADIENTS AND ROUNDED RECTANGLES


Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles »

20 SUPERB ADOBE PHOTOSHOP TEXTURES


20 Superb Adobe Photoshop Textures »

2. CODING THE HTML / CSS
Sau khi đã có giao diện rồi thì bạn bắt đầu tiến hành viết code HTML/CSS cho nó, và sau đây là 1 số phần mềm hỗ trợ code, các tài nguyên như javascript sliders, các dropdown menu để tích hợp vào giao diện WordPress của bạn...

SOFTWARENOTEPAD ++


Notepad ++ »

COFFEECUP FREE HTML EDITOR


CoffeeCup Free HTML Editor »

HTML KIT


HTML Kit »

PS PAD


PS Pad »

CSS FRAMEWORKSBLUEPRINT


Blueprint »

THE 1140PX GRID SYSTEM


The 1140px Grid System »

LESS FRAMEWORK 4


Less Framework 4 »

THE SQUARE GRID


The Square Grid »

EZ CSS


EZ CSS »

ATATONIC


Atatonic »

BASELINE


Baseline »

TOAST


Toast »

960 GRID SYSTEM


960 Grid System »

SLIDERSEASY SLIDER 1.7 – NUMERIC NAVIGATION JQUERY SLIDER


Easy Slider 1.7 – Numeric Navigation jQuery Slider »

NIVO SLIDER


Nivo Slider »

25 AWESOME FREE JQUERY IMAGE SLIDERS AND CAROUSELS


25 Awesome Free jQuery Image Sliders and Carousels »

USEFUL JQUERY IMAGE SLIDERS AND GALLERIES TUTORIALS


Useful jQuery Image Sliders and Galleries Tutorials »

WOW SLIDER


Wow Slider »

20 USEFUL JQUERY PHOTO GALLERY AND SLIDER PLUGINS COLLECTION


20 Useful jQuery Photo Gallery and Slider Plugins Collection »

DROPDOWN MENUSSUPERFISH


Superfish »

SEXY DROP DOWN MENU W/ JQUERY & CSS


Sexy Drop Down Menu w/ jQuery & CSS »

SLIDING JQUERY MENU


Sliding Jquery Menu »

PERFECT SIGNIN DROPDOWN BOX LIKE TWITTER WITH JQUERY


Perfect signin dropdown box like Twitter with jQuery »

HOW TO BUILD A KICK-BUTT CSS3 MEGA DROP-DOWN MENU


How to Build a Kick-Butt CSS3 Mega Drop-Down Menu »

CSS3 DROPDOWN MENU


CSS3 Dropdown Menu »

CREATE VIMEO-LIKE TOP NAVIGATION


Create Vimeo-like top navigation »

FANCY DROP DOWN MENUS USING CSS AND JQUERY


Fancy Drop Down Menus Using CSS and JQuery »

A DIFFERENT TOP NAVIGATION


A Different Top Navigation »

ANIMATED DROP DOWN MENU WITH JQUERY


Animated Drop Down Menu with jQuery »

3. CODING THE WORDPRESS THEME
Sau khi đã hoàn thành xong giao diện HTML và CSS, bạn cần phải áp dụng nó vào WordPress. Tiếp theo sẽ những thành phần giúp cấu tạo nên Theme Options Panel và xây dựng nên các Shortcodes...

BLANK THEMES / FRAMEWORKSSTARKERS THEME


Starkers Theme »

HYBRID CORE


Hybrid Core »

THEMATIC, A WORDPRESS THEME FRAMEWORK


Thematic, A WordPress Theme Framework »

PRESSWORK


PressWork »

TOOLBOX: AN HTML5 WORDPRESS STARTER THEME


Toolbox: An HTML5 WordPress Starter Theme »

WHITEBOARD FRAMEWORK


Whiteboard Framework »

ROOTS THEME


Roots Theme »

THEME OPTIONS PANELSTHE UPTHEMES FRAMEWORK


The UpThemes Framework »

OPTIONS FRAMEWORK


Options Framework »

HOW TO CREATE A BETTER WORDPRESS OPTIONS PANEL


How to Create a Better WordPress Options Panel »

CREATE A WORDPRESS THEME OPTIONS PANEL


Create a WordPress Theme Options Panel »

WORDPRESS THEME OPTIONS PANEL FRAMEWORK


WordPress Theme Options Panel Framework »

SHORTCODESWORDPRESS SHORTCODES: THE RIGHT WAY


WordPress Shortcodes: The Right Way »

WORDPRESS SHORTCODE TUTORIAL: SIMPLE TO ADVANCED PART 1


WordPress Shortcode Tutorial: Simple to Advanced Part 1 »

GETTING STARTED WITH WORDPRESS SHORTCODES


Getting Started With WordPress Shortcodes »

WORDPRESS SHORTCODE TINYMCE BUTTON TUTORIAL PART 2


WordPress Shortcode TinyMCE Button Tutorial Part 2 »

CREATING A TOGGLE SHORTCODE FOR WORDPRESS FAQ’S PAGE


Creating A Toggle Shortcode For WordPress FAQ’s Page »

SHORTCODES ULTIMATE


Shortcodes Ultimate »

J SHORTCODES


J Shortcodes »

SHORTCODES PRO


Shortcodes Pro »

4. TESTING YOUR THEME
Phần cuối cùng của quá trình thiết kế theme WordPress đó là kiểm tra thử xem nó có lỗi lầm gì không trước khi đưa nó lên chạy online. Bạn có thể tạo hàng loạt các data demo để test, ví dụ như comments, tags, hình ảnh,...Có khá nhiều plugin hỗ trợ việc này, bạn có thể tham khảo dưới đây...

TEST DATATHEME UNIT TEST


Theme Unit Test »

PLUGINS FOR TESTINGDEBUG QUERIES


Debug Queries »

LOG DEPRECATED NOTICES


Log Deprecated Notices »

DEBUG BAR


Debug Bar »

THEME CHECK


Theme Check »

Đây là bài tổng hợp từ trang WPLift.com, các bạn có thể click vào từng ảnh demo hoặc liên kết dưới để đi đến bài viết cụ thể hơn ​