Saturday 27 August 2016

Foundation of Developing WordPress Website

It's common for people to start with WordPress for their own website. It's not only for blogging, which is superb platform, but also for any kind of website, especially businesses to showcase their products or services.

Well, let me discuss the foundation about developing WordPress.

#1 Plan and Sketching

From starter we will have some brainstorming, what design should we be using, what theme, what is the problem we want to solve, what is the market we want to target for and other initial planning that we would do.

Then we will sketch out the design, and planning what content we want to put inside. Planning is crucial as we want to avoid unseen issue while developing the website. Try to squeeze all the possibilities and draft a finalized sketch and repeat until we have some satisfiying result.

※ If you have the already loved template you make skip #2 #3 as we don't have to develop the website from scratch.

#2 Responsive Static Website

Then what we will do as website designer is to develop the **static website** using Bootstrap. Now, Bootstrap is a framework to make website responsive easier (and of course save time) by applying their rules. lg, sm, md, xs for each screen category, the layout will automatically changed when we resize the browser screen. And when user on the mobile phone the layout will be xs or sm. We will create the static page for all pages. What we focus here is to have the final layout on the development not the content yet. However by putting the actual content will be help too.

This phase is quite challenging because we develop new site from scratch, probably the biggest value with developing custom WordPress site. Appreciate to have the custom theme, because you are the only one who have this theme.

This will use HTML, CSS, JavaScrip and Bootstrap skill.

#3 Build the Theme

Now we have to build the WordPress theme from scratch. We will use some boilerplate to speed-up time from Underscres. (http://underscores.me) This empty theme will have the proper files, so that you have to create new file one by one. What a time saver.

Now what we have to do is to transfer the static web to dynamic theme. On this phase you have to pretty much understand the underlying works with WordPress. You have to know the syntax for navigation.

Usually on this phase the static website will break into several parts. Like for header (with navigation), body, and also footer. Also there will be reusable parts that you want to put into another file.

Each pages is devided into <name>-page.php files. So when the theme is ready, we will create new page based on developed <name>-page.php file.

Also to be aware about single.php which is for blog post. But for other type post, you can use <type>-single.php.

From here we actualy will semi-setup the WordPress, because when we develop the theme, we continuously testing out with WordPress system.

#4 Setup The WordPress (in sync with #4 Build The Theme)

This process is at the same time of building the theme. Because theme is really depending on WordPress system.

Knowing right plug-in is key. Plug-ins will help to streamline the theme code. Many plug-ins that is really good out there but we have to know them.

Here are some that I use it so far for basic good webiste. This is for website manager.

1. Custom Post Type UI (https://wordpress.org/plugins/custom-post-type-ui/)

Use this when we want to create post, that is not tight to blog post. Let's say for resources, apps or etc.

If you want to use product for e-commerce you probably will want to use WooCommerce plug-in.

2. Advanced Custom Fields (https://wordpress.org/plugins/advanced-custom-fields/)

This is used on page where you want to put dynamic content on the website more than just word post.  This will help website owner to maintain the website if they want to change some wordings by themselves.

3. Admin Menu Editor (https://wordpress.org/plugins/admin-menu-editor/)

This for organizing the menu in the admin panel. When we hand over the website, we want the admin panel look understandable, we organize the menu according to their preference or relevancy.

4. Options Framework (https://wordpress.org/plugins/options-framework/)

This is used to add an options panel on WordPress theme.

#5 Testing & Finishing

So far by having the solid admin wise back end will exite owner to create contents on the website. But the work should not stop there, there would be more improvement for user facing features.

This can look daunting for first timer to setup the WordPress site, a lot of tasks, even you already have the favorite theme to install, many other setup has to be done to make sure your WordPress system working properly.

Investing on pro to setup the site will save time, because they already learn from the right knowledge to setup the website. It always welcomed to learn by your own the full detail, so you can setup your WordPress and become a super webmaster.

* it's quite contradict of tell about WordPress while i'm writing on a blogspot. I already just build a blog for website. irekasoft.com/blog where I will focus on mobile technology, it includes iOS, Android and also PHP with laravel because you might want to develop API to interact with mobile apps.





No comments:

Post a Comment