Smarter Sidebars: How to build Better WordPress Sidebars

Рет қаралды 23,597

Күн бұрын

Learn how to build better, hyper-targeted sidebars in WordPress. Tips on favorite sidebar widgets, design, sticky widgets, and contextual custom sidebars.
▸▸ Best sidebar plugins: www.buildthatwebsite.com/best...
********************************
Video Sections
********************************
0:00 - Intro
0:20 - Adding sidebars to your posts
1:50 - Best Widgets for sidebars
2:50 - How to add widgets to sidebar in Customizer
3:50 - Recent posts widget (with thumbnails)
5:20 - Visual Editor TinyMCE Widget (Black Studio TinyMCE)
6:47 - Adding social icons (lightweight social icons)
8:03 - Table of Contents widget
8:46 - Sticky/Fixed widgets (Q2W3 fixed widget)
10:12 - Z-index for fixed widgets
11:17 - Sidebar design & CSS
13:19 - Boxed widgets design
14:18 - Widget padding & margins
14:40 - Widget Title Styling
16:26 - CSS selectors for individual widgets
17:35 - Custom Sidebars / Contextual Sidebars
20:40 - Outro & Thanks!
#wordpress #sidebar #widgets

Пікірлер: 88

@dolphinetechnologieslab579 2 жыл бұрын

Quite informative, brief, and on point. Big ups!!

@biplabroy8991 2 жыл бұрын

Thanks for adding value to the community. Your tutorials are very very helpful. Thanks. Expecting more videos

@BuildThatWebsite 2 жыл бұрын

More to come!

@MuhammadKamran-ik1by 2 жыл бұрын

Amazing Detailed tutorial Thanks 😍🌱

@kazinaffi7412 3 жыл бұрын

This was honestly a great tutorial. I didn't expect it to be this good. Thanks for sharing all those information. I hope your channel grows more cause you deserve it.

@BuildThatWebsite 2 жыл бұрын

Thank you! I'm really glad you found it helpful.

@josgrinsven7558 2 жыл бұрын

Great video. Thank you!

@MaroondahJazzJammers Жыл бұрын

I found this a very helpful tutorial. Thank you.

@richardjohnson1242 2 жыл бұрын

I cannot thank you enough. Everything has been said by others. I have been looking for information on this and couldn't find anything. Really appreciate the details. Thank you.

@BuildThatWebsite 2 жыл бұрын

Glad I could help!

@shahriarsaikat4130 2 жыл бұрын

Awesome tutorial.....keep going

@robertrankin7805 3 жыл бұрын

This was a very well done video. Thanks

@BuildThatWebsite 3 жыл бұрын

Thanks! Please let me know if you have a suggestion for a future video.

@growmorebizz8300 2 жыл бұрын

Awesome knowledge, I am getting very valuable content from your side.

@BuildThatWebsite 2 жыл бұрын

Awesome, thank you!

@sulemanmughal5397 3 жыл бұрын

thanks a million... more videos like this...

@BuildThatWebsite 3 жыл бұрын

Any suggestions for a video topic?

@FrankDeBlasi Жыл бұрын

Great video! I didnt know a lot of these even existed. Recently added a blog on my site and this was beyond helpful. New subscriber here. :)

@BuildThatWebsite Жыл бұрын

Thanks and welcome to the channel! I'm going to start publishing again regularly. What sort of challenges are you currently facing with your website? Are there any topics you'd like me to cover in future videos?

@FrankDeBlasi Жыл бұрын

@@BuildThatWebsite Glad to hear more content is coming. :) Im not having any current challenges at the moment other than getting the blog going. I am going to take a look at more of your videos and see if theres anything I can use. Ive been in the industry over 20 years, and theres always more to learn. :)

@alljobsbd2411 Жыл бұрын

Awesme ttutorial

@dipubiswas2099 3 жыл бұрын

Nice

@saqi2730 Жыл бұрын

Thank you for the helpful video. I am having an issue with "recent posts with thumbnail" settings, I am unable to show thumbnail to the full-width of the sidebar even after selecting "medium (300 x 300)". I also checked the "use aspect ratio of the original image" but still it shows square thumbnail. Please advise how to show full-width thumbnail in the sidebar of recent posts. Thank you!

