So I have a client who wants a little extra that is beyond capabilities of my wordpress theme that I have purchased. I know through html, css and js I can create it from scratch (they want animations and a neat looking landing page). I was wondering if there was a way or any plugins that I can use to directly create a page using all of the code. Sorry if I am not explaining my question well!
2 Answers
You can create custom templates in WordPress defining the template name at the top of the template. This is a basic template that should help you get started. You can save your template with a file name like tmp-mycustomname.php and put it in your theme. You probably should create a child theme where you can save this custom template and add additional CSS without losing it if the client updates the theme.
<?php /* * Template Name: Template name goes here */ ?> <?php get_header(); ?> <div class="row"> <div class="col-md-12"> Your content can go here. <script> alert ("my javascript is working"); </script> </div> </div> <?php get_footer(); ?>
Once your template has been created go ahead to pages > add new. Then you should see something like this where you can find the custom template in the dropdown.
Helpful links:
https://developer.wordpress.org/themes/advanced-topics/child-themes/
https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/
You can follow the way JediTricks007 shown. But if you want completely different css and js for your landing page and do not want to include wordpress themes header and footer you can do so by not including the header and footer.
<?php /* * Template Name: Your Template Name */ ?> <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Your Title</title> <meta name="description" content="Your Description"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <!-- Add your own desired css independent to wordpress theme --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <!-- Add your own desired js independent to wordpress theme --> <script src="js/vendor/modernizr-2.8.3.min.js"></script> </head> <body> <!-- Add your site or application content here --> <p>Hello world! This is HTML5 Boilerplate.</p> <!-- Add your own desired css independent to wordpress theme --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/{{JQUERY_VERSION}}/jquery.min.js"></script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> </body> </html>
That way you can achieve whatever you want without changing the themes header and footer files.
After saving the template file you can create a page with that template and make that page your homepage.
Hope that helps.