There are many WordPressians who want to make their own theme for making their website elite and super. Due to some difficulties, most of us prefer using a theme made by someone else, whether free or paid. When we get a theme, however beautiful it is, we seek some more changes in it. Here, I’m not talking about simple changes which can be done in customization feature given by WordPress, I’m talking about bringing an exceptional, functional and style change in a theme by doing some PHP and CSS tweaks in the code. In this article, I’ll be explaining you that how to make your tweak at the right place and make a place fully functional according to your needs.
- A domain. (of course)
- WordPress functioning on the website. (of course)
- A good theme installed.
- A good browser to inspect elements on an HTML page.
- Little CSS/HTML knowledge for making changes in style.
- PHP knowledge for making functional changes.
Here, I would emphasize on making changes in the styles of the theme but not much on the functional changes as the examples may break someone’s website into crap because every theme differs and you need to shape yourself according to the theme.
Let us give it a start with a small example…
Look at the above image carefully. In the sidebar, you see a black search box widget. Just below, you see a ‘Recent Posts’ widget. What if I need to curve the top-left border of every widget in sidebar? Just like you see on IQubex:
So, assuming that you already know CSS, do you also know about using those CSS styles on the correct IDs/Classes which will change only widget section and not something different. Every theme comes out with different and easy idea about maintaining their ID/Class algorithm. So, its quite difficult pinning out the exact position of styling in every theme.
The process is quite easy and you may have guessed it before when you read the requirements. I asked for a better browser to inspect element so that you can follow the process. Here’s where Browser Element Inspector comes into play.
It looks similar to this:
To get this window, just right click anywhere in browser window and select the Inspect Element option from the submenu. Then comes a heavenly window.. The Element Inspector!
Now, to style a particular component on website, you need to know it’s ID/Class. For that, follow these simple steps. In this tutorial, I’m using Firefox browser. I recommend you to use this just by the time you follow these steps because many browsers differ.
- Click the Mouse Icon in the top left of the Inspect Element Window.
- Then, hover over the component you want to change the style of. When you find appropriate, just click it.
- Then, you would find its HTML in the inspector window. Just watch ID/Class of the element. You may also tweak some CSS through the window to see the results temporarily.
- Open your WordPress dashboard. Go into Appearance > Editor in the left menu.
- There you’ll find a window where all styles are written. Just scroll at the bottom of the code and make a comment like this:
- Below the comment, Simply code your CSS styles considering the IDs and Classes you found linked to the component you want to change and then update your code.
- If you have any Caching Plugin installed, clear the cache. Then, visit your website and if you see changes, you’re all done! But, if not…
- Visit your website. When you don’t see any changes you desired, just press ctrl+f5 and then you’ll see the changes on their way! But, if it doesn’t work again…
- Check your code and its ID/Classes and see whether it matches correctly. Also see that your code doesn’t conflict with other CSS code in the file. (Its unlikely to happen) And by solving the problem, surely your website will come up with a change in style! But if you failed…
- Comment me down below so that I can look into my article and make changes in it as necessary 🙂
So, this was a detailed explanation on changing the styles of your WordPress theme.
How can I bring a functional change?
Functional change can be anything you desire. But, while we write code for bringing functional change, it always causes conflicts with other codes when we don’t know the exact structure of our theme. Every theme has a different structure. If I talked about the code which suits my structure of theme, it may work differently in your theme causing fatal errors. The positioning of the codes also differs everytime. I wrote a code which had its best suit in widget section. If you tried that code in Content section, it may bring problems.
So, what the heck can be done?
Just code according to your theme. Inspect the elements on browser and then place your code at the right place where you want it. Sometimes, we find it difficult to navigate through the PHP files in theme. Then, you should surf through your code and see all the files imported and exported throughout the code. Then, try the theme on localhost and place your code at the right place. If it works perfectly, use that theme on your actual server and that’s all what a simple article can tell you! If it doesn’t work, you need to ask the community and watch out for the errors caused. 🙂
So, I hope this article helped those who want a modification in their theme. If you’ve any suggestions for the article, be sure you write it down in comments section. Also connect us at Facebook, Twitter and YouTube to stay tuned! 😉