@user-xn5qh5mg6o 6 ай бұрын

This was really good! Thank you! I have the free version of generate press so my page looks different. The custom sidebar doesn't display. It just makes the sidebar go away from the page it's on. If you have any ideas, I'd appreciate them. Thanks!! Trish Henry

@ucantbevan1 2 жыл бұрын

I just want to say thank you. Your videos are extremely helpful and my website is really starting to come along because of them. The only downside is when I get stuck I don't have the coding knowledge to figure it out lol. How do you think I should go about learning this stuff?

@BuildThatWebsite 2 жыл бұрын

What are you looking to learn, HTML/CSS or PHP?

@ucantbevan1 2 жыл бұрын

@@BuildThatWebsite I just want to be able to edit Wordpress sites like you do.

@ckideastrailers3321 2 жыл бұрын

Please i keep on receiving this problem when trying to edit with widget in customizer. Your theme has 8 widget areas, but this particular page doesn’t display them. You can navigate to other pages on your site while using the Customizer to view and edit the widgets displayed on those pages.

@youcefdebih2660 3 жыл бұрын

Hi! sir Thank you for the explanation I Have a Question? Can I make an eCommerce website using the Generatepress theme Without programming knowledge

@BuildThatWebsite 3 жыл бұрын

You can definitely make a basic e-commerce website in WordPress with no programming. The more complex you want the site to be, the more likely you would need a developer. But you build some pretty complicated functionality with just plugins and no code. You could use GeneratePress, but it's much easier to design good sites with GP if you know at least some basic CSS. It might be easier to use a premium theme from a site like Themeforest that has a prebuilt design you like. Many premium themes also have extra integration with Woocommerce.

@youcefdebih2660 3 жыл бұрын

@@BuildThatWebsite Thank you for the content you provide, And the information I will choose a theme from ThemeForest

@neavys26 3 жыл бұрын

Hi...First things first, thanks for the video .... I have one small problem, how do you view visual editor, for CSS? ( black window)

@BuildThatWebsite 3 жыл бұрын

That's the Custom CSS Pro plugin (free). wordpress.org/plugins/custom-css-pro/

@neavys26 3 жыл бұрын

@@BuildThatWebsite THX

@ucantbevan1 2 жыл бұрын

Was wondering the same thing

@Stronglord10 Жыл бұрын

Great work! Is this design with free plugins?? Pls reply.

@BuildThatWebsite Жыл бұрын

Yes, all free

@jashveerrana Жыл бұрын

Please make a video generatepress convert into a movie website and provide us custom css

@banatcollections527 2 жыл бұрын

It is really nice information about sidebar but i have questions i didn't see how to reduce the size of sidebars width. Can Please tell us how to reduce the sidebar width size.

@BuildThatWebsite 2 жыл бұрын

The best place to change your sidebar width is in your theme settings. Many pro themes have this feature. If you don't have that option, you have to use CSS. You'll need to be comfortable with media queries and possibly flexbox depending on how your sidebar is constructed. You can checkout my latest video on chrome devtools to learn how to check the CSS styles affecting your sidebar width: kzfaq.info/get/bejne/Z5thgbt-0JbFYpc.html

@JackLoloin 2 жыл бұрын

im using the same widget for recent post, but somehow the image size wont change to the selected size. it appears big n filled my sidebar

@BuildThatWebsite 2 жыл бұрын

What width are you specifying? Anything over 300px will probably fill your sidebar.

@karpetmotor1163 2 жыл бұрын

Thanks for your tutorial, I have question: How to display specific sidebar to only 1 post? I mean side A to post A, sidebar B to post B, etc... thanks before

@BuildThatWebsite 2 жыл бұрын

You can do that with the 'content aware sidebars' plugin I mentioned in the video. But if you do that for every post it will eventually get unmanageable. There may be a better way to do this with fewer sidebars and dynamic content. What do you want to put in the sidebar?

@karpetmotor1163 2 жыл бұрын

@@BuildThatWebsite thanks for reply.... specific product banner

@BuildThatWebsite 2 жыл бұрын

On my own sites I'd only use one sidebar for all those posts. You use a plugin like Advanced Custom Fields to store different banner info each post (image and a link for example) then you use the html widget to dynamically display the custom field data in the sidebar. I've done exactly this on several sites.

