Web Designer’s Day: Twenty WordPress Tutorials to Boom Up the Developments

Aug 27, 2013
161
0

WordPress is one of the most intuitive CMS ever created. Due to this simplicity WordPress can be handled even by a child. Within a WordPress blog or site you can do whatever you want. Customization has never been a problem since there are so many beautiful templates both free and premium.

So, when you start a new project, probably you would want to amaze your customer with something cool. In this blog post we’ve united 20 Awesome WordPress Tutorials for you to fill your new projects with some interesting thing or just to learn how to ‘work out’ WordPress sites.

Twenty WordPress Tutorials

Below you will find Twenty WordPress Tutorials that are aimed to make WordPress designers and developers even more skillful. But generally these 20 pieces of study will be helpful for everyone willing to master WordPress CMS.

Responsive WordPress Bootstrap Theme Tutorial

wordpress tutorials for designers

This tutorial will teach you how to make our own responsive WordPress theme using Bootstrap.

***

Building Custom WordPress Widget

1
2
3
4
5
6
7
add_action( 'widgets_init', 'register_my_widget' ); // function to load my widget  
function register_my_widget() {}                        // function to register my widget  
class My_Widget extends WP_Widget () {}     // The example widget class  
function My_Widget() {}                     // Widget Settings  
function widget() {}                        // display the widget  
function update() {}                        // update the widget  
function form() {}                          // and of course the form for the widget options

Comparing to building plugins - widget making is more simple and straightforward. If you have never built widgets before, this tutorial will be really helpful for you.

***

Designing for WordPress: Part One

If you're just starting with WordPress, this video will be a perfect acquaintance with this platform.

***

Designing for WordPress: Part Two

Then we take a look at the Photoshop design and note some of the important aspects. Layout, color palette and font choices are all important things to consider as well as the overall feel.

***

Creating Custom WordPress Homepage

1
<!--?php /* Template Name: homepage */ ?-->

Check out this tutorial, there you will find how to create custom page template that can be added to the current theme. The aim of the tutorial is to create a customized home page that doesn’t necessarily follow the same theme design as the rest of your site.

***

Creating your first WordPress child theme

1
2
3
4
5
6
7
8
/*
Theme Name:     Your Child Theme's Name
Description:    Your theme's description.
Author:         Your Name Here
Template:       twentyeleven
(optional values you can add: Theme URI, Author URI, Version)
*/
@import url("../twentyeleven/style.css");

In this tutorial, you will find how to create a child theme based on Twenty Eleven. Some handy plugins and useful tricks will be used to create child theme.

***

WordPress Admin Area Customization

1
2
3
4
function login_stylesheet() {
wp_enqueue_style( 'login_stylesheet', get_template_directory_uri() . '/css/login.css' );
}
add_action('login_head', 'login_stylesheet');

WordPress admin is carefully thought out, anyways you can customize it and give some personal touch. This tutorial is a must-read for you.

***

Color Schemes for Your Website

wordpress tutorials for designers

As you know choosing colors for a website is much easier than choosing colors for your bedroom. As fir the website you try out bunch of options to see which works better. Interested to know more, this tutorial is waiting for you.

***

How to Code WordPress 3.0 Theme From a Scratch

wordpress tutorials for designers

In case you want to test your strength in coding WordPress themes, check out this tutorial. After reading it through you'll be able to create a blogging-ready, minimal theme.

***

How to Add Pinterest Button to WordPress Blog

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
(function() {
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "http://assets.pinterest.com/js/pinit.js"; 
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
</script>

In this article, we will show you how to add the Pinterest “Pin It” button to your WordPress blog.

***

WordPress Cheat Sheet

wordpress tutorials for designers

This chart is mainly for web designers and developers. It’s pretty handy and comes useful when you are trying to tweak/edit your WordPress blog. As an Average Joe, you don’t need to know about all those things. By the way, have you started a blog already?

***

How to Learn WordPress

wordpress tutorials for designers

This is a step-by-step guide on how to learn WordPress, aimed at beginner users who are trying to become competent with the platform in their spare time.

***

How to Make Featured Post Carousel for WordPress

wordpress tutorials for designers

We’re going to be modifying the Kubrik theme that comes prepackaged in WordPress to be able to feature posts at the top of the page.

***

How to Build Basic Portfolio WordPress Theme

wordpress tutorials for designers

Portfolio websites should be treated wisely to make things work right. See the tutorial to find how how to create a perfect portfolio website.

***

How to Create Typography-based WordPress Blog Theme

wordpress tutorials for designers

Building design work without graphic content can be a difficult task. Check out this tutorial to find the short-cut to the deadline. This layout is based on a strict grid to balance the design and tie everything together.

***

Building Multilingual Site WordPress

wordpress tutorials for designers

Take your WordPress site to the world. Shannon Smith, founder of Café Noir Design, explains what components are needed for a successful multilingual WordPress site

***

How to Create Additional Image Sizes in WordPress

1
2
3
add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

WordPress has a built-in feature Post Thumbnails - Featured Images. Using this core functions in your theme can essentially eliminate the need of a third party script like TimThumb in most cases.

***

How to Create a Photo Album Gallery in WordPress Without a Plugin

 

Photo album lets your clients showcase all the images they want. And what if they wanted to create one without using any plugins? In this article, you will learn how to create a photo album in WordPress without a plugin.

***

How to Create a Daily and Weekly Email Newsletter in WordPress

1
 

Talking to user visitors is dead-important - newsletter is one of the best options to make it work. Along with "good talks" "good looks" really matters. In this tutorial you will learn how to make a cool newsletter.

***

Implement Google Custom Search into WordPress

wordpress tutorials for designers

Search function is a must-have in every website. Need one? The tut is waiting for you.

***

These tutorials were handpicked specifically for you. If you have some other on your mind our comments section is waiting for your links.

AB
Alex Bulat
4
v Complain

Recommend this post to others!

Found the post interesting? You might also like:

Become the first to comment

Last Updated : Dec 20, 2017

Rating of post