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.
Related
I want to create my own web app with js/html/css and integrate it to an existing wordpress page.
I don't want to use wordpress itself but just create it myself and host it on the same server.
Is it possible to include an outstanding app into a wp site?
Sounds like you're creating this page in something like Codepen. If you're just using html, yes, you can just add that page into the current website structure. But why would you want to do that, when you can insert the html into a page inside the Wordpress editor. If you want to add css, you can do that in the html with inline css. Same with js, just add the script into the html.
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"
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 a beginner for sitefinity, so sorry for long post, not sure if its already answered, couldn't find out.
As working on sitefinity-8, looking for best option to select separate css while creating page each time.
I know, I can use different theme for different css, which will not work in my case, as we are having long list of css to use in whole site. Also I know, I can add css or any link into the head tag option of page properties or I can add css widget on the page itself to select css for that page only, but our requirement is to select css file while creating the page itself, this will make easy for novice editors too.
Basic thing I tried, to add css script tag into template, made it editable on page. So I can select css, but it exposes server folders, which is not ideal. Wish is there any way so that we can configure to select folder from sitefinity content- Documents & Files. But didn't find out a way to do so.
Other thing I tries, I have created custom field (related media-images, videos, files) for page to select a document & use as a link to add into head tag (to say link to add css for page.) With this custom field I can select needed document from appropriate folder from sitefinity backend itself, not from server. When I am looking into page source, I could see the link tag is there, but href attribute is empty. I also tried with adding related media tag into template the page is using, but the issue is same, no any value in href attribute.
Struggling to resolve this since long time, seeking for expert's advice.Thanks in advance.
The custom field path you've chosen should work - you will need a custom widget on the Page Template that will read the value of the custom field.
The GetRelatedItems extension method of the page node should give you the document object that was selected.
Having the document the widget will have to inject a link in the head of the page with the proper css attributes.
I am experimenting with using WordPress and Angular JS together through the WP-API plugin. I'd like to have WordPress just serve content through a JSON API and let Angular take care of everything else; routing etc.
To do this I need all requests to my site to go back to my home page, where Angular can then read the URL and load the appropriate view. I'm using Angular UI Router to get extra options here.
I've deleted all the WordPress theme files apart from header.php and footer.php and this means URLs like http://mywordpresssite.com/route work. WordPress routes back to index and Angular reads route.
But, when I make a request like http://mywordpresssite.com/route/parameter I get sent straight back to index.
I don't know what I should be looking at to make this work. Can this be done in the .htaccess file or should I be writing custom routes into WordPress?
If i undetstand you correctly. You shuld create a theme with angular and put all your ajax stuf in functions.php file. Wordpress has suport for ajax. Then you can call that functions from angular theme in your desired format.
Sorry that I do not include some examples but I weiting from mobile.
Let me know if I got your problem
I'm working on a very similar project you can find here:
https://github.com/altrovideo/wordpress-angularjs
the way I've chosen is quite different: I've decided to abandon any front-end wordpress code, so I've written an empty sub-directory in the theme dir , then I put there my html + js + css files using https://wordpress.org/plugins/json-rest-api/
for pagination I use http://angular-ui.github.io/bootstrap and I'm using angular routing module and it works well.
Maybe the presence of wordpress headers.php files and using it as a classical wordpress theme should create the trouble.
Let me know if it helps you