No video

Converting Classic Theme to Blocks Theme - Adding Block Styles

  Рет қаралды 662

TechiePress

TechiePress

Күн бұрын

Transform your Classic Theme into a sleek and modern Blocks Theme with this step-by-step video guide! First, we'll take a look at the old ways of styling, such as using HTML & CSS classes and utilizing TinyMCE Buttons. Then, we'll show you the new and improved way of doing it with Block Styles.
In this video, learn how to convert your old Custom post type for a seamless Block Editor Experience, discover how to use the default Block Editor Styling options. Register new Block Styles, enqueue new Block styles CSS assets to give your site editing experience a professional look and cleaner implementation.
Upgrade your skills and take your WordPress site to the next level!
CHAPTERS
00:00 Introduction
00:29 Using HTML & CSS to style
01:04 Using TinyMCE Buttons
01:40 Case for the Block Styles
02:00 Convert CPT for Block Editor Experience
03:17 Use Default Block Editor Styling options
03:47 Use advanced settings to style
04:30 Register new Block Style
07:51 Enqueue new Block styles css
10:25 Enqueue Block styles assets
Code snippet for the task is on gist.github.com/bahiirwa/900f...
HOW TO SUPPORT THE CHANNEL
=============================================
Do you like what I am doing?
- Join channel membership to get access to perks: / @techiepress Buy me a coffee through www.buymeacoffee.com/techiepress
- Give via PayPal: paypal.me/laurencebahiirwa
- Visit omukiguy.com/support-my-work/
I am social too:
Facebook: / techiepress-1001496550...
Twitter: / omukiguy
Blog & Newsletter: omukiguy.com
Github: github.com/yttechiepress
-------------------------------------------------------------------------------
LEARN MORE IN THE WELL CURATED PLAYLISTS BELOW
--------------------------------------------------------------------------------
Learn how to build a plugin from scratch: • Plugins Vs Functions.p...
WooCommerce E-Commerce customizations
== Build Free Custom E-commerce Online Shop using WooCommerce - • WooCommerce customizat...
== Build Free Custom Theme for E-commerce Online Shop using WooCommerce -
• Woocommerce Restaurant...
====== Build Dynamic Websites with Elementor ======
== Learn the Elementor basics - • Elementor Beginner Tut...
== Build a custom Elementor Widget from Scratch - • Build Custom Elementor...
====== How to use WordPress Gutenberg Block Editor ======
WordPress 5.4 Gutenberg Blocks Updates
== • WordPress 5.4 Gutenber...
WordPress Gutenberg blocks for Designers
== • WordPress Basics Train...
Gutenberg WordPress Block Editor tutorials for beginners
== • WordPress Basics Train...
Custom WooCommerce Gateway Development from Scratch
== • Build Custom WooCommer...
WordPress Custom REST API Namespaces, Endpoints and Examples from Scratch
== • Create Custom WordPres...
====== WordPress Plugin Development from Scratch ======
Build Most Popular & Most Commented Post Plugin
== • Build WordPress Most P...
Build SMS Plugin with External WordPress API Integration using custom WordPress Databases
== • Build SMS Plugin - Ext...
WordPress External APIs Integration Plugin Development
== • WordPress External API...
Convert WordPress to mobile App in Headless WordPress
== Convert WordPress Sports Website into Mobile Application - kzbin.info?list...
Make GraphQL API endpoints with WordPress Headless CMS WPGraphQL Plugin
== • Make GraphQL API endpo...
Customize Your WordPress & ClassicPress
== Build Custom REST API Endpoints with WordPress or ClassicPress - • Build Custom REST API ...
Custom Dashboard Widgets
== • Custom Dashboard Widge...
Build Custom Admin
== • Custom Admin for WordP...
Learn Git
== Git tutorial for writers + software developers for beginners - • Git tutorial for begin...

Пікірлер: 10
@BuntyWP
@BuntyWP Жыл бұрын
This is great tutorial
@TechiePress
@TechiePress Жыл бұрын
Thank you. I am trying to get deep into the world of block development.
@BuntyWP
@BuntyWP Жыл бұрын
@@TechiePress Keep going.
@dashingpix
@dashingpix Жыл бұрын
Good info and waiting to see how you converted to Block theme.
@TechiePress
@TechiePress Жыл бұрын
There is more to come! Thanks for watching and commenting.
@onelook1870
@onelook1870 Жыл бұрын
A course on creating theme from scratchs if possible.
@TechiePress
@TechiePress Жыл бұрын
I am going to make this soon. This series is just to help someone move from classic themes to block themes and maintain use of both in the short term.
@onelook1870
@onelook1870 Жыл бұрын
@@TechiePress can you give some tips on making WordPress site secure? Like hiding WordPress login page or changing default URL
@TechiePress
@TechiePress Жыл бұрын
It is argued Changing the URL will not make your site more secure but reduce spam/brute force login attempts. Here is a good list of stuff to do wpbuffs.com/how-to-secure-wordpress-site/
@onelook1870
@onelook1870 Жыл бұрын
@@TechiePress thanks for the resource URL will check it out.
50 YouTubers Fight For $1,000,000
41:27
MrBeast
Рет қаралды 208 МЛН
Useful gadget for styling hair 🤩💖 #gadgets #hairstyle
00:20
FLIP FLOP Hacks
Рет қаралды 9 МЛН
КАК ДУМАЕТЕ КТО ВЫЙГРАЕТ😂
00:29
МЯТНАЯ ФАНТА
Рет қаралды 10 МЛН
WordPress Block Themes Simplified: A Must-Watch Guide for Beginners!
7:23
The Story of Next.js
12:13
uidotdev
Рет қаралды 558 М.
External WordPress APIs Query with headers parameters
9:21
TechiePress
Рет қаралды 2 М.
WordPress Block Theme Development
47:33
Elliott Richmond
Рет қаралды 21 М.
How I Coded An Entire Website Using ChatGPT
18:22
Nick White
Рет қаралды 1,9 МЛН
WordPress Gutenberg - The Ultimate Guide
27:59
Jamie Marsland
Рет қаралды 48 М.
50 YouTubers Fight For $1,000,000
41:27
MrBeast
Рет қаралды 208 МЛН