Categories: Design

Web Design Tips: 10 Ways to Edit Your WordPress Theme

A wide variety of free and commercial themes is just one of the things that makes WordPress so attractive to use.

But the theme is often just the starting point toward further customization.

Web developers and website owners like to start with a theme and then tailor it to their needs until they get the look they want or until they meet the client’s wishes.

Many themes, especially those that are commercial, come in packages with clear options related to the specific theme, that allow you to configure most of its aspects.

It’s best to look at all the options that exist there before you “dive“ into the code.

In other words, each theme is different from the other, so sometimes you have to roll up your sleeves and enter the code to fully customize it.

Below you’ll see a list of things website owners love to change and, of course, how to make those changes.

via pixabay.com

This article was written on the assumption that you have, at least, a basic knowledge of web design, code editing, and are familiar with the WordPress platform.

One tip before you go into detail: It’s often a good idea to make modifications to the “child theme“ rather than the “parent theme“.

The advantage of this process is that when the author of a theme posts an update to your theme, you can easily update it without losing any modifications you made.

Check out codex.wordpress.org for more information on “child themes“.

Oh yes, one more tip, which isn’t related to the themes themselves but to something without which making modifications of the themes wouldn’t be possible – web hosting.

Given that we’re talking about the WordPress content management system, it has to be noted that it usually retrieves data from MySQL which is, on its hand, an open-source relational database management system.

Taking this into consideration, MySQL hosting services are highly suitable for WordPress websites. A list of the best ones can be found here. This list has been created after testing dozens of the MySQL hosting services and in it, you can see why some MySQL hosting providers are better than the others and why some providers are cheaper than the others.

1. Editing CSS of a Topic

If you want to change colors, fonts, layouts, backgrounds, spacing, and other visual elements, it’s best to start editing CSS.

In most cases, the styles used by your theme are in a file called style.css.

This file is always in the theme, as this file is defined by the theme in the WordPress admin section. Sometimes, there are some additional styles, which can be found in subfolders.

The best way to find the style you need to modify and the style location in the theme files is to install a web development tool, such as Firebug.

This is a Firefox add-on (if you’re using Mozilla Firefox browser) that lets you quickly browse through CSS and locate the style and line you need to change.

2. Show a Section of a Post or All Content

Sometimes, by default, your topic displays the full content of your landing page posts. Let’s say you’d rather show a short paragraph, just to tease readers’ interest to click more and view the full text.

Or maybe the other way around – the theme shows paragraphs, and you’d prefer to see everything right away.

Here are two tags to replace. This tag shows the full content of the posts: <? php the_content (); ?>

This tag shows a section of a post (when editing a post, it’s the text you type in the text box just below the text box for the content of the entire post): <? php the_excerpt (); ?>.

If no exceptions are set, it will automatically display the first few sentences of your post.

3. Create a Template for a Specific Page

It happens that you need to create a specific page that must have its own layout – something different from others.

You’d like some flexibility in the HTML code, but that the changes you make don’t affect the other pages that already exist on your site.

WordPress makes creating unique templates and assigning them to a specific page easy. Here’s how:

  • Make a copy of the page.php file contained in your theme. This is a file that WordPress uses to display pages.
  • Change the name of the copy according to your desire. In this example, we’ll call it, prices.php (we’ll create a single page for displaying prices).
  • Add this section of code at the top of the page: <?php/*Template Name: Prices*/?>
  • Modify the HTML code and CSS for this webpage as you wish.
  • Create a WordPress page titled “Prices“ using the drop-down menu to select a template, select “Prices“.
  • Record the page. The page will now be displayed using the template you created.

4. Make a Loop: Category Off/On

Let’s say that you want to show posts from all categories except one. This is a very common request.

One example would be to have featured slider posts on the home page that show posts from the “Featured“ category.

You’d like to display the posts below the slider as well, but not to include posts from the “Featured“ category in that view, as this would duplicate them on the page. Here’s how to do it.

Add this line before the loop: <?php query_posts(‘cat=-8′); ?>. This will exclude from the view all posts that are in the category with ID “8“.

So you need to know the category ID you want to exclude, which you can see in the admin section of the site for the category administration.

You may want to do the opposite: Display posts from a specific category only. It’s simple – just remove quotation marks in front of your category ID.

5. Cutting Navigation in the Easy Way

Many themes display all your pages at the top of the website with a drop-down menu or hierarchical navigation. But let’s say you want to avoid some pages in the navigation.

