How to Redesign Brilliant Directories Blog Results with BD Butler

🚀 Brilliant Directories BD Butler – Customise Blog Search Results & Loop Code In this Brilliant Directories tutorial, I show you a more advanced way to use BD Butler to customise the design of your blog search results. We take the existing Brilliant Directories loop code, copy it into a custom widget, let BD Butler restyle it and then move the updated HTML and CSS back into the blog post type. In this video, we cover: • Brilliant Directories BD Butler • Blog search results • List view and grid view • Search Results Design • Loop code • Custom widgets • Widget Manager • Styling PHP output • Adding custom CSS • Page Header Code • Hiding list/grid buttons • Developer Tools • Restoring default loop code • Brilliant Directories customisation First, go to: My Content → Edit Post Settings Open your Website Blog Articles post type and select: Search Results Design Within the code section, locate the: Loop Code This is the repeating code that controls how each blog result is displayed. Copy the loop code and then go to: Toolbox → Widget Manager Create a new widget and paste the code into it. In this example, I ask BD Butler a very simple question: “I want you to style this layout and make this look a little more modern.” BD Butler then works with the existing code and creates a revised layout. Because the widget contains PHP, the preview may not display the finished result accurately, so the next step is to copy the revised code back into the post type. Copy the updated HTML and replace the existing Loop Code. If BD Butler has also created CSS, copy that separately and add it within the Page Header Code inside style tags. Save the post type and refresh the live website to see the changes. In the example, the redesigned layout works well for the list view but affects the grid layout differently. If you want to use only one layout, you can set the post type to use your preferred view and remove the list/grid switching buttons. Using Developer Tools, you can identify the element controlling those buttons and ask BD Butler to provide the CSS required to hide it. This leaves visitors with one consistent search results layout. The important thing to remember is that you can restore the original Brilliant Directories loop code if you want to undo your changes. Go back into the Search Results Design settings and use the Restore option to return the post type to its default layout. Video chapters: 00:00 Introduction 00:13 Advanced BD Butler example 00:29 Opening the blog page 00:48 List and grid views 01:13 Choosing one search layout 01:32 Edit Post Settings 01:50 Website Blog Articles 01:57 Search Results Design 02:04 Finding the Loop Code 02:27 Copying the Loop Code 02:44 Creating a custom widget 03:07 Opening BD Butler 03:13 Asking BD Butler to modernise the layout 04:06 Preview limitations 04:27 Opening the post type again 04:55 Copying the revised HTML 05:14 Copying the CSS 05:33 Adding CSS to Page Header Code 06:28 Saving the changes 06:43 Viewing the redesigned blog page 07:01 Testing grid view 07:31 Choosing list view 08:00 Hiding the view buttons 08:16 Using Developer Tools 08:43 Asking BD Butler for CSS 09:15 Adding the hide CSS 09:50 Testing the live page 10:12 Customising loop code 10:20 Restoring the default code 10:52 Removing the customisation 11:12 Website restored 11:28 Final thoughts 💻 Need Brilliant Directories Help? I offer one-to-one Brilliant Directories website build, customisation and support services here: https://www.membershipwebsites.net 🚀 Start a 7-Day Free Trial of Brilliant Directories Start your Brilliant Directories free trial here — no card needed: https://directory.brilliantdirectorie... 👥 Join Our Brilliant Directories Facebook Group Join the Brilliant Directories Facebook community here:   / 1738565746879172   👍 Found This Video Helpful? Please like the video, subscribe for more Brilliant Directories tutorials and leave a comment if you have any questions about BD Butler, loop code, blog search results or Brilliant Directories customisation. #BrilliantDirectories #BDButler #BlogDesign #CustomCSS #DirectoryWebsite #BrilliantDirectoriesTutorial