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.
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'm converting an existing site to use Timber. Here's what I've done so far:
Installed Timber.
Manually installed the Timber Starter Theme and copied over some custom functions from the old theme.
The issue is that page templates from plugins don't seem to be working at all. Specifically, the calendar page from The Events Calendar and the built in templates from Elementor (Elementor Full Width and Elementor Canvas). All I get is a completely blank screen. Here's the calendar page.
I thought this would work automatically because of the functions in header.php and footer.php. Is there something else I need to do to get plugin pages to display?
There's an article on a method to integrate The Events Calendar with Timber here:
https://theeventscalendar.com/support/forums/topic/events-pages-not-showing-up-in-timber-based-theme/
I've used this myself and it works well, one caveat however is that in more recent version of TEC you need to make sure Use updated calendar designs is not selected otherwise there is a mismatch between the enqueued CSS and the rendered views.
I am trying to integrate TinyMCE with WPForms inside the WPForms Blog Post Submission plugin.
I inserted an HTML field with the code
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: '#wpforms-421-field_7'
});
This kind of works as TinyMCE is integrated but in a horrible layout. Also the Images that are uploaded using this are not actually reflected in the actual page.
How do I integrate TinyMCE with WPForms correctly so that Images can be inserted in the text area and saved in the submitted posts?
You are asking a couple of different questions wrapped up in your request ... let me try to address each one:
1 - TinyMCE looks odd in the rendered page
The menus, toolbars, and statusbar of TinyMCE are part of the main web page that loads TinyMCE. As such if you are loading CSS onto the page that impacts these elements you can get to odd visual results like this.
I would use your browser's dev tools to sleuth out what CSS is impacting things.
2 - How do I upload images using TinyMCE?
You have not given us any details at all as to how you have tried to allow users to upload images via TinyMCE. There is an insert image option that you can expose via the image plugin but it requires some back end coding to receive the image and process it.
https://www.tiny.cloud/docs/plugins/image/#image_uploadtab
https://www.tiny.cloud/docs/plugins/image/#file_picker_callback
One additional question on this - Wordpress already has a media library and a UI to interact with that while using TinyMCE to create content - why are you trying to do something outside of WP's own media library?
It seems the author want TinyMCE in place of the textarea when creating Form for submission of Blog Post using WPForm.
Image: Source: https://wpforms.com/how-to-allow-users-to-submit-blog-posts-on-your-wordpress-site/
The problem is WPForm does not come along with the TinyMCE especially for the post content. You will probably get SCRIPT error or UI problem. You can use different plugins other than WPForm. Else write some custom code particularly for the Post Submission Addon found with WPForm.
You must to set Wpforms as "No styling" and check "Load Assets Globally"
I am new into the arena of WordPress. I started learning about how to create website using WordPress. I am wondering if a page layout can be fully designed and customized by using a page builder, why i need to use a theme. Isn't theme is used to define how my contents are going to be shown in pages ?
A theme is actually a collection of files that control the way the site is displayed and to some degree how it behaves. While page builders typically allow you control of some aspects of the visual interface, you cannot have a Wordpress site without an active theme.