JS/CSS Frameworks and WordPress
I wouldn't have been me if I'd not look into ways to link developer frameworks to WordPress. So I did: https://playground.iseral.be/
I can now use WP as a container app for custom Classic ASP development using aspLite and Bootstrap, something I've been doing very successfully over the last years.
Are there other JS/CSS frameworks you can think of?
21/10/2024 14:42:38 | Pieter | Login | Reply | Replies (14)
- nick6352683@yahoo.com says: (21/10/2024 03:53:20)You cannot (technically can) use animate.css without a way to animate an element without having a way for the animation to start when the element gets in the viewpoint. For example if the animation happens at the bottom of the page, and is a short one, by the time you scroll down, the animation has already concluded. There are some solutions for that, and the one I'm using is the wow.js library - it's 8kb, very lightweight. BTW, that's exactly what Mobirise was using last time I checked 5-6 years ago... Just add the class wow in front of the animate.css class - ie: wow fadeIn - followed by any optional parameters, time length of the animation, and delay time to start the animation.
FontAwesome (v4.8) is another one that I use, as well as Datatables. I load those through their respective CDNs, same with Animate .css btw...
DataTables is unbelievable with ACF Pros Repeater field ! - Pieter says: (21/10/2024 11:02:07)Thanks Nick. I also noticed the Animated.css issue. I will give wow a try. Meantime I also added Bootstrap icons (2000 free icons): https://playground.iseral.be/icons/
I noticed I cannot @import url("") anything in the Extra CSS-field in WordPress. How do you import CSS files? - nick6352683@yahoo.com says: (21/10/2024 18:39:20)I don't...
- I have imported CSS files in the future, but not in the past 7-8 years. At this point, I'm not sure if the Site Editor is blocking the import process or WP itself. The only way to test that is to try importing in the theme's stylesheet. BUT WAIT !!! Knowing you, you are probably using the default theme Twenty TwentyFour. That theme does not enqueue the stylesheet, so whatever CSS commands you put in there, will not get executed, until you enqueue the stylesheet in the functions.php file. Their excuse for not enqueuing the stylesheet was to prove that block themes do not need CSS files, you can do things in the Site Editor and with the theme.json file, which is very stupid and very communistic way to enforce things. So if so, why is there a style.css file? Because a block theme needs at a minimum these files: index.html and style.css, and I think functions.php (I could be wrong on the last one). The header of the css file is where it tells WP the needed info about the theme.
- In a short few weeks we will be getting WP 6.7, with a new default theme, and unless things change, surprise, surprise..., they are now back to enqueuing the styles.css file, so you can now effectively add CSS in there and work out of the box. HOWEVER, unless you export the theme with a different name and make it yours, with a theme update you will lose all your changes. So you have 4 choices here:
1. Export the theme using the WP theme export feature, and manually change the name, so updates will not affect you.
2. Use the plugin https://wordpress.org/plugins/create-block-theme/ I love this plugin, makes things so easy !
3. Create a child theme either manually or even better by using the Create Block Theme Plugin.
4. Forget the Child theme route and use a plugin like WPCode - I love this one too ! - https://wordpress.org/plugins/insert-headers-and-footers/
BTW, you can download the latest WP 6.7 Beta version, or test it in your browser with the WP Playground - https://wordpress.org/playground/ Go to the settings and change the WP version to the latest Beta among other things. It's not perfect, you run out of memory if you use it for some time, but for quick testing without a host, it's awesome. That said I would recommend to use a free or paid version of InstaWP for quick testing ! - https://instawp.com/
You make me work like a mule, with just one line of a question ! - nick6352683@yahoo.com says: (21/10/2024 18:40:23)
- Pieter says: (21/10/2024 20:48:33)Work like a mule

