JS & Code in Wordpress

  • Started
  • Last post
  • 21 Responses
  • mg33

    Disclaimer: This isn't a "where do I start to customize Wordpress" post. I've been doing that stuff for years and know the basics-to-competent things I can do with WP, especially customizing themes, custom fields, etc. But since I use WP for all my sites, I'm curious about how I can start exploring more advanced interactivity and motion in WP.

    So what's the best way to approach this? As an example, take this site. www.basicagency.com > specifically some of the subtle motion effects, but more importantly, the page transition when you click "About." Another example is the transitions and effects in a site like this - https://brunoarizio.com

    How can things like this be explored in WP, especially within a robust theme such as Kalium (been using it for a while). Is that possible to integrate stuff like this or are we talking making a whole new theme or custom build?

    Ultimately, I'm interested in just learning some more advanced skills from my own sites, but also using those skills to better design and scope more immersive web work for our agency.

    Where to start? Learning how to integrate a JS library and how to work with it? Using a plugin that offers a bunch of nice effects and tools?

    It's worth adding that in some reading and research I keep finding this title called "design technologist" which is someone that can span visual UI design, user experience, and front end development. I'm lightest on the latter, but it goes with the question above - what are the easiest things to learn and experiment with to help pull off complex web stuff? What can help me bring ideas to life in code in ways that prototyping tools can't?

  • uan0

    look at css transitions first. a css change triggers them.

    historically it‘s js that went into css specs and by now is supported by all browsers.

    • by css change, I mean, the class name triggers a transition with timing and everything defined in css code.uan
    • Thanks. I've gotten into that a little bit in the past year.mg33
    • Don't you need JS to add/remove a transition class?dbloc
  • sted0

    these things if they are wp are headless and a js framework sits on their top what does all the front end things.

    yes you need a theme what supports these things

  • monNom3

    I think you can get a very long way with modern CSS. Here's a slidey/animatey interactive demo I made exclusively with CSS (no JS). http://www.hi.agency/deck/
    You can pick through the (ugly) source-code for some ideas.

    One of my favourite approaches combines modern CSS variables with just a little javascript to manage state. You use JS to update CSS variables in the stylesheet, and those changes will cascade through the document styles, which will animate if you have transitions set.

    Combine that with css transitions, css keyframes, and possibly even 3D transforms and you get a very rich animation pallet that is very light-weight, runs on the GPU, lends itself well to progressive enhancement for older browsers or mobile. You can do some simple checking to cater the experience almost exclusively in css.

    • Nice work!dbloc
    • That's really cool! Thanks for sharing. Question for you below.mg33
    • Thank you! This demo actually won me a trip to Barcelona via Smashing Mag a few years back.monNom
    • Badass, that's awesome.mg33
    • ffs i needed this a few months ago when i was redoing my site. really nicehans_glib
  • dbloc0

    This one works great.
    https://scrollrevealjs.org/

  • dpi0

    Not a expert however I will try to add some ideas.

    Web animations generally. Really complicated story. Starting from basic gif animations and I don't know where it ends. Maybe some crazy WebGL stuff?

    I personally like to use Tweenmax GSAP for web animations.
    Not a coder here however I believe I can do more than many professional front end developers with it.
    Performance can be issue. Making everything work in all devices and screen sizes is time consuming when you use more complex animations. WebGL probably gives best performance.

    Now if you are talking about page animations.
    Fake it til you make it way. You manipulate link behaviour with js.
    Basically instead of loading new page you run outro animation at first, then switch url and run intro animation.

    Or real deal. Previously mentioned headless way. Ok well you can make it with plain old js too.
    Headless way basically means that you use wp as admin. And then WP REST API to get data.
    I have previously used it for more simple websites. To load in news and some basic page content.

    For my next WP project I am going to test https://github.com/Dogstudio/hig…
    I hope that I can avoid building full vue.js front end and I can do all the development myself.

    If anyone knows any good wordpress starter theme with scss setup that would be helpful. Sage/roots is too complex for me however many other starter themes seem bit outdated.

    • Highway looks nice, ty for the share.
      We do a lot of these things, mostly for quick agency jobs with vanilla js with a headless wp.
      sted
  • mg331

    monNom - Looking at your url structure...

    http://www.hi.agency/deck/#p1
    http://www.hi.agency/deck/#p2
    http://www.hi.agency/deck/#p3
    etc...

    Are these individual "sections" within an html page that is "deck," or are #p1, #p2 individual html pages that are being served up in this view?

    That stuff always confuses me, especially when it comes to really smooth page-to-page transitions that come with animation, and the url structure visibly changes from, say, url . com/page1.html to page2.html.

    Any insights on that?

    Really nice work on what you shared.

    • Those are in-page anchors. CSS has a :target attribute that you can leverage to slide the page on changing the anchormonNom
    • see line 200 here: view-source:http://w...monNom
    • http://www.hi.agency…monNom
    • OK - so it's a huge page that extends in all directions out of the viewport, basically?mg33
    • My assumption is that it's a one-pager just being moved around.dbloc
    • well I was a little late to that game. Didn't see any comments when I posted mine.dbloc
    • Yes. Though there's nothing stopping you from making the 'pages' iFrames and moving those around.monNom
    • you might also just use "scroll-behavior: smooth;" on the body instead of :target and translatemonNom
  • mg330

    monNom and dpi - do you guys work full time or do freelance work? Always good to know people who are good at this stuff should I ever be looking for freelancers to use at work.

    • I'm freelance/self-emplo... Always happy to discuss new projects! You can reach me at my terribly neglected website: www.hi.agencymonNom
    • Basically freelance. However I am not sure that I am good at it. Learning for fun and mostly just for prototyping or smaller projects.dpi
  • mg330

    I'll add that in many ways, prototyping stuff like this has been incredibly helpful with www.readymag.com. Surprise of all surprises, that simple visual website tool affords me a ton of capabilities I don't get with things like InVision Studio, Adobe XD, Figma, or other tools where I need to trigger things based on scrolling.

    We were going to transition our company blog to RM pages so we could be a bit more experimental with our content, but their lack of SEO control became an issue for us. Too risky to lose ranking and performance we currently have.

    But we've been building prototypes for immersive content work with it for pitches, and it beats spending an infinite amount of time in After Effects only to end up with a video, and not an actual interactive piece. They also just rolled out a video keyframe feature that's triggered on scroll, hover and click, and gives us the ability to export AE videos an integrate them that way.

  • dee-dubs0

    Gasp recently added scrolltrigger to thier kit meaning you no longer have to rely on 3rd party is to get slick animation on page scroll.

    They've also added ton of stuff for responsive and size triggers etc, I've only scratched the surface but it looks really powerful.

    It's pretty performant too! Used it lightly on recent WP site build and still got 95% + results on most pages for load speed in Google Chrome lighthouse.

  • dee-dubs0
  • nocomply1

    For animations specifically, I've gotten a lot of mileage out of this: https://animate.style/.

    There's also a WordPress plugin built around it: https://wordpress.org/plugins/an…

  • sted0

    for themes like kalium:

    https://codecanyon.net/item/visu…

    • Yep - that's what I build pages with. It's pretty nice and that theme has served me well for a few years now.mg33
  • mg331

    I think I've found what I'm looking for. :)

    Been checking out Oxygen Builder after discovering the barba.js page transitions, and apparently they work wonderfully together.

    https://barba.js.org
    https://oxygenbuilder.com

    My current sites all use the Kalium theme, and I checked out Elementor last year, but Oxygen seems very complimentary to WebFlow. Since I'm basically looking for a better platform to experiment with javascript and json animations and a slicker set of overall capabilities, this might be the way to go.

    I'm on vacation this week and wasn't planning on learning anything like this during the week, but this might be fun.

  • cherub0

    mg33 said:
    "I can do with WP, esp customizing themes"

    Oh? well I may need your advice real soon because I'm struggling.

    First things first. For now my entire site is almost entirely single page except 1 simple login landing page. Do I understand correctly that, I need a theme builder, not a page builder right? Because any page you make by default will be placed at somesite.com/somestupidslug not somesite.com If you want to heavily customize your theme(I'm using javascript and php in conjunction with form boxes), You have to do it in appearance>customize correct? Otherwise as mentioned, it creates a slug. So this presents a problem. You either have the choice to make a custom theme with a theme builder(elementor charges $$ for this) and have it be probably insecure, or you could make a child theme, which I found to be obscure and cumbersome as a first time wordpress user. Most annoying of all it didn't even work, but I did find a javascript plugin that I haven't tried yet.

    In fact afaik the bells and whistles headline features that you could get to make migrating your html to wordpress easy as possible, are streamlined toward multipage sites, so you'll not find those amazing options in appearance>customize ...is that correct?

    Overall I'm a bit disappointed in wordpress. If you're new like me and you're trying to migrate a site INTO wordpress, it's a royal PITA : ( having to do this by hand, is basically recreating your website a 2nd time. DOUBLE THE PAIN! GRRRRRR!!!

    • Oh and somehow I managed to install my wordpress to http://somesite.com instead of: http://www.somesite.… which is what I wanted.cherub
    • .htaccess file rewrites everything to a query:
      every somestupidslug becomes: index.php ?p= somestupidslug
      sted
    • wordpress knows what slug is your index (start) page from a database entry what is customizable from the back-end.sted
    • to "heavily customize your theme" you need to create a base theme, with a function.php file. here you can adjust a lot of things about the front-end.sted
    • here you can add/remove every single include css/js file, affect core/plugin functions, interfere with the data before/after specific functionssted
    • in that new theme if you create a file what starts with the name "page_" you can change your "someslug" page to that template and play with the output.sted
    • here is a little halp:
      https://qodeinteract…
      sted
    • understand that everything is a post in the plain output with the same default properties (title, slug, excerpt, base image etc...).sted
    • so pages are special posts, and you can define/change these via that function.php file. (add custom fields, create new types with special data types).sted
    • in these posts contents there is an option to call wordpress core or plugin functions. these are called shortcodes.sted
    • for example the string:
      [simple_function fuck=yes]
      in this text becomes a call to the shortcode function simple_function with the fuck parameter set to yes
      sted
    • when you have this shortcode defined in your themes function.php it will be called from that file.sted
    • if you have a plugin what has this as function.php extension it will be called from that plugin and execute other functions what manipulate the post data.sted
    • Page builders work leveraging this by shitting out enormous amount of included css/js, and processing tons of these shortcodes.sted
    • But you can use simple html templates with minimal amount of included or inline js/css to get what you want.sted
    • more here:
      https://developer.wo…
      remove css from your output:
      https://developer.wo…
      sted
    • add css to your front-end output:
      https://developer.wo…
      sted
    • and made a typo with the page template so the template file name has to start with "page-" and not page_, best is to copy the page.php from one of the startersted
    • themes and see what's in there.sted
  • cherub0

    @sted:

    The slug thing is annoying but not crucial. Not being able to do simple things like insert javascript and php in the appearance>customize panel, that's more serious bcuz it is currently keeping me from getting the site working properly. There of course doesn't exist a widget that would let you insert your entire index.html code(mine has php and javascript) and separate the html, css, php, and javascript parts into where they should be inside wordpress.

    Overall, what I think you are saying is all of this can be manipulated if you have the skills(I don't) to edit your functions.php file.

    The cheat sheet I got from reddit:
    How to import an entire site by hand?

    "You should cut your html into different parts, header/footer,sidebar, & create a theme. Use basic template, keep the php, & place your html around."

    answer#2
    "yes, make 4 files in a folder. header.php, footer.php,index.php,style.css,f...

    Header.php will be header code only Footer.php will be footer code only Index.php will be body code style.css will be stylsheet and functions.php will be empty with some little function basic search. you will find easily. Now zip the folder and upload it to themes. That's it"

    https://www.reddit.com/r/Wordpre…

    • from the comments:
      "This is brutal." <--- accurate. don't be like me, folks. don't create a fully working site in html/php then have to import into wordpress,
      cherub
    • it's a fucking nightmare.cherub
    • maybe take a look at a wordpress developer tutorial.
      It's a bit hard to grasp all the concepts of wp, but the right way to do it is to write your own theme.
      uan
    • once you get how wp is written and acts...you wrap wp around your site and not the other way around (because that IS the nightmare).uan
  • cherub0

    update: Not all themes are created equal! I tried 20 loser themes until I hit upon one that let me customize the fuck out of my theme (home) page. You would laugh if I told you the name, it's not even popular. And beaver builder? I LOVE it! Helped me figure out layout, lets you put the div id and everything... Yes, a kickass theme + a kickass builder is unstoppable in wordpress. I had to cycle thru alot of shit until I found the gold, but it was worth it.

    One reason alot of the themes were getting on my nerves is they reserve too much space at the top for your menu, thinking that if you don't have a menu you are clearly mad.

    Then, they also tend to reserve space on the sides without letting you go full bleed to the edge of the page. If I set the width at 1280, and I'm not allowed to go all the way to 1280 then I'm uninstalling your theme. I think most of the themes assume you are stupid. Seriously. Cut it out with the nanny shit. Let me go full bleed if I want to.

    What else, there were a few other annoyances that the supposedly "good" themes wouldn't let you do.

    • Sounds like it'd be quicker to just open up a free code editor and with some simple html/css grid and light php, have yourself a website done as you wish.shapesalad
    • Make your own themes (_S is a great start) and customize away.ArmandoEstrada
    • ^^ I have done that and I have my website working (sorta) but I still need to import it into wordpress bcuz of the plugin support.cherub
    • I have my front end INPUT form box working on my wordpress site, but I can't get the output to talk to my php routine to query the database to check what wascherub
    • entered into the formbox matches with the database. My php code is probably flawed, fails early on, I'll post the code in a bit.cherub
    • i'm not a coder but i can read. everything is documented with examples, you just have to try.sted
  • cherub0

    So here is my formbox that I have hosted on a simple html site, this part will look mundane to most of you, but it was new to me, and not easy to figure out. But this is where the user puts in the entry code.

    Probably QBN will truncate it, so I also include link to pasted code.

    http://controlc.com/e8da40d7

    <div id="admission">
    <H1 style="color: white;">LOGIN</H1>
    <form action="checkuser.php" method="post">
    <input id="t-input" type="text" name="user id" pattern="[a-zA-Z0-9]+" maxlength="4" placeholder="type user id here" required>
    <input id="t-input" type="text" name="entrycode" pattern="[a-zA-Z0-9]+" placeholder="Entry Code" required>
    <input type="submit">
    </div>

    • you don't just call a php script like that in an MVC, in wordpress you write that php part into the theme/child theme function.php file.sted
    • https://wordpress.st…
      here is an example with js
      sted
    • please spend some time and read the basics:
      https://make.wordpre…
      sted
    • I'm just trying to get it working as straight html/php on my mirror site for now... I think wordpress will be too hard for me.cherub
    • "you don't just call a php script like that in an MVC," I'm using the PHP snippets plugin, which I assume writes it to your functions.phpcherub
  • cherub0

    This site is under partial NDA so I can't of course show or explain the exact site or setup, but suffice to say ^that formbox is a on a simple html page with no other stuff of importance and it's purpose is to let the user enter a temporary entry code to enter the site(using PHP header command). I have "checkuser.php in my home directory which I've pasted below.

    I told someone on discord, you'd have to be a PHP ninja to figure this shit out! He responded, no, you'd have to be a wordpress ninja! lol.

    Anyway, for now I'm just trying to get it working on my html site and it doesn't even work there. It prints the 1st echo, but never the echo near the bottom. I don't know how to query a mySQL database, nor how to add a table so there is no "mytable" so obviously it won't work but this script fails with critical error, instead of returning a false value when I uncomment that part out.

    TL;DR: The form box should use this to validate the code. It doesn't. Why?

    https://controlc.com/b7278fea

    <?php
    error_reporting(E_ALL);
    //begin with setting the variable for $entrycode

    $entrycode = $_GET[ 'entrycode' ] ?? false;

    echo "2nd line so far so good";

    //create a function to check entrycode

    function check($entrycode) {

    global $entrycode;

    // server,DBUSER,DBPASS,DATABASE
    $mysqli = new mysqli(-removed-);
    $result = $mysqli->query("SELECT id FROM mytable WHERE entrycode = '$entrycode'");
    if($result->num_rows == 0) {
    // row not found, do stuff...
    // return false;
    echo "entrycode not found!";
    } else {
    // row found, do good stuff...
    // return true;
    echo "THANKS FOR LOGGING IN";
    }
    $mysqli->close();

    }

    echo "function created.";

    // function is created, then decide whether or not the original entrycode was real and take action

    if (!$entrycode || !
    check($entrycode));{
    // this code runs if entry code was fake
    echo "ENTRY CODE NOT VALID, ERROR.";
    exit;
    }
    ?>

    • this is badsted
    • i just opened a bottle, let's see if i can help you out before i have to go to bed. (in 2h max)sted
    • where are we checking the user against?
      it's an external system or it should be part of the current site/system/collecti... of functions?
      sted
    • are the users forced to enter these details before accessing the site or is this part of a specific isolated function. does this needs permission management?sted
    • Yes they must enter a valid 4 digit entry code to enter any page except the login page. I was told if you put the following PHP at the top of every page it willcherub
    • boot them back to login page. <?php
      if($_SESSION['logged...
      //allow
      else
      //redirect to the login page
      header('Location: /login.html');
      cherub
    • "does this needs permission management?" nope, once "SESSION:TRUE" is established they can go anywhere and do anything until browser closed then session is overcherub
    • If you are curious, the top entry form is a dummy, I want it for data purposes but the 4 digit code entered is not hooked up to anything or used.cherub
    • wp has proper login/user management, why not just use that? you can shit out the login form anywhere, and lock the content or just specific pages to private...sted
    • also there are things like this: https://wordpress.or…sted
    • "this is bad" <------I KNOW!!!!!! LOLcherub
    • and dat: https://wordpress.or…sted
    • "where are we checking the user against?" I don't want to manage a database of users, due to security risk, so this quasi-anonymous login doesn't reallycherub
    • distinguish users. It just checks their pre-issued entry code(given to them by me) againt a table in mySQL database.(which doesn't yet contain any tables)cherub
    • you are creating a security risk with thesested
    • Oh, I guess the top form could be hooked up to display their name, otherwise there is nothing to display as 'user' when their SESSION is truecherub
    • So the numbers in the top form COULD be their name/id but that is totally unimportant detail.cherub
    • "wp has proper login/user management, why not just use that?" I discovered their inbuilt login system right away and hated it, it's ugly, has their own brandingcherub
    • can't be customized to look like what I wanted, and forces them to sign up for an account. How would they log in without an account?cherub
    • That's a really unsophisticated solution for locking posts, not entire websites.cherub
    • "also there are things like this: /plugins/wp-login-fo... OOHH LOOKS PROMISING, for the 1st time they mention the word 'redirect' ... NICE! u can redirect themcherub
    • after login. seems promising!cherub
    • yeah you can summon that. or customze the login form: https://codex.wordpr…sted
    • *customize.sted
    • Cool. And does the form box html code I posted look ok? After giving that 2nd formbox the name "entrycode" then it's becomes $entrycode and I feed that into mycherub
    • entrycode validation function correct? or do I need to declare the variable or is it already declared by virtue of the formbox?cherub
  • cherub0

    PHP is so fucking hard, man... and wordpress is wrapped in it! I guess if I learn enough PHP I can be a wordpress ninja right?

    I wanna be able to go inside this thread and show this PHP 'admin_post_nopriv_contact_form' who's boss but I keep getting my ass kicked every time I try.

    https://www.sitepoint.com/handli…

    Halp?

    • this will allow users to create/edit posts/pages on the site. so if xy registers as user and the registration + post/page isn't managed it will allow the usersted
    • to do damage.sted
    • i'm guessing you aren't looking at the response in the devtools network tabsted
    • Ohhhhh....cherub
    • I was trying to bypass the inbuilt wordpress "users"/permissions crap bcuz I didn't want to present this exact situation(security risk). So I thought either usecherub
    • advanced custom forms + PHP snippets, or something similar. This looked like something similar but I guess it's using the inbuilt wp user system.cherub
    • When they say "admin_post_nopriv_" they mean the WORDPRESS admin not my own website, I should have caught that. My bad.cherub
  • Nairn0

    There are some things designers who don't know what they're doing shouldn't fuck around with.

    User authentication and card processing are two of them. Well, one and the same, I suppose.

    • I'm a photographer. I need developers. The bald microsoft guy was right. Lol.cherub
    • /me struts up and down the stage shouting "developers DEVELOPERS DEVELOPERS developers DEVELOPERS!!"cherub
    • If you have a bit of cash to spare, perhaps straight up ask sted if he'll do it for you? I can see gotchas slipping through this ad hoc 'review' process! :)Nairn
    • ^Never truer words spoken, but it's not in the budget. an yeah that'd be a dream come true. I've been working for 5 days straight on it and only got this far.cherub
    • 100% sure sted could slam dunk it, not doubting that.cherub