Smarter Sidebars: How to build Better WordPress Sidebars
HTML-код
- Опубликовано: 16 май 2024
- 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 
Хобби
Quite informative, brief, and on point. Big ups!!
Amazing Detailed tutorial Thanks 😍🌱
I found this a very helpful tutorial. Thank you.
Thanks for adding value to the community. Your tutorials are very very helpful. Thanks. Expecting more videos
More to come!
Awesome tutorial.....keep going
Great video. Thank you!
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.
Thank you! I'm really glad you found it helpful.
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.
Glad I could help!
This was a very well done video. Thanks
Thanks! Please let me know if you have a suggestion for a future video.
Awesome knowledge, I am getting very valuable content from your side.
Awesome, thank you!
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!
thanks a million... more videos like this...
Any suggestions for a video topic?
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. :)
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?
@@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. :)
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
Awesme ttutorial
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?
What are you looking to learn, HTML/CSS or PHP?
@@BuildThatWebsite I just want to be able to edit Wordpress sites like you do.
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.
Nice
Hi! sir Thank you for the explanation I Have a Question? Can I make an eCommerce website using the Generatepress theme Without programming knowledge
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.
@@BuildThatWebsite Thank you for the content you provide, And the information I will choose a theme from ThemeForest
Hi...First things first, thanks for the video .... I have one small problem, how do you view visual editor, for CSS? ( black window)
That's the Custom CSS Pro plugin (free). wordpress.org/plugins/custom-css-pro/
@@BuildThatWebsite THX
Was wondering the same thing
Great work! Is this design with free plugins?? Pls reply.
Yes, all free
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
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?
@@BuildThatWebsite thanks for reply.... specific product banner
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.
@@BuildThatWebsite Thanks for info
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?
What exactly are you trying to do with Ele custom skin, and how does it relate to the sidebar?
@@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/
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.
@@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.
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.
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
What width are you specifying? Anything over 300px will probably fill your sidebar.
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.
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: ruclips.net/video/151NXMk0a2c/видео.html
Please make a video generatepress convert into a movie website and provide us custom css
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!
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?
@@BuildThatWebsite I had installed the Custom CSS Pro plugin and added it there. And yes, I checked with my site as well.
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.
@@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.
@@Study_with_me if the website is live and you want to share it I can check your code
sir plz editor --visual editor plugin name
Blackstudio TinyMCE widget
which is the theme u are using here?
i have seen already is generatepress, thanks! nice video!
Yep, Generatepress pro
How to add sidebar in twenty twenty one theme?
wordpress.org/plugins/options-for-twenty-twenty-one/
Provide us css
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.
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.
When I eat pretzels, I get a knot in my stomach.