Category: Web Development

Web Development

Posted on

Completing my WordPress Site

Adding finishing touches and making adjustments

What did you do to your site this week? Most of my work was in adding actual contents and blog posts in the “off-topic/rewind” category of my WordPress site. I had assistance from an open classes meeting where Professor Graham helped fine-tuning my “contact” page to get it to the way it looks right now, which I’m very happy with (Thank you!).

How happy are you with it? I’m happy with certain aspect of my WordPress sites. A good example is the home page and the contact page. My blog post content I’m also happy with, but I know at the same time the presentation and layout of the blog post templates can be much improved. The way the footer looks can be improves by setting widgets to align horizontally in a grid, but I was unable to achieve that at the moment.

What would you change if you could? I probably would like to change and definitely work on the custom template layout for the “Web Development” page. Given the time constraints and having to balance other things in my life (like another class, taking care of errands, etc.), I think what I have to submit as a WordPress page is decent, but I also know that it can be much, much improved upon.

What’s one new thing you learned about WordPress development this week? There’s so much I want to learn and accomplish, but with so little time I just have to decide where to focus most of my effort and cut my losses. Do I think my WordPress is “good enough” to submit? Sure. Do I prefer to have it look “much better” and be more “perfect”? Absolutely. Do I plan to continue working with WordPress so I can feel more confident about my skills and knowledge in WordPress? Definitely.

If there’s anything I learn about WordPress development this week, I imagine it kind of emulates the “real world”. You could be working on a website for a client or your employer and you desire to have it look as perfect as possible and spend all this time and energy (and stress) trying to achieve that. But in the real world with real deadlines and other aspect of life that also needs your attention, sometimes it’s just has to be “good enough” and presentable to the client or employer. Changes can be made at a later time if you would like and are allowed to do so. Otherwise, “good enough” is good enough. 🙂

Also, as a last note. I learned that this WordPress class was not long enough. It’s a compliment. I really enjoyed this WordPress course, and I’m sure other students in this class also agrees with me. I’m kind of disappointed that it’s coming to a close. I intend on continuing to learn by working with WordPress and seeking tutorials in my spare time. Thanks Professor Graham for a fantastic class!

Posted on

SEO-ify Your Site

Search Engine Optimization plugins for your WordPress Site

Is SEO important to your site? Why or why not? SEO is important to my website because I plan on using it as a portfolio page and as a resume reference page (when employers google search potential applicants for employment consideration). I hope that the website rank as well as I can possibly make it so it’ll be easier for potential audiences/employers to find.


What SEO plugin did you choose to use? What other plugins did you consider? Why did you choose the one you did? I selected “Yoast SEO” because we went over this plugin during our class lecture. Also, utilizing the strategy we’ve learned a while back about things to consider when selecting a plugin (active installation, ratings based on 5 stars, how many people have wrote reviews, how many active installations it has, how recent was the plugin updated), Yoast SEO ranks highest overall among other SEO plugins.

I’ve also considered RankMath and All-in-One SEO because it was mentioned in one of our reading assignments: https://createandcode.com/best-wordpress-seo-plugins/

I chose “Yoast SEO” because I’m still a beginner and it’s seemed like the most safe bet (I had a preview of what it looks like and how to use it in class). I will keep the other two SEO plugins in mind as I continue to work with WordPress after class concludes to better my understanding. Perhaps they will become a better option for my WordPress later on.

What features did you use? I used the following features:

  • “Activating the Yoast SEO extension for W3 Total Cache may be helpful for your site. Click here to try it.” I had installed the “W3 Total Cache” plugin last week to help with my WordPress site performance, which involves Cache and Content Delivery Network (CDN)

I also went through the “Search Appearance” tab under “SEO” on the Dashboard and went through the different settings within:

  • General
  • Content Type
  • Media
  • Taxonomies
  • Archives
  • Breadcrumbs
  • RSS


Are you using other plugins to help with SEO? Which ones? What do they do?

I’m using W3 Total Cache plugin to help with the performance and speed of my site. Its does this by caching my website. Coincidentally, Yoast SEO has an extension that’s compatible with W3 Total Cache that can help improve my site. After taking some time to look into it, I’m still not sure what it really does.


