WordPress Development Basics: Beyond the Theme

WordPress Development Basics: Beyond the Theme

Setting up a website used to require a good bit of expertise.  One needed to write a lot of code to have a webpage look and function properly. These days, things are a little more user-friendly, thanks to the advent of the content management system, or CMS. 

A CMS is a software that makes building a website easier and more intuitive. They provide a graphical user interface to help you set everything up while creating the code in the background.

Benefits of WordPress as a Content Management System

There are a lot of content management systems out there, but the one that I use most and would recommend is WordPress.  Since its inception in 2003, WordPress has become the most popular content management system. That is a long time in this business, especially with the number of other systems competing for that spot. 

WordPress is popular for many reasons. The platform is known for its:

  • Ease of Use
  • Affordable Setup (potentially at no cost)
  • Adaptability 

It can meet the needs of users, ranging from casual web development enthusiasts to professional developers constructing websites for their clients.  You can make a WordPress website as simple or as complex as you wish.  The possibilities are endless.

WordPress’ adaptability is key. Built on an open-source framework, anyone can create and modify with WordPress. The theme and plugin libraries feature tens of thousands of options for building, modifying, and adding features to a site, created by developers across the globe.

What is a WordPress Theme?

When setting up a website, you’ll choose a theme early in the process. A theme is a suite of code that defines the website’s style, and in many cases, provides some basic functionality like menus. 

Themes enhance the basic WordPress code and your content-filled pages or posts. They provide a stylish and engaging frontend experience that makes it more appealing and user-friendly for your audience.

Using a theme is generally a seamless process: you add your content, images, and other components in the easy-to-use page and post editor. Your theme transforms each page into something beyond a bit of text and images.  

But what about when none of the themes are quite what you want?  Or you have a theme you like on an established site and just want to change something minor?  Well, if you have some familiarity with coding (or a desire to learn!), you can make the changes yourself with relative ease.

WordPress Theme Customization & Modifications

Since WordPress is open source – making changes to themes is relatively easy. However, making modifications directly to the theme’s code is a bad idea. When the theme publisher pushes out updates, any direct changes will be overwritten, and you will need to make the changes again. 

While you could prevent the theme from updating, you will miss out on security updates that are critical to keeping your site safe. Nobody likes losing their work, and nobody wants to risk losing control of their site or their user’s data to bad actors. 

Thankfully, WordPress has solutions. A relatively easy and quick way to make minor changes is to add custom CSS outside the theme’s main files. Depending on your theme, you can go about this a few ways. 

Many themes provide a convenient method of writing additional CSS while viewing the page by going to Appearance -> Customize from the Admin page.  This opens up the Customizer menu alongside your homepage.  

On other pages, you can go to the page itself and click Customize in the top bar.  If your theme supports it, as the WordPress theme “Twenty Twenty-One” does, there will be a space to write additional CSS while viewing the results live.

Our next step will be targeting the element that we want to modify.  If you right-click on the element itself and go to Inspect, you can open up the developer’s tools to see the code creating the page.  In this example, we are using the Chrome browser, but similar tools are available in pretty much all modern browsers. 

Using Chrome’s Inspect Tool to Target an H2 Element to Modify a WordPress Theme

Let’s say that we want to modify the H2 that says Heading beyond the basic styles available in the block editor.  First, we’ll need to target the element.  We know it’s an H2, but we’ll also prefix it with the #post-13 ID to make sure we aren’t changing every H2 on the site, only the one on this page.  A good reference that I like to use for CSS selectors, as well as properties, is W3 Schools.

WordPress Customizer Tab Adding CSS to Customize a WordPress Theme with a Text Shadow

Once we’ve made the modifications we wanted (in this case a little text-shadow) we just need to hit Publish at the top of the Customizer section.

But what if we have multiple H2 headings on the page and only want to target one?  We could use more advanced CSS selectors, such as “:nth-of-type(n)” or we could give the H2 we want to change its special class name.  To do this we just need to add it in the block editor: 

  • Open that page in the back end
  • Click the element
  • Open the Advanced drop-down menu
  • Add a unique class name under Additional CSS Classes
WordPress Block Editor Adding Additional CSS Classes to Target Specific Elements

Conclusion

If you’ve made it this far, I hope that I’ve been able to share a little useful knowledge, and maybe sparked your interest in making your website ideas into a reality. 

The WordPress platform is a realm of near-infinite possibilities, the only real limiting factor being the time and energy you have available to spend learning and experimenting.  This has only been a scratch on the surface, but we may dive a little deeper in following articles. 

Of course, if you want to have a professionally built website, it’s always a great idea to look into hiring a developer. Web development is one of the many services offered here at Nomadic, if you’d like to know more connect with our digital marketing and software development experts!

Chelsi Lange

Sr. Font-End Engineer
Chelsi Lange is the Senior Front-End Engineer at Nomadic Software + Marketing, and has years of experience as a developer. Chelsi is a passionate web developer with a love of finding creative solutions. When not building websites or furthering her education, Chelsi enjoys spending as much time as she can outside hiking, gardening, and practicing traditional archery.

Subscribe to Our Blog

"*" indicates required fields

Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
Hidden
This field is for validation purposes and should be left unchanged.