Add HTML page to Wordpress keeping header and footer - javascript

Good morning, I'd like to add a HTML page containing a JS animation to my wordpress website but I also want to display wordpress header and footer in order to better "blend" it with the rest of the website, is it possible?
visually I'd like it to be like this:
WORDPRESS HEADER
HTML PAGE with JS ANIMATION
WORDPRESS FOOTER
I've tried simply adding the HTML code in a wordpress page content but I think the CSS of the HTML page is conflicting with the CSS of wordpress and it doesn't look good at all
Maybe I can simply add only the JS animation to a wordpress page? I'm not sure if it's possibile and how
any help would be appreciated
Thanks

Add a page with just page title. it will create a page with "page" prefix inside wp-content/themes/themename/page-test
you can write your own code there or you can add short code to a page. it will display header and footer:
https://www.smashingmagazine.com/2012/05/wordpress-shortcodes-complete-guide/

Related

edit html of wordpress and applying js code-> defer images

I want to edit this site :
https://beansandbriff.com/
which contain of many pages which you can see if you scrolled to the bottom. every page contain many images.
all the images of all pages are loaded when the site is load which cause the site load slowly if I increased the number of images.
I have awesome code that can defer images:
https://varvy.com/pagespeed/defer-images.html
and I know html and JS very well but I don't have experience in WP .
so my ask how I can implement this code to the site ?
I searched a lot and it seems very complicated and sometimes find who say I can't edit html code !!
so if anyone can help I 'll be very grateful
thanks
As the author of the article suggests:
put the script right before the end body tag in your html
To do this, in WordPress Dashboard, go to Appearance >> Editor and edit your Theme Footer file (footer.php). Put the script before the </body>

Edit existing items in a Wordpress theme

I've created a homepage, that simply has a sentence as the content
I've edited the settings so that this the front page of the website.
However, given the theme that I am using, when I go to the home page, this is what I see
I can see the content of my home page at the very bottom, but before that, there is a slider and a couple of blocks (that presumably come with the theme).
I'd like to know either how to remove these default blocks, or edit them myself to include links to other pages.
Also, as you can probably tell, I am very new to Wordpress. Are there any good documentations for beginners that would teach me how to create pages, edit and customize them so that I can have control over the whole page (as a regular website)?
I think you should edit by the php file, so if u don't know PHP start here.
Go to : menu > appereance > editor.
Here u see all the files you need. The file you should edit change with the theme.. so go through the code.
Maybe, it's under header.php
The html code you get above your content is inserted from the page template assigned to your homepage. Thus, if you want to modify it somehow you should go Editor Panel in Appearance Menu, then edit desired template. You can also create your own template with structure you actually want and assign it to that page.
As for a documentation, I think you're going to be good with the official one.
You can edit it by going appearence->editor with php code, be careful when you doing this
if you want to edit a header, you can find header.php in that particular theme
same with footer.php and you customize the design by clicking appearance->customize

Get certain element from webpage as embed code

I would like to know if it's possible to rip the Meta Slider element from a WordPress post as an embed code to place on a different HTML file of different host?
Particular Page
The link above will be the exact source and the meta slider element there is the one I would like to have the embed code. Thanks in advance.
This is basically a WP wrapper for the FlexSlider jQuery plugin. Get it here: http://flexslider.woothemes.com/

I want the same Fixed Header across all pages - Can I link dynamic HTML or Javascript

I have a website that is mostly done in HTML and CSS with some JS.
Ive now set up a page where header is perfect to me - it is FIXED contains Divs with a Logo, a search bar and phone number. Underneath this div is a Navbar that is controlled by master Javacript file as a template and also the Navbar fades upon scroll with JS.
My question is how do I set it up so that the entire header with all that styling can be replicated on 80 pages and I just have to change it once?
I've tried this below - where an external page header1.html has the header code (of which has full html head, body, etc) but when I load it all, the page calls up the header1.html quickly and then disappears.
<script src="//code.jquery.com/jquery-1.10.2.js"></script> in head
<div id="header"></div>
<script>
$("#header").load("header1.html");
</script>
end body
header1.html should NOT contain a full html document. Rather, it should just be the snippet of html code that you need for the header stuff.
You can use php. Place the content from the header in header.html, place te next code in every page where you want show the header.
<?php include 'header.html'; ?>
Note: change your files from .html to .php

better ways to load views using jquery

OK. Let me try to explain my problem. I have three pages index, profile, contact and three links or navigation buttons in the header. When user clicks on profile button profile.html is loaded dynamically from the server using jquery load() method and place it in the div called container. Same goes for all pages. Now I also load all of my jquery plugins including jquery shadow plugin, script.js and jquery library on the index page only once. Now what I have is that on profile page I have a div tag on which I want to apply a jquery shadow plugin in my script.js which is loaded in index page. But it does not work this way(no idea why). What I have to do to make it work is to add a script tag in profile page and inside this I apply this shadow plugin to div tag which is inside profile page.
So this is what I want to ask is, Is there a better way to load pages through ajax using jquery so that whatever javascript code I am applying to all of the pages should be applied to all pages?
Thanks in advance

Categories