I want to create reusable blocks with Elementor similar to VueJS and React. The blocks should be the same. Only the content will be different. I try to do it with template functionality, but I cannot add content outside it.
Related
I'm very new to WordPress (tbh, it's my first time working with it). And I need to make a website as my school project using CMS. Creating pages with templates is alright, but I have a lot of troubles with buttons. I found this website, and I can see it using WordPress. I need such buttons as on this page https://movie-chooser.co.ua/random-movie-2/ (they appear when you hover over the image). Is this a default option for buttons in WordPress? If not, is there a plugin for this or what is the way to add them on my images?
First Install Elementor plugin https://wordpress.org/plugins/elementor/
and go to page when you add button and open page with elementor
and do drag and drop any element like button, space, text editor etc.
You have several ways to achieve that:
Overwritting Wordpress CSS
Using a plugin
Create your own shortcode
1 - Overwriting Wordpress CSS
If you manage to display all the elements using wordpress template, and your only issue is to display buttons over the images, then it should only be a matter of CSS
2 - Using a plugin
The idea here is to find a plugin that help you to create/display the informations you need (maybe you'll need to add functionnality to basic post though custom fields or using a custom post type).
Once you find the right plugin, again if the plugin dosen't directly offert some settings on the design then you'll have to overwrite the plugin's CSS rules to display the elements as you want.
3 - Create your own shortcode
If you're new to Wordpress I wouldn't recommend this method as it is kind of advanced, unless you're comfortable with PHP/HTML/CSS (optionaly JS).
This is the more flexible solution as you can basically control anything, but it will require you to understand some core concepts of Wordpress like WP Query and how custom queries works.
The idea here is to create a shortcode.
THis shortcode refere to a custom made PHP function, in which you can create a custom request to fetch the informations you need to display from Wordpress database, and display it in an HTML structure that you decide.
THen angain, you'll just have to customize it though CSS.
Note : no need to create a whole plugin if you decide to create a shortcode, you can use the template functions.php file for that.
I have a react application which fetches the wordpress post content and renders it through WP REST API.
The designer templates that are created have lots of CSS classnames around it.
Now when I view this post content in react application, no styles are applied as the classnames are particular to wordpress theme/plugin.
Question: Is there a way to get all the related CSS, so that I can use it in react?
Expected: The template shown in react should be same as the post created in wordpress.
Plugins used: Elementor(to create shapes, style content etc..,)
Tried Solutions:
Keeping a copy of styles from WordPress in client application – not scalable as the CSS files in WP changes when Admin adds more themes/plugins.
Used AutoOptimize plugin to combine & minify all CSS files, and use the final generated file in react, but CSS concatenation has its own drawbacks
Rendering the WP post directly in client application using permalink – This contains navigation header and other information of the site which we don’t want to expose in the client application
The solution that can be tried over here is to get all the stylesheet links from wordpress and add it react head tag. If there are any dependent js links they can also be added. so now when the template is rendered in react it will have all the styles shown.
The other way is similar to the above one but lot easier. Get the total wordpress-post document via rest-api and pass it to iframe in react. In this the page doesn't break in any case because the html document will have all the links that needs to be rendered.
https://wordpress.stackexchange.com/questions/320065/get-the-list-of-enqueued-registered-scripts-for-a-specific-post -> refer this to check on how to get the stylesheet links and also document based on the post id.
https://www.haselt.com/blog/wp-rest-api-modifying-the-json-response -> Refer this to check on how to modify the json response.
I have started learning wordpress recently. I have started from version 5 with this new Gutenberg editor which introduced Blocks. I am little confused regarding difference between this new Blocks concept and old Widgets.
Starting with a Blocks: they appear on page creation and can be added to page, there is nice documentation on wordpress webpage: https://developer.wordpress.org/block-editor/tutorials/block-tutorial/ a lot of stuff related to new blocks.
Everything is fine, but Blocks can be added only to page content and not into areas like: sidebar, footer etc.
For changing content of sidebar,footer areas we need to access Appearance->Widgets area where we can add multiple widgets to specific areas. Also for new Gutenberd Page Builder there is section called widgets available but with less number of widgets than under
Apperance->Widgets section.
Im totally confused. Could someone explain what is the difference betweemn Blocks and Widgets?
Why for areas like sidebar/footer we can add only widgets and editing footer is under Widgets menu?
Why only part of widgets are available for Gutenberg Page Editor
What should i do to create reusable code snippet(some html/css/js logic) to be reused on a page? Should i create a widget and somehow include it to widget section for Gutenberg or maybe i should create this new concept of Block? But i will not reuse my block in footer/sidebar section...
Are widgets something which will gonna die soon in wordpress world and will be totally replaced by Blocks? I remember that in previous version we were able to add widgets to page using some kind of shortcodes, so any widget we want? Is it still possible?.
I will appreciate any comments on that.
The Block Editor is so far being used only to generate "content". In the world of WordPress, that normally very generic word has a very specific meaning: whatever is returned by the function the_content(). Usually it's simply all the text and media input on the edit page of a post or page, though that can be modified by filters. This content is entered either in the classic editor's text box or (now) in one or more Gutenberg Blocks.
Widgets, on the other hand, display content outside the main content, in widget areas that your theme has located outside the main content in headers, sidebars, footers, etc.
I suspect you already know much of this. As to your question about code snippets, the simplest way to re-use code is through WordPress shortcodes. Register your shortcodes in functions.php or in a plugin; enable them in your theme; then use them anywhere. There is now a shortcode Block, by the way, for placing recurring content into main content.
WordPress 'out of the box' comes with some javascript to allow you to send AJAX requests, show the image select dialog, etc.
Does WordPress 'out of the box' come with any default CSS? Especially for use in themes? As an example, does it have its own Grid CSS setup where I can create grids without needing an external dependency like Bootstrap Twitter?
Usecase:
I am developing a simple plugin similar to Visual Composer. It will allow the user to create HTML components. If WordPress has default CSS for grids, I can create the HTML components using that grid CSS rather than relying on Bootstrap Twitter (which could conflict with the users theme).
Wordpress doesn't come with ajax code but there is a hook called wp_ajax_ that you can add custom functions to and a admin-ajax.php file that is used to process ajax requests. See here for a guide on how to implement ajax code in wordpress.
Wordpresses default templates don't come with grid CSS.
I am making changes to a Wordpress site which uses the Avada Wordpress theme.
The page I want to change uses the 100% width template, as do many other pages.
I need to add markup in a place that doesn't allow me to do so via the page editor.
So it looks like I need to change the template.
I know I should make a child theme, but then should I create a new template (code duplication), or should I check the page inside the template, or is there a better way (some kind of refactoring?).?