@karpetmotor1163 2 жыл бұрын

@@BuildThatWebsite Thanks for info

@faizrehman7937 3 жыл бұрын

Hi, thanks for the video. I have a question though - how can we add dynamic posts with custom designs using plugins like Ele Custom Skin instead of doing all this work through wordpress widgets?

@BuildThatWebsite 3 жыл бұрын

What exactly are you trying to do with Ele custom skin, and how does it relate to the sidebar?

@faizrehman7937 3 жыл бұрын

@@BuildThatWebsite Thanks for the reply. If you may kindly check the sidebar with popular blog posts in this page. I was talking about creating such a sidebar as is in this news website. www.thenation.com/article/economy/cryptocurrency-crash-bitcoin-musk/

@BuildThatWebsite 3 жыл бұрын

I wouldn't use Ele custom skin for this on my own sites. It's overkill. ECS is better for creating very custom card layouts for post grids. For a simple 'recent posts' or 'popular posts' layout, I'd use one of the many five-star rated recent post plugins in the Wordpress repository.

@faizrehman7937 3 жыл бұрын

@@BuildThatWebsite Sir I think you did not check the sidebar of blogposts on 'thenation' website. I have used the plugins you are referring to for example the plugin named 'Recent Posts Widget With Thumbnails'. The problem with these plugins is that you can't customize the look of your posts list.

@BuildThatWebsite 3 жыл бұрын

I did check the sidebar. It's a very simple post list. It's just the post title, a number counter (1-5) and a border between the list items. You could customize one of the post-list plugins using CSS to get that look. If you don't know CSS, you could hire someone on fiverr to copy that design and write the CSS for about $10.

@neverjethot 2 ай бұрын

When I eat pretzels, I get a knot in my stomach.

@mbguantay 3 жыл бұрын

which is the theme u are using here?

@mbguantay 3 жыл бұрын

i have seen already is generatepress, thanks! nice video!

@BuildThatWebsite 3 жыл бұрын

Yep, Generatepress pro

@Study_with_me 2 жыл бұрын

I tried typing in the CSS but I am unable to see any changes in my website, could you help me out with this? The tutorial was great by the way, thank you!

@BuildThatWebsite 2 жыл бұрын

Where are you adding the CSS? And did you adjust the selectors to match your own site, or just use the code as shown in the tutorial?

@Study_with_me 2 жыл бұрын

@@BuildThatWebsite I had installed the Custom CSS Pro plugin and added it there. And yes, I checked with my site as well.

@BuildThatWebsite 2 жыл бұрын

It's most likely one of two things: 1. You're using the wrong selectors to target the element 2. You don't have enough specificity to override existing styles targeting the element. If you want to make sure the plugin is working properly, just open a page that has some paragraph text in it. Then write the rule: p { background-color: hotpink !important;} If that works, then you know it's the way you're writing the CSS, not an issue with the plugin loading the stylesheet correctly.

@Study_with_me 2 жыл бұрын

@@BuildThatWebsite I checked with that rule and the background's colour did change, but I am still unable to figure out what I am doing wrong with the sidebars. Thank you so much for your help though.

@BuildThatWebsite 2 жыл бұрын

@@Study_with_me if the website is live and you want to share it I can check your code

@sunjayjangam 2 жыл бұрын

How to add sidebar in twenty twenty one theme?

@BuildThatWebsite 2 жыл бұрын

wordpress.org/plugins/options-for-twenty-twenty-one/

@dipubiswas2099 3 жыл бұрын

sir plz editor --visual editor plugin name

@BuildThatWebsite 3 жыл бұрын

Blackstudio TinyMCE widget

@jashveerrana Жыл бұрын

Provide us css

@santapaula2717 2 жыл бұрын

I don't have anywhere 'add widget' option on my Wordpress. On every tutorial it shows it's there just not on my f-ing site. :D So I am unable to do anything there. Good tutorial though.

@BuildThatWebsite 2 жыл бұрын

Since WordPress 5.8 it's now a big + button. Just click that too add a block or you ca drag a widget into the sidebar. You can also install the 'classic widgets' plugin to go back to the old view shown in the video.