Adding a JS banner to WP sidebar - javascript

for my homework i received a task to implement a banner to a wordpress sidebar. Since i have never done this before with these kind of banners i am pretty much lost. How can i add it? Should i somehow add the whole zip file? I am really lost here, this is not my field of work and i would really appreciate your help.
I am adding a screenshot of how the file looks. Also, my school mate created a tracking code, should it be added to the header of the page?
screenshot

Related

I want edit every single page in wordpress. Is possible?

Sorry if this question sounds stupid but im a noob with wordpress.
I am a javascript developer, and I want make a little game (or games) with wordpress. Opening main page there is a sliding puzzle. After complete, a button appears and clicking there you pass to another page. This is basically the same to all pages.
But I can't find were i put my javascript or HTML code. I create the pages but I can't edit them the way I want, everytime i try to do it i only can edit like word. I cant create, change or edit divs attibutes or tags. To be honest the only thing i can edit is CSS in stylesheet, but is too limited.
I have done the search, try found a solutions or ways to done it but when i look to tutorials is all diferent from what i see.
to give you an ideia I want to do a mix of this:
-> http://www.rustylake.com/room-escape-games/cube-escape-case-23.html
and this
-> https://ebonyriddle.com/
but i don't know how to edit page to page.
can you help me?
Thanks for everything
PS: I know I can do it without Wordpress, but I want use it anyway to learn more about the CMS (because of work) maintain website structure and later learn how to do my own templates or plugins.
To answer your question directly, yes it is possible (and easy, relatively speaking) to add custom code to every page / post of a Wordpress site.
More generally, you’re talking about creating a custom Wordpress theme, which you can find out more about here:
https://codex.wordpress.org/Theme_Development
and here:
https://developer.wordpress.org/themes/getting-started/ (Good suggestion from #ItsGeorge)
Regarding adding custom JavaScript to a theme, your files will need to be enqueued as per these instructions.
Outlining the steps involved in Wordpress theme development would go beyond the scope of your question, but there are plenty of resources online and answers to Wordpress specific questions on wordpress.stackexchange.com. You will need to familiarise yourself with php as well as JavaScript, to take full control of Wordpress.
I would say that developing a game feels like an odd fit... If learning Wordpress is your objective, a blog or personal website might be a better place to start, then you could move onto a game once you are familiar with the concepts involved, e.g. the loop, which plays a huge part in how Wordpress works
Good luck!
The primary focus of WordPress is to put HTML code and JS out of the user. You might manage your extra JavaScript files with your theme customization. If you want to get more control about how your pages are rendering, you should use action hooks and filters. The simplest way for you is to override each page template like this
https://developer.wordpress.org/themes/basics/template-hierarchy/#single-page
The preferable resource to ask Wordpress related questions is https://wordpress.stackexchange.com/

(JS) SPA-like website behavior with background videos

Forgive me if another thread like this exists - I couldn't find the answer to that specific problem.
I'll soon be developing the frontend for a vanilla JS AJAX loaded website, with SPA-like behavior similar to the home slider in this one:
- http://clapat.ro/themes/grenada-wordpress
The methodology I will probably utilize is loading the innerHTML of a container from the targeted sub-template, then pushing the state to the history - pretty standard approach to this, I believe.
Now, the slides containing image background are pretty obvious - all it should take is placing the same image in the target subpage hero section, then animating in on load. The problem might be with the video slides - how to make them continue playing seamlessly during and after the reload? Will such approach force them to start all over from the beginning, as soon as the target page is loaded and placed in the view?
I haven't tried it yet, I thought I'd ask in advance, in order not to get myself stuck up all the way into the incorrect approach :)
Thank You in advance,
Peter
Researching the reference templates for the 100th time, I think I came up with some kind of a solution myself:
if both the homepage and target page had structure like:
<body>
<main-container>
<slider-or-hero-container>
...
</slider...>
<content-container>
...
</content...>
</main-container>
</body>
Then, maybe I could replace the whole "main-container" on normal links, but replace only "content-container" clicking the links within the slider? The slider section would basically just stay, and the script would simply modify its appearance (disabling arrows and slide change, perform the transition animations etc)...
If you had any suggestions at this point, I'll really appreciate that :) Otherwise, I will post an update when I'm done coding it - if it works, it may be helpful for someone in the future :)

Templates for HTML/Javascript/CSS - Progress tracking

Where can I find templates for html/javascript/css (something that uses notepad as an editor haha) please? I was hoping to find a template that displays some text or picture upon clicking such as follows:
Pardon dumb question. It's been 8 years since I've done this.
You can always use notepad as editor :D
here are some links for easy templates:
Free Templates
Without Pictures just some samples to put your code in ///
os-templates.com/free-basic-html5-templates
Here is also a very good website to directly put your code in and to get you result.
Learning HTML CSS again
Also you can find everything on this website for getting again started with HTMl and CSS also Javascript
Try on [W3C] easy examples to understand the image input again. w3schools.com/html/html_images.asp
Sorry I don't have 10 reputations to put more links in....

Wordpress HTML/CSS not displaying correctly - no changes made

I am having trouble identifying a problem and it is driving me crazy. If this is a poor question or in the wrong place please have mercy, I am exhausted trying to figure this out.
Here is how my website is displaying: My Site
And here is how it is supposed to look:
Archive of Page
Nothing has changed as far as I can tell. I have disabled plugins, re-uploaded them there. My mind is boggled!? It looks the same (code) but appears different. What am I missing!?
I happened to get this as well, what you should do is to redownload the layout, thats what solved my issue. I remember adding 1 line to css and removing it, the layout got stuck and refused to update, so that was my solution. I hope someone else can give you a better one though :)
you have a problem with jQuery in your website.
I think you need to update your theme.
your theme is from 6/2014 and now is 6/2016...
Your js makes all this section on home vertical align to middle. And the js doesn't work now and stay on top.
Update your theme :)

CSS/Javascript - Div removing itself from Page

I'm currently putting together a website for a buddy and myself. I purchased a template (mind all the silly placeholders and obvious space issues) to help get the ball rolling as I didn't have very much time available to put in to the project.
On the store section of the page you have that little gallery of products, when you scroll down a bit more it removes itself from the page (page jitters, clicking from store to about works funny). This is causing an issue with my Jquery waypoints setup. I can't for the life of me figure out what's removing it from the page when I'd like to keep it there at all times.
Any help is appreciated.
http://lovedrugfrontend.herokuapp.com/
For quick fix you can try to give the
style = "display:block!important";
to the 'team' class.
This will solve your issue.
This is just quick fix. Cant fix the issue without js files.

Categories