The extra CSS is included in Twenty Twenty Four but these idiots add some lines before the inline CSS. That breaks the import directive.
I now use a JavaScript solution. I add all JS/CSS code in a custom HTML block in the header. And it works fine. But it's ugly like hell.
I'm gonna give WPCode a try. Hope this plugin allow me to do what I want for free... Most plugins require a pro license as soon as you really want to use them. I'll report back! Thanks buddy!
- Pieter says: (21/10/2024 21:06:24)
- nick6352683@yahoo.com says: (21/10/2024 22:51:17)As great as WP is, you have to understand that 25% is great because of the core, and the rest it's the third party devs., plugins, themes, and code snippet coders. However, they have an extensive and numerous APIs to let us extend things easily without re-inventing the wheel each time - the Block Styles API is one tiny example. If you don't know what are Block Styles, ask me for a demo...
As far as WPCode goes, same with Microthemer, and because I make my own themes, I use them for dev./testing purposes only. Once I'm satisfied, I get the code and put them in their corresponding places in my themes (usually in functions.php files, separate php files, or styles.css). With block themes, you also need to register another CSS file specifically for the editor (backsite), and also include all the custom additional CSS, so your CSS additions will also be visible in the Editor. Otherwise they will only apply to the front end, if you just add them in the styles.css file.
The sooner you get into ACF Pro, (there are other solutions, but ACF Pro is the fastest and easiest way to make custom blocks and applications in general, to edit things from the front end too, like a marketplace for example) and making your own blocks and containers to accommodate all the animations, etc visually, the sooner you will realize what can of damage you can do. Until then, WP by itself, it's pretty basic. The real power of WP is the monstrous 80MB of code underneath everything that allows devs. to extend it pretty much to anything they want.
Also, check this out: https://library.wpcode.com/ , and
https://codesnippets.cloud/search
Now go crazy:
I believe in the wpcode code snippets there is a html one that gives you a "back to top" script. If you can't find it, let me know, I have it saved somewhere !
The amount of resources you can find in WP is unreal.... And everyday there are new stuff coming out. For example, officially they just announced a new API for WP 6.7 to register Patterns within plugins, so far you could do that only in themes, unless you were willing to go through hell and use bunch of filters and other stuff just to do that. So in the near future I expect a fury of plugins to offer patterns. The same goes with page/post/cpt templates btw... Initially it was only for themes, now plugins can do the same very easily. And of course with code you can also unregister any pattern or template.
Mule out ! - nick6352683@yahoo.com says: (21/10/2024 22:53:59)BTW, the back to top script is here: https://library.wpcode.com/snippet/e50xyx35/
- Pieter says: (22/10/2024 07:19:01)Wonderful. Added on https://playground.iseral.be/
I needed both the header, body and footer area to implement it. See screenshot. This WPCode plugin really works very well. These 3 areas are the only ones you need to implement JS/CSS frameworks. - Pieter says: (22/10/2024 16:27:54)
- nick6352683@yahoo.com says: (22/10/2024 18:31:30)Actually I knew about the z-index fix, but because I don't use this particular script, and found it weeks ago, I forgot to mention it to you - my bad sorry. Also, during testing, I just put the entire thing in a html code snippet and it worked, since in html you can also have internal. or inline CSS, as well as JS. But the way you separated the script, with the CSS in the header, the html in the body and the JS in the footer, is 100% the right way, performance wise, but in this case, because of the tiny size of the script, I doubt it would make any difference.
- Sergio says: (24/10/2024 14:37:33)I am studying couchcms, as it is based on the inverse concept used by most cms.

That is, cms want the design of the pages to adapt to the cms and sometimes this is not easy and most of the time it is necessary to use code (PHP, ASP, JAVA, PYTHON .... etc), snippets or plugins to obtain the desired style and layout result.
Couchcms does the opposite, take an html page with its layout and style, insert the couch tags for content management and obtain the desired result.
Its creator is a web designer and created it specifically for his work in order not to clash with the adaptations to be made in the various cms he uses for his work including wordpress.
URL of Couchcms: https://www.couchcms.com/ - Pieter says: (25/10/2024 12:23:07)
- Sergio says: (25/10/2024 17:35:30)my pleasure Pieter,

another similar to couchcms and maybe more "powerful" is this: https://expressionengine.com open source like couchcms but with different license costs when used in a commercial or business context:
couchcms 69$ for single website
expressionengine 249$ + 49/year for single website