Sometimes you’ll have pages that don’t need to be exposed immediately, such as “Terms of Use“. Here’s a way to exclude a particular page from the menu view. Find a code that shows a list of pages: <?php wp_list_pages(); ?>. Change it into: <?php wp_list_pages(‘exclude=5′); ?>.

This way you send WordPress a message: “List me all the pages I’ve made except one that has ID ’5’.“ As with the previous category, here you also need to know the page ID you want to exclude.

6. Turn on Menu Management in WordPress

Do you want to have complete control over the navigation of your website, such as setting the desired order, including/excluding pages, categories, and external links? Who wouldn’t, right? Since version 3.0, WordPress brings one cool new option called “Menus“, which gives you this flexibility. However, you can only use this option if your theme supports the same.

Here’s how to change traditional navigation (using wp_list_pages) to a new one that can be controlled from the admin section. Note: You must have WordPress 3.0+.

First, you need to turn on this feature by adding the following line of code to the functions.php file: <?php add_theme_support(‘nav-menus’); ?>. After that, add your menu to the theme, somewhere in the header.php file: <?php wp_nav_menu(); ?>.

Of course, you’ll also need to create your own menu by going to Appearance>Menus.

7. Make a Simple IF

Sometimes you might want some of the content to be changed depending on which side the user is viewing.

For example, when a user views the “Prices“ page, you want the “Prices for each budget“ message to be displayed on the side, but you’d display “ Quality products, a reliable service!“ on all other pages instead. Here’s how to set this using IF:

<?php if ( is_page(‘Prices’)) { ?>

<p> Prices for each budget!</p>

<?php } else { ?>

<p> Quality products, a reliable service!</p>

<?php } ?>

8. Post Thumbnails

From WordPress 2.9, there’s one handy option called “Post Thumbnails“. As the name implies, it allows you to adjust a thumbnail image to your post without having to define a custom field or insert the image into the content of the post.

Note: Since WordPress 3.0, this option has been renamed to “Featured Image“, but the functionality has remained the same.

What is “Post thumbnails“ useful for? For instance, to add color to posts list, or to use WordPress posts as your portfolio. There are plenty of other situations when thumbnails take the stage.

Here’s how you can include this option in your theme. As with the menus option, “Post Thumbnails“ must be included in the theme. This line of code is to be added to the functions.php file: <?php add_theme_support( ‘post-thumbnails’ ); ?>. Then, enter the post thumbnail image within the loop using the following tag: <?php the_post_thumbnail(); ?>.

You may want to refine your look using CSS. You can also add different size options and an option for cropping images.

9. Adding Content at the End of a Post

In some situations you may want to add something to the end of each post – something constant, such as a message promoting your services, a link to newsletter signup, an advertisement, etc.

The file you want to edit is single.php. This is a template that displays blog articles. Open that file and find a convenient place to add the content you want. A good post is usually below the article but before the comment section: <?php the_content(); ?>.

Your additional content: <?php comments_template(); ?>. Your theme might have additional tags or similar, but this will point you in the right direction.

10. Adding Google Analytics Code

Everyone wants to know how many people come to the website they own. Google Analytics is the most popular tool to track traffic.

Installing Google Analytics is very easy. When you create your free account, Google will show you a few lines of code that you should place on your website.

Until relatively recently, traditional analytics code was used, which was located at the bottom of the page, before closing the body part itself, ie. before </body> tags. That place is in the footer.php file.

Now, so-called Asynchronous Google Analytics code, that’s added before closing the head part i.e. before </head> tag is used. This new way of tracking your visit is far more efficient and accurate.

Deven Rathore

Deven is an Entrepreneur, and Full-stack developer, Constantly learning and experiencing new things. He currently runs CodeSource.io and Dunebook.com.

Published by
Deven Rathore

Recent Posts

21 Angular project ideas for beginners

Angular project ideas have become so handy in bringing evolution and slight changes to many…

2 weeks ago

Tips for Optimal SaaS Platform Development

According to BetterCloud, approximately 80 percent of mobile applications will be running on mobile software…

2 weeks ago

How Ruby on Rails Builds Powerful, Responsive Websites

Numerous major companies rely on the unique advantages that web development using Ruby on Rails…

3 weeks ago

21 Vue Projects and resources for beginners

Vue is not only known as a progressive JavaScript framework but one of the very…

4 weeks ago

Digital Diversity & Language Specificity

Although research regarding text to speech software began emerging in scholarship several decades ago, the…

3 weeks ago

How Great Web Design Can Help Build Your Brand For The Future

via Unsplash Nowadays, it’s important for your business to adapt its brand across all your…

1 month ago