What changes did you make to your code to help improve SEO?

I try to keep my codes as clean and simple as I possibly can. I’m utilizing the post name format for my post’s URL. Any images I’m uploading to this WordPress site I gave it names that make sense and describes what the image is.

Is that how you want it to look? If so, how did you get it that way? If not, what are
you going to do to change it?

I’ve included the following snapshot of the google search results:

Overall, I thought it looks decent and I’m content with the results for now. Googling “Ronald Seam Blog” and “Ronald Seam WordPress” puts my website at the top of the search.

The third result, and the one that potential employers will most likely search, for “Ronald Seam” could use some improvement. Three out of the five shown (the two facebook profile and the one instagram profile) are not mine. I do not currently use facebook or instagram.

My LinkedIn profile is ranked at the top, which is good. My WordPress site is at the very bottom of this snapshot and ranked 5th. I definitely would like to continue to improve this by exploring some more in the Yoast SEO settings. I imagine buying a digital certificate (you buy it from the Web Host Provider, correct?) to give my site the “https” secure URL setting may also help with my Google search rank.

Lastly, I’m guessing (and hoping) that by continuing to add contents to my WordPress it will help with future Google search result ranking. But I’m glad it at least rank on the first page, which still gives me a decent chance to be seen by potential audiences/employers.

Posted on

Optimize Your Site

The performance results for my website before making improvements:

And after making improvements to my website’s performance:

Were you able to improve? Why or why not? Yes, I was definitely able to improve the performance of my website.

First, I went to https://geoffgraham.me/wordpress-how-to-clean-up-the-header/ and copied the helpful script there into the functions.php of my child theme folder.

Second, I went to the Dashboard view of my website and started to deactivate and/or removed plugins that I didn’t need for now to see if that would perhaps improve performance. I deleted the following plugins:

  • No Right Click Images
  • Insert Headers and Footers
  • Hello Dolly

and, although I’m keeping the plugin All-in-One WP Migration, I deactivate this plugin to see if that makes a difference. I will activate this plugin when I’m importing and exporting WordPress site, but other than those times, I think deactivating the plugin might make some improvement to website speed.

To assist me in web page caching, I went with the plugin W3 Total Cache by BoldGrid. It’s an SEO and Performance Optimizer plugin.

What issues did you run into along the way? What did you learn about web performance as a result?

The issue I ran into was that I’m not familiar with DevTools. But in it’s place to go along with WebPageTest and Lighthouse, I used Google’s PageSpeed Insights as recommended in this article: https://theeventscalendar.com/how-to-perform-a-backend-audit-of-your-wordpress-website/

What I learned about web performance is that there is plenty of room for improvements. From the results, I was able to improve Compress Transfer and Cache static content from two letter grade “F” to two letter grade “A” on WebPageTest.

For Lighthouse, I was able to improve the Performance of my website from a score of 73 to a score of 91.

And for Google’s PageSpeed Insights, I was able to improve from 63 to 85. There is still room for further performance improvement, but so far for me it has been a leap in the right direction. My website loads approximately 1 second faster now than before I made performance improvements, which I think is quite substantial in the internet world. A page load speed can make or break a website and could mean the difference between gaining an audience/customer and losing them to a competitor’s website if my website took too long to load.


How is your content coming along? Do you need to refine the design?

I think my website is coming along fine. It’s just a matter of spending more time to add more content. For example, in my blog feed I got “Web Development” covered since it’s the assignments we do each week, but for the “Off-Topic” section of the blog, I need to add some content. I have some ideas of what I would like to post in that section of my blog site. Any content that is workplace safe and family-friendly would be acceptable. I also plan on working on the Portfolio page to list the various web design projects I’ve worked on so far in the Web Development program (freecodecamp, Codepen.io, etc.).

Posted on

Adding Plugins to Your Site

Which one did you choose? I chose the following plugins:

  • All-in-One WP Migration by ServMask
  • WP Content Copy Protection & No Right Click by wp-buy
  • WP Forms Lite by WP Forms

