![BuildingOnWordPress (with Josh Donnelly)](/img/default-banner.jpg)
- Видео 49
- Просмотров 168 408
BuildingOnWordPress (with Josh Donnelly)
США
Добавлен 24 янв 2021
Getting started with WordPress can be overwhelming. It really shouldn't be that way. That's why I've created this channel, "Building On WordPress" (BOWP). My goal is to simplify your WordPress journey. On my channel, you'll find a wide range of tutorials, catering to both beginners and advanced users. I'll also share some of the interesting and fun aspects of WordPress that catch my attention from time to time. Join me as I make WordPress accessible and enjoyable for everyone.
Tools I use or recommend (some affiliate links):
Kinsta Hosting: kinsta.com/?kaid=FVASVNBTOSGH
Cornerstone Builder: affiliates.theme.co/idevaffiliate.php?id=2477&url=45
ACF Pro: www.advancedcustomfields.com/pro/
Admin Columns: www.admincolumns.com/
FacetWP: facetwp.com/
Gravity Forms: gravityforms.com/
Gravity Perks: gravitywiz.com/
Nested Pages: wordpress.org/plugins/wp-nested-pages/
Tools I use or recommend (some affiliate links):
Kinsta Hosting: kinsta.com/?kaid=FVASVNBTOSGH
Cornerstone Builder: affiliates.theme.co/idevaffiliate.php?id=2477&url=45
ACF Pro: www.advancedcustomfields.com/pro/
Admin Columns: www.admincolumns.com/
FacetWP: facetwp.com/
Gravity Forms: gravityforms.com/
Gravity Perks: gravitywiz.com/
Nested Pages: wordpress.org/plugins/wp-nested-pages/
Native Text Tooltips For Wordpress
Here is a link to the first video: ruclips.net/video/sQQEjs73AYE/видео.html
Here is a link to the html, css, and js used in this video: buildingonwp.com/text-tooltips-for-wordpress/
Here is a link to the html, css, and js used in this video: buildingonwp.com/text-tooltips-for-wordpress/
Просмотров: 126
Видео
Native Cornerstone Tooltip Element - No Plugins Required
Просмотров 16614 дней назад
Easily extend the native Cornerstone dropdown element as a text tooltip element leveraging parameters and a little bit of CSS. Download the element here: pixels.buildingonwp.com/templates/text-tooltip/
Customizable WooCommerce Add To Cart Form Element
Просмотров 4864 месяца назад
As you know, I'm a huge fan of the Cornerstone builder and the ability to create quasi-native elements using the built-in parameter editor & custom css. My latest element is an easily customizable add to cart form which can be downloaded from pixels.buildingonwp.com/ I'm playing with the idea of premium elements given how much work goes into building these. Hope ya'll find this useful.
Gradient Element for the Cornerstone Builder
Просмотров 3835 месяцев назад
This was a ton of fun to put together and I simply needed somebody to geek out with. So I'm sharing this here for my fellow geeks. This is an experimental element that I started working on last night for kicks and giggles. It leverages the native Cornerstone div element custom parameters custom CSS. Seriously, with easy to edit parameters and element level CSS the sky is truly the limit.
The simplest way to create WordPress staging sites
Просмотров 3466 месяцев назад
All too often the question is asked "how do I create a staging site?" Sure, there are plenty of ways to spin up staging sites for your WordPress builds but Insta WP has got to be one of the simplest. Whether you're looking to simply test a plugin, create a proof of concept, debug a site, or build an entire project, InstaWP is the most complete solution on the market. Best of all it is free to g...
Creating sticky containers in WordPress & Cornerstone
Просмотров 6026 месяцев назад
Easily create containers that scroll with you on a page. *Update*: Looks like I left out a crucial piece which I didn't even realize I already had on this sandbox site. You'll need to set your body overflow-x to visible. This only needs to be done once. Perhaps there will be a better / more native way to do this in the future. For now simply add the following to your Global CSS. body {overflow-...
Cornerstone gallery slider using native elements
Просмотров 7538 месяцев назад
A baseline tutorial on building your own custom thumbnail gallery slider natively in cornerstone. No plugins. No code. Download a baseline version: buildingonwp.com/elements/bowp-gallery-slider/
Custom Dynamic Content: Read Time Calculation
Просмотров 3668 месяцев назад
Did you know that you can relatively easily tap into the Cornerstone builder's native dynamic content feature via the Dynamic Content API and create your own custom fields of dynamic content? It's true. In this tutorial we're going to look at how to create a custom read time value that is calculated based on the page's text length and we're going to do it all without needing to add feature spec...
The fastest way to translate your WordPress websites for FREE!
Просмотров 4869 месяцев назад
Translating your site can be both incredibly beneficial to your end users and painstakingly complicated for you. It can also be a tedious or complicated process. There are several great tools out there for WordPress that approach translation from a few different perspectives - but this one (gtranslate.io/) has got to be one of the simplest to setup, leverages Google Translate's realtime transla...
How to create custom submit buttons for your Gravity Forms and place them anywhere 🎉
Просмотров 1,3 тыс.10 месяцев назад
There are plenty of reasons why you might want to create your own custom Gravity Forms submit buttons - from simply wanting more control over style and graphics to being able to disconnect your submit button from the the form container itself and place that button anywhere on your page. This is especially useful when creating mini-applications using Gravity Forms (as you know, I’m a huge fan of...
Easily add icons to your gravity forms fields
Просмотров 81110 месяцев назад
In this quick tutorial we'll take a look at how to easily add Font Awesome icons to your Gravity Forms fields. Step 1: Add Field Classes | 00:40 Step 2: Target Field Classes with CSS | 2:20 Step 3: Add Icons | 3:15 CSS used in this video: buildingonwp.com/easily-add-font-awesome-icons-to-your-gravity-forms-fields/
Cornerstone Builder 7.4.0 Beta Overview
Просмотров 46910 месяцев назад
I know not everybody participates in the beta rounds and for those of us visual learners (myself included) change logs can seem like reading latin at times. So for those of you interested in some of the highlights included in the latest Cornerstone builder beta (released 10/04/2023) - this video is for you 🎉 There’s a ton of great quality of life improvements in this update as well as some grea...
Easily create, train, and launch a custom ChatGPT chatbot on your site in under 60 seconds.
Просмотров 65810 месяцев назад
With the ongoing AI revolution there seem to be new tools popping up daily. Some of them clutter and some of them real gems. Today's video covers one of the tools that I'd consider a gem - and the best part is that it's just getting started: Chatbase. Affiliate link: www.chatbase.co/?via=bowp 🎉 Chatbase allows you to effortlessly train, style, and deploy a ChatGPT powered AI solution that is po...
How to autoplay embedded YouTube videos in 2023
Просмотров 33 тыс.10 месяцев назад
Welcome to Building on Wordpress! In todays tutorial we are going to answer the recurring question: "How do I create an autoplay for my embedded RUclips videos?" We'll keep things simple and to the point and cover the basics on how to autoplay embedded RUclips videos in 2023 using nothing more than the built-in RUclips iframe video embed code html and some nifty little url parameters. Autoplayi...
Easily modernize your form Thank You pages.
Просмотров 34711 месяцев назад
Easily modernize your form Thank You pages.
Unlocking the full potential of WordPress with Custom Post Types and Custom Fields
Просмотров 4,3 тыс.11 месяцев назад
Unlocking the full potential of WordPress with Custom Post Types and Custom Fields
Power your WordPress loopers with live Google Sheets data 🎉
Просмотров 806Год назад
Power your WordPress loopers with live Google Sheets data 🎉
Build your own scroll depth progress bar in less than 5 minutes ⏱ 🎉
Просмотров 453Год назад
Build your own scroll depth progress bar in less than 5 minutes ⏱ 🎉
Wordpress pricing table with toggled views!
Просмотров 1,2 тыс.Год назад
Wordpress pricing table with toggled views!
Building out a fully functional mini-application on WordPress - A to Z
Просмотров 1,2 тыс.Год назад
Building out a fully functional mini-application on WordPress - A to Z
No idea what to call this - just a bunch of random fun website build stuff
Просмотров 476Год назад
No idea what to call this - just a bunch of random fun website build stuff
This tool will change your web design game for good - MarkUp
Просмотров 822Год назад
This tool will change your web design game for good - MarkUp
How To Customize The WooCommerce Cart Without Plugins
Просмотров 9 тыс.Год назад
How To Customize The WooCommerce Cart Without Plugins
Customize the WooCommerce Checkout - No Plugins Required!
Просмотров 31 тыс.Год назад
Customize the WooCommerce Checkout - No Plugins Required!
Create Elegant Hover Effects In WordPress - No Code!
Просмотров 885Год назад
Create Elegant Hover Effects In WordPress - No Code!
Easy WordPress Drag and Drop Mega Menu! - Cornerstone Builder
Просмотров 1,5 тыс.Год назад
Easy WordPress Drag and Drop Mega Menu! - Cornerstone Builder
Customize The WooCommerce My Account Page In 30 Minutes - No code!
Просмотров 6 тыс.Год назад
Customize The WooCommerce My Account Page In 30 Minutes - No code!
You the best 👏
Man you know what would be great, a series of videos on performance optimisation and project organisation using Cornerstone. Best practices in terms of classes, components, etc. Optimizing DOM size, etc.
This was really cool. Thanks for sharing!
I have no Audio in embed video. How can I turn on?
@ayvaniniyisi - unfortunately, the only way autoplay will work is if mute=1. So to enable audio on your video the user must toggle it on themselves via the audio button.
Thanks for this, it was helpful. But I need a way to autoplay with audio ON. If you have figured that out, that would be great.
Unfortunately, I don't think that is possible.
after adding the fields, and filled them to the posts, i can't display them in site-editor.php (single posts template), and i can't find the cornerstone button. i'm using gutenberg and when i add the + button to add a block, i couldn't find how to show the customized field values inserted, can you please help
Hey, thanks for this! It's incredibly useful. Just wondering, can you share the full code for removing the Billing Details headline? You go over it in the video but it doesn't seem to be in the code you shared on your site and I can't see the full thing in the video.
@JenniferNoelle sure thing: .woocommerce-billing-fields h3 { display: none; }
Hi, this is a grat tutorial! I've been trying to change the font family of the form in this code, but it doesn't seem to have any effect. Is there a way to change the form's font family with this code?
I agree with Bill. It's interesting, but very limited to how it can be used I'd imagine. I've been working on something like this for use in a Gravity Form so the topic is in my mind. I'd also love to have the tool tip pull a definition from a CPT and maybe be called inside of Pro. This is great idea for a testimonial maybe? Going to go and try it out to see how that may work for a new project!
Totally - not applicable for every use case but this is a great way to add tooltips throughout pages for various things. If you need simple text-based tooltips vs element based tooltips check out the video here: ruclips.net/video/ZnQP62tXkV4/видео.html
How about linking that pop-up to any piece of text within a Text element using a class? It's a shame it has to be a whole element, interleaved with other text elements. Thanks for the video Josh.
Totally - ruclips.net/video/ZnQP62tXkV4/видео.html
@@buildingonwordpress Genius
why does that CSS produce a triangle? I see the border is 25px wide, a solid line in a transparent colour. What magic means it's a triangle?
I was tryna do a rickroll but this broke me
Thanks. That was very helpful but its still not playing my playlist. Just plays one song then it stops. I'm attempting to embed music videos.
Beautiful. Thanks man
Is there a way to do this without the ACF Pro?
Absolutely. You could setup something like a self looping element and add the gallery items to the element parameters themselves. The video below explains that in more detail: ruclips.net/video/BnmyASlK8eo/видео.html
@@buildingonwordpress THANK YOU! I was able to build it using the self-looping element 🥳
This didn't work for me. I followed step by step. Does Gravity forms not support Font Awesome?
This is a great video, thank you. The only issue is that it is not responsive on mobile and tab, is that adjustable? Thank you again.
Sorted - Thanks
is there any way to set autoplay quality?
Got the two tables built out, button added, now I can't get the JS to work. :| Any other tips @buildingonwordpress ?
I'm using Themeco Pro with Cornerstone builder and your channel is an El Dorado!
Good afternoon. I looked at your lessons on how to create a display setting for the “Blog posts” page using the Archive Layout. And pagination worked correctly at the same time. And then I saw your interesting post on setting up filters from the topic and a link to the video: Filter looper content with buttons. And after setting up Looper Provider, record pagination stopped working.
Thanks
YOU are the real MVP! Thank you!!!
Great video, amazing content! thanks a lot!
Thanks #Researching.Israel!
I wanted to download the file from the description, but it's gone from the site :(
@sheabrown Ah yes - sorry about that. I started moving all of my files over to a more organized template-focused website at pixels.buildingonwp.com. Most of them and more are live over there. That said, this one is not there yet as it is officially being included in the next release of Cornerstone.
@@buildingonwordpress Wow! That is great to hear about the inclusion in the next release of Cornerstone! I hope you get kickbacks from it, you deserve it. Your content is fantastic.
Is it possible to change the company name before the first and last name. My goal is to have showing on the orders as this: #7100 Company Name not personal name
embedding youtube but sound is muted
Awesome, thanks Josh!
That is really cool Josh! Thanks for the tutorials on Pro Theme!
Hey! Thank you for the great video. Now I'm in the implementation phase and encountering the following issue. I need your advice on a URL problem. My goal is to have a nested URL structure, but I'm having trouble achieving it. Here's an example: - I've created a CPT "Wiki" and a taxonomy with multiple levels, also in ACF: - Main category - Subcategory I want the permalink for the post to look like this: /wiki/main-category/subcategory/post But currently, the permalink looks like this: /wiki/post The same for the category archive page: /wiki/main-category/subcategory instead of this: wiki/taxonomy/main-category/subcategory Thanks in advance! Best regards,
Its not displaying on Safari for me .
@TiWMusic What isn't showing up for you? The element as a whole or just the custom styles? Does the standard ATC element work in Safari for you? This element simply leverages the native element and adds some custom CSS. Perhaps there's some compatibility issues with my CSS for safari.
How add "auto loop" ?
"No Plugins". Proceeds to use plugins.
No plugins required at all. Pure CSS.
For some reason, my carrosel don't change the main photo when I click on the arrows or thumbnails.
Hi @andersonaf - odd. Did you set context around the parent container? 1:30
@@buildingonwordpress Thank you for really fast help here! I put the custom attribute as "data-x-slide-contex" for the Div Thumbnail Gallery Slider. I'm doing all over again to check if I missed something.
@@buildingonwordpress It is working, I just put a background colour for the main div and I realize the slider was outside of the main div. Thank you for the tutorial!
@@andersonaf - happy to help! This may already be what you are attempting but both sliders need to function as if they are one slider. So you'll notice I placed both sliders (large feature + thumbnails) into a single parent div container. Then that parent div container is what gets the data-x-slide-context.
Can anyone show how to use custom fields with the Twenty Twenty-Four theme that comes pre-installed with WordPress?
Super good, thank you. I'm glad that someone is giving this theme some love.
Hello Josh. How would you deal with aspect ratios on the main viewport?
Hi @FinchAdventures - great question. You could change the "object fit" from cover to "contain" or you could use an image element inside of the div instead of using the image property of the div itself.
Incredibly helpful. Thanks for this.
Thanks, suscribed!
You are seriously, the MAN!👊
Having issues with the CSS. The problem I am having is that the left side column isn't full width and I have a huge gap between the left column and the right column. Just cannot seem to work out why this is happening. Any ideas? Also mobile doesn't display correctly
@@musiklemontv Have made some refinements to the CSS and actually just pushed those out to the page on buildingonwp.com/easily-customize-the-woocommerce-checkout-without-plugins/ Try now.
when this video autoplay in website , but this view didn't count in youtube. How can i fixed it?
Unfortunately, autoplay typically won't count toward a user view as the user didn't initiate the play action.
just at the time i needed it, you are awesome bro, keep it up ❤
i only need /*Form Field Styles*/ part... it worked perfect, thanks!!!
Does this work with embedded songs from spotify or apple music? 🤔
If you add &mute=0 it will autoplay unmuted. it worked for my use but i cant say ive tesed it on all platforms.
Just purchased this and It's cool
Thanks @developedbyjoe! Appreciate the support!
Hey Josh, I have just implemented this without any issues, great tutorial. Just wondering if you could help with extending this so that when no events are present (or more tot he point, when all events which could still be technically published but all are expired), a "there are no events to show, please check back later" message could be displayed. How can that sort of conditional logic be tooled in this use case?
Did you ever figure out how to do this?
That's a great tutorial
Hi, just purchased this template and it works fine for variable products! But it isn't working quite the same way for simple product types... Maybe some feedback to improve the template: if I want to order let's say 3 sneakers, wouldn't it be nice for the user to see the total price? So $150 (3 x $50) instead of the static $50 (with the counter on 3)? :) Either way, appreciate your passion to make this theme better for everyone! Your tutorials helped me already a lot
Thanks @go-at-alex! Appreciate your feedback and taking the time to leave a comment. The Add To Cart Form is typically used for variable products but curious what isn't working about it for single products? The Add To Cart Form doesn't support ajax natively (which the simple product button does) so you'd need to use an external tool for that. Some solid plugins out there for adding ajax add-to-cart. Love the idea of a live price update. Might need to think through that a bit. My goal was to leverage as much of the native element as possible without custom overrides, additional php, javascript or other complex additions - and this is how the native element works. Really do appreciate the feedback. Thanks!
@@buildingonwordpress if I'm adjusting a single layout for a simple product, the counter and the add to cart button are not in the same row, they are sticking under each other. I can't move the spacing between these two. The price isn't showing aswel, but I guess this logically only works when chosing variables for a variable product. And that's why I was coming to the point of a dynamic price update. When I select 1, I want to see the price for 1, for 2, the price for 2 etc. I really do understand you keeping the template as lean and mean as possible with native solutions. I guess my proposal for the dynamic price is more a personal approach thing as I can imagine most people will be fine with the static solo price displaying Thanks and you're welcome!
It worked perfectly. Thanks for this information.