Creating a Custom Widget Area

Hello,

using a pugin probably will be easier.The CSS will be a problem, you will have to find the CSS that is used already in your theme and copy it to your new sidebar + widgets.You can use firebug for this or even ask the author of the theme.

https://www.tipsandtricks-hq.com/how-to-use-firebug-to-modify-your-wordpress-sites-css-video-tutorial-4037

I have to disagree with dimitris33, I think a child theme will be a better choice. Widget areas are the realm of themes. While it may be possible to add a widget area where you want to from a plugin, to do so cleanly without modifying the theme code at all could be tricky. With a child theme, just copy the appropriate template from the parent theme and add in a call to dynamic_sidebar() or get_template_part(). Adding CSS in a child theme is part of the standard practice, it can all go on your child’s style.css.

Anyway, you’ve probably already established your code somewhere. If you modified your Hipsta theme, I urge you to port your code into a child theme (or plugin if you must), then restore Hipsta code to it’s original state. This way all your custom work is protected in case the theme needs to be updated. Theme updates will overwrite any added custom code unless it’s in a child theme or plugin.

In order to have your widget CSS not interfere with the carousel, modify your widget output to use classes and IDs that are distinct from those used in the carousel. In order to replicate the styling, as dimitris33 suggests, use Firebug (or your browser’s built in CSS inspector) to determine what styles are used. Copy those styles to your child CSS, but use your widget’s selectors. You’ll likely also need to adjust some of the styles, as well as adding your own, but this will not be a problem when you use distinct classes and IDs.

Hi @dimitris33,
Thanks for your suggestion!
I would love to ask the author how to do this, but they are no longer on the website I purchased the theme from. So, I’m on my own in that regard.

I have found that the theme offers a “Custom Ads” area right where I want to place this widget. I think it would be easier to customize that instead of adding a widget area.

The only problem is that it only allows one ad. I wanted to place 4 products from my Woocommerce there to advertise.
Do you have any advice on how to add more “ads” across horizontally? Similar to the featured area.

https://www.curlswithattitude.com

Hi @bcworkz,
Thanks so much for your suggestion!
I realized that I needed to use distinct styling when I started studying the code. My theme uses “get_template” and has separate templates for each section of the page. I am fairly new to this coding so I was trying to see how I could do everything so the theme recognizes what I’m trying to do. I considered a child theme as well, but I really am getting frustrated with it all. Like I mentioned above, I am unable to get support from my theme’s author. I was able to find the original file I downloaded. So I will use your advice and try playing around with the child theme provided.

• This reply was modified 8 years ago by brooklynbrookie.
• This reply was modified 8 years ago by brooklynbrookie.

Customizing a site can certainly be overwhelming and frustrating. Try to focus on accomplishing one thing at a time. With that one thing, even break that down into discrete steps that you can focus on one at a time. Just avoid getting caught in a trap where you cannot proceed due to a technical reason. Do a minimal proof of concept test first. On success, then you can start embellishing on that, one step at a time.

I think I can answer your custom ads question even though it was directed at dimitris33. It depends on how the ads are implemented. If they are still queried from the DB and output in a standard loop, much like how single posts are output, then you can likely alter the query to return 4 ads instead of one. There is likely a hook you can do this from without altering the theme’s code.

OTOH, if the ad comes from a single get_post() sort of request, you will need to significantly adjust the code. You might alternately consider rolling 4 products into a single ad. For example, assuming the ad is a custom post type with a conventional content area, you could make your “ad” a custom shortcode that queries 4 products that all appear on the one ad’s content area.

@dimitris33 – if you have anything to add, please do so. The more ideas the better!

Thank you for your help!

Using a child theme is a must when modifying a theme.If you don’t have the time to learn to code(or dont want to) its better to either hire someone to do it for you or find a theme that is supported and switch so you’ll have more time to focus on the things that you really want to.