Why did you choose it?

Well, All-in One WP Migration was a plugin I found when I was dealing with the dilemma of figuring out how to take my WordPress site from local server to live server. Surprisingly enough, a search on YouTube came up with a video posted from Local By Flywheel that recommended All-in-One WP Migration. I figured, well if the same company that I’m using for my local WordPress software is recommending it, then this plugin got to be at least decent. So far, it’s been great. It has over 2 million active installation, 4.5 out of 5 stars (based on 6,281 reviews), and it was last updated 2 weeks ago, so I know they are proactive in making improvements to the plugin.

For WP Content Copy Protection & No Right Click, that came about after I was wondering how I can prevent my images from being saved or downloaded. I wanted to protect my content. It has over 100,000 active installation, 4.5 out of 5 stars (based on 253 reviews), and was last updated 3 weeks ago.

And finally, I decided to go with WP Forms so I can create a Contact Form on my website. I chose this one because it was a familiar name. I had been proactively searching YouTube the last week or two for WordPress tutorial and the WP Forms name had been brought up a few time (either as a video sponsor or a recommended plugin in a YouTube tutorial). It has a 5 out of 5 stars rating based on 6,512 reviews, over 3 million active installation, and it was last updated 3 weeks ago.

What other plugins did you consider? How did they compare to the one you chose? I’ve considered No Right Click Images by Keith P. Graham to protect my images and contents. And for forms, I also considered Ninja Forms by Saturday Drive.

No Right Click Images has a 5 out of 5 stars, but there’s only 32 reviews so far. It does have over 20,000 active installation and was last updated 2 weeks ago. For me, I thought WP Content Copy Protection & No Right Click was the better fit for my WordPress site.

Ninja Forms was reasonably comparable to WP Forms; it has 4.5 out of 5 stars based on 1,051 reviews and has over 1 million active installation. I just decided to go with WP Forms out of curiosity and because more people had reviewed WP Forms and also due to WP Forms having about 2 million active installation over Ninja Forms. I may try out Ninja Forms later on to see what it has to offer. If for nothing else, it’s because the author has a very cool “New Retro Wave” name. Saturday Drive, kind of makes you want to get behind the wheel of an ’80s sports car complete with flip-up headlights and a four speed automatic transmission with “Overdrive”, playing Synthpop/Vaporwave through the four way speaker sound system as you drive along scenic Pacific Coast Highway, near the beach just as the sun is about to set in the Pacific Ocean and the city lights around you just lit up.

What other plugins did you try? I actually did try out No Right Click Images initially, but I found that it didn’t necessarily protect my images as it can still be saved if a visitor were to save the web page for offline viewing or print the web page. It did deliver what it promised as a visitor cannot right click any images to save it, but when a web page is printed or saved, it didn’t prevent an image from being saved that way.

How was you experience browsing through the plugin directory?

Overall, it was pretty good. Overwhelming variety and selection to choose from, but at the end of the day, I just selected what I needed for my website. Looking for plugins was simple from the Dashboard view. Just go to Plugins, click Add Plugins, start searching for a plugin that fits your need.

After you find one, click Install Now and Activate. You can keep track of the plugins you have by clicking on the Installed Plugins tab.

Posted on

Continue Working on Your Site

Trial and Error

What’s different this week? Other than the blog feed page at https://www.ronaldseam.com/web-development, not much else is different on my page this week. I took a detour this past week in my attempt to better understand WordPress beyond the Gutenberg block-editor level by spending a couple days following along a 47 minute video on youtube.

I spent this past weekend watching this video (a lot of pause and rewind involved as I took notes and typed code as I followed along). I understood maybe 40% at most of what was going on. It did help clarify some things that I didn’t understand and was a step in the right direction in trying to understand the “coding-side” of WordPress; it just wasn’t the giant leap that I had hoped. It also didn’t really yield anything that materialized on my website.

What did you learn that’s worth sharing? I didn’t really learn anything worth sharing, but if there’s one thing I learned for myself is that this is going to take some “trial and error” and some time and effort after class concludes if I want to better understand WordPress beyond the “drag-and-drop” content knowledge.

