The title says it all.

While taking a break in posting about my Nendoroid and other figure and toy photography, I got back to my ‘old self’ again realizing that I still have this skill left in me. I have abandoned this skill a lot of times because of my lack of efforts to try hard.

I have a previously posted article about an introduction on how to create WordPress themes using the Bootstrap framework. So far, that article was very old and I decided to revive my long-lost web development skill.

Now, I will show to you the output of my work. This has took me over 48 hours to think, override, and analyze the flow of codes carefully. That includes studying, observation, and research.

My Output of My First Ever WordPress Theme

Since this theme is under development and works, I decided to post some screenshots of my work. Now, remember the last Instagram photo post that I have uploaded recently? That photo was related to this post.

wp-theme-1-01

The first picture above shows the current front page format. It appears when a user or visitor visits the site and the traditional default page format with recent posts are displayed in the site.

As the message suggests, there was a yellow-labelled message displayed at the top of the recent posts below the navbar. That was called the “rotating” tip message. It generates a random message every time a user or a visitor visits the site or jumps between posts and pages. The message can be dismissed by clicking or tapping the close icon or button.

wp-theme-1-02

I have also made my WordPress theme responsive. When accessed to a tablet or a smartphone, the screen is minified (compressed) to its smaller version, and text, images, and contents are arranged according to their positions.

For the toggling of items, like the menu button and the search bar, I used jQuery or Javascript to program them. The icon changes when a user/visitor toggles the menu button or the search button.

This is the part in which I had a hard time fixing. Since if you log on to your WordPress admin panel, your bootstrap navbar will be overlapped with the WordPress admin panel bar. I tried researching on various sites and message boards on how to make fix of this, and when I found out this solution by myself, I fixed it by putting the admin bar to the bottom of the site when minified.

Another thing that I had hard time fixing is the navbar of my WordPress theme. Since I got no other choice, my only option was to get the well-coded PHP file that supports the calling of menus to the navbar. It was well used. The only issue that I am facing is the depth of the navigation. Since the ‘walker’ class that I have used only supports two level depths, I decided to limit my navbar to only two-level menu depths.

wp-theme-1-05

 

For example, I have an option named “Photoshop” and the sub-options (they call it the child class) are ‘Fake Magazine Covers’ and ‘Movie Posters’. Under ‘Fake Magazine Covers’, there are another two child options again, namely the ‘Type A’ an the ‘Type B’ class. The ‘Type A’ is a depth level 3 item. Since my Navbar does not support it, I only limit my menu items up to depth level 2.

wp-theme-1-03

The next thing to show is the famous Error 404 message or page. In my recent Instagram post, I had shown the preview of my WordPress theme by displaying an Error 404 page. It occurs if a page was removed, moved, or that post has changed its privacy to private (This was a WordPress feature that hides certain posts if not logged in). Also, it occurs if a user/visitor mistypes the URL in the address bar of his/her Internet browser.

wp-theme-1-04

And lastly, the preview that I am going to show is the search results page. The outputting of the results is somehow easy, but for formatting and customzing the search items, it was not easy. Thanks to the Bootstrap components resources, since I was able to utilize and create my own combination of layouts!

Summary and Ending

The pictures that you have seen above are only the previews of my recently-made WordPress theme using the Bootstrap framework. One of my features of the theme is displaying a random message below the navbar every time a user or a visitor visits the site or by jumping to the different parts of the site, like viewing posts or pages.

WordPress theme development can be easy or hard and it will depend on the person who will work to it. From the beginning before the present, I was very hasty and lazy thinking on how my basic WordPress theme will output. That time, I was thinking that making a WordPress theme is very hard because you need to memorize and understand the codes and how they will flow, otherwise your output will not work. Today, I have put all of my efforts to working hard to build my first WordPress theme. It takes perseverance and determination to be successful. So that means if I am just thinking more of outputs rather than understanding and hardwork, everything would be meaningless and would be put into a waste.

Now, the theme was saved at a computer at home, which can be only accessed locally. I have a free-hosted WordPress site, which serves as my ‘developer site’. That developer site is used for my development where I could test and upload my theme there. But for now, I need to do major revisions before uploading.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s