I would like to say that I understand this article about creating a theme from scratch (https://www.taniarascia.com/developing-a-wordpress-theme-from-scratch/), but I got lost pretty quick. It seems to be well-written. I did save the link to this article with the hope of revisiting it someday and understanding what’s going on.

Did you run into any trouble along the way? How did you solve it? Thank goodness for the Week 5 lesson/lecture being recorded, which allowed me the opportunity to watch and following along the coding lesson which I was then able to use to help me complete the blog feed assignment for web development blog feed (https://www.ronaldseam.com/web-development).

I have also searched for a well-written book on Amazon about working with and using WordPress, but so far I’ve only found ones that have a “no coding” (drag-and-drop, plug-ins, etc.) approach which is exactly what I’m trying to avoid.

I wish I can say I get “that wonderful feeling” from WordPress (and I genuinely mean this) like I do when I see a Disney movie intro, like the one here:

https://www.youtube.com/watch?v=vBLXhx9vdHg

I just gotta remind myself that Disney the company exists because the founder failed over and over and over again, but didn’t give up. Perhaps that’s the moral of this blog post here.

Although it eludes me now, I hope to get “that wonderful feeling” when I work with WordPress sometime in the future.

Posted on

Blog Feed

Cool Beanzzzzz

Was it easy to use it or super confusing? Well, I actually went back and watched the recorded lecture. I followed along with the coding exercise, template name: Cool Beanzzzzz (anythingyouwant.php). It was those codes that I typed after following along the lecture that I used as the base for my layout for the blog feed seen on the Web Development page (Blog >> click on “Web Development”). I gave it the Template Name: Web Development Category.

Did you play with any of the attributes to see how they affect the order of posts? I utilize <?php the_excerpt ?> and that did make the blog feed look much better.

How is the course going so far? I’m doing what I can to keep up with the course.

Posted on

Organizing and Linking Content

Creating Menus to Navigate Your Website

I thought the way WordPress handle menus was pretty efficient. It took some practice for me to get use to the process of how to create menus in WordPress. It was just a matter of, in the Dashboard, going to Appearance >> Menus and then messing around with options there (you can create menu items based on Posts and Categories in addition to Custom Links and other things).

Overall, I found the experience intuitive and easy enough. There really isn’t anything I would really change.

The only confusion I have is that the class reading lesson (Lesson 6) and class lecture showed some snippet of code and I was under the assumption of having to learn how to work with code to create the navigation menu (at least a copy and paste with reference material from WordPress.org). Again, just like with the create header and home page assignment (Exercise 5 based on Lesson 5), I may be getting ahead of myself here and perhaps it will covered in the upcoming class lecture(s).

I threw in a little CSS to the header navigation links (mostly the “hover” and “click” attribute) to personalize it a bit.

Posted on

Creating a Header and Homepage

A “Drag-and-Drop” Process?

For this week’s assignment, I am to have created a header and create a home page. For the header part, I already had the “site title” and “tagline” (Ronald Seam and Ronald’s Random Rants, respectively) as the result of using a child theme of WordPress’ Twenty-Seventeen.

Although I was happy with the theme’s default header image, I thought for the sake of further learning and experiencing in WordPress that I would upload my own image. I would of like to have taken a picture of my local community college’s campus (LBCC) or a scenic picture of some place in Long Beach, but we are still in lock-down at the moment. The picture I have right now will have to do until I can create another image.

Process was simple enough – in WordPress’ Dashboard (back-end), go to Appearance >> Customize >> Header Media. Click on “Add New Image”…upload a picture, do a little cropping, select, and save the setting…done!

As far as creating a home page, go to Dashboard >> Pages >> Add New. Building the page was utilizing the default block editor that comes on (I think) most WordPress themes nowadays. I believe it’s called “Gutenberg”. Add a heading, an image of myself, a widget for “recent blog post” and I had a home page. Setting my home page as the “home page” for my website was as easy as going into Dashboard, then to Setting >> Reading. It took me to the “Reading Setting” page where I then select “A static page” and set the home page and blog page.

I used the web browser’s “Inspect” function (ctrl+shift+I) to find help me find out what “id” or “class” my header’s navigation menu and home page image was in. Then from the Dashboard, I went to Appearance >> Customize >> Additional CSS (I use to go to the style.css file in my twentyseventeen-child theme folder to make changes) where I added my changes with a little bit of CSS to the header navigation menu and image.

“What did you learn?” What I’ve learn from this assignment is that WordPress, as mentioned in the class lecture last Thursday, can be as simple and as complicated as I make it. This assignment was quite simple that I’m beginning to wonder if I “did the assignment correctly” … which leads to this blog assignment’s next question.

“What’s confusing you about theming?” I might be getting ahead of myself here and perhaps this will be answered in the upcoming class lecture(s), but in class last Thursday we talked about how “WordPress template files are like pieces of a puzzle”. We talked about template files such as:

  • index.php
  • header.php
  • sidebar.php
  • singular.php
  • footer.php

But when I did this assignment, I didn’t do any “snippet” of code. I was under the assumption of at least having to create a header.php, front-page.php, and/or single.php template in my child theme and pasting a snippet code from WordPress.org reference material. But I didn’t have to do that after all (in addition to not knowing how to).

“Do you have any questions about what we covered?”

My confusion comes from not knowing if I was suppose to already know how to “create and code” template files such as header.php, singular.php, and footer.php into my child theme

and

did I approach this assignment incorrectly because it was a “drag-and-drop”, “Gutenberg” block-based editor process whereas the class lecture last Thursday seemed a little more involved in regards to template files and snippets of coding.

Perhaps I’m getting ahead of myself here in regards to having to know how to create template file(s). I will find out during the next class meeting.

Posted on

Creating My First Theme

Creating and Using a Child Theme

As much as I would have liked to say I created a Custom Theme from scratch, I decided to go with creating my first theme by creating a Child Theme based on one of the default WordPress theme.

I decided to go this route because I am a beginner in WordPress and I’m still trying to learn and understand this Content Management System. I based my Child Theme off of WordPress’ Twenty Seventeen theme.

Given a person with enough expertise and knowledge in WordPress Theme Design, the sort of situation where it would make more sense to create a Custom Theme as opposed to a Child Theme is when there is a web design that requires so much changes to an existing theme design that it just makes more sense to create a Custom Theme from scratch.

But in this instance, my situation as a beginner and also liking the default Twenty Seventeen theme for the most part, it made more sense for me to create a Child Theme and add a few changes to my liking, like changing the font color, background color, and text alignment of the heading in the style.css sheet.

I didn’t use any real template for creating my theme. From what I saw from my search on YouTube, I understand that there are WordPress plug-ins like Beaver Builder and using a basic theme like Astra that gives a basic layout of a page that I can build a Custom theme upon. That’s beyond my scope for now, but I do hope and intend on learning how to a create a Custom Theme from scratch in the near future. For me, WordPress’ Twenty Seventeen theme was like a template because I used it as my starting point to build a Child theme on top of.

Posted on

Local By Flywheel

My Local Development Environment

A local development environment is like a flight simulator for web development. It is different from a production development environment because whereas a production site is a published website that is live, online, and can be seen by the end-user in public, a web site on a local development environment is only seen by you. This is because your computer is seen like a “web hosting service” to your local development environment.

It is important to use a local environment for development because it allows you to experiment and make changes to the code of a web page without running the risk of breaking the site. Yes, you can make changes to a WordPress site on the back-end of the live site, but the safer route would be to make a copy of your production site into your local environment on your computer. Here, you can try out, test, and troubleshoot the changes you’ve made to the website in the staging phase without running the possibility of breaking the live site in the production phase. This is very helpful for maintaining a WordPress site in addition to developing one for the first time.

I prefer my local environment to look exactly like my production environment because this is where I feel I can fully benefit from having a local development environment. I want my local server on my computer to look, feel, and behave as though it is a live web hosted server. This way the staging website will emulate the finished product as if it was already online, before it becomes a production site.

error: Content is protected !!