Wordpress theme, best way to find code location - javascript

So I have a Wordpress theme & need to replace the logo upon scrolling down.
Should be simple enough but after hours of sifting through code and testing, no dice.
Could anyone tell me the best way to view the front end of a production website and follow the code through to the correct location in the files/code?
I am using FileZilla & Notepad ++, have followed file names and searched for elements.
Thank you in advance.

All your theme files are located in /wp-content/themes/your-theme-name/
Go to the folder for your current, active theme - you can either search for the elements after inspecting them in your browser, or you can learn a little about WordPress template hierachy so that you can expect where to find which block/snippet of code that you are trying to edit.

Related

How do I load this HTML file for my own visualization?

For this problem, I have not many options as I am not sure which direction I should be heading.
Now I am studying Deep Learning frequently and I want to toy around with Stanford's CS231N's Convolutional Neural Network Demo as I find it extremely user friendly. The visuals are embedded in this website. I really want to toy around with this but I do not know how and where to start.
I have knowledge of Python and VS-Code.
Take the index.html file from the above link.
If you look closely in index.html, there are two scripts you need that to make it work.
Copy the files from the demo folder from the link and the files structure should look like this(same as in the github demo)
Now double click on index.html and choose a browser to open this work and should work as expected. And you can also modify the code and reload the index.html to see live changes.

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/

Embedding a multiple page pdf into a site with user ability to flip between pages + additional features

I am looking for some general advice on where to start with a project. I am working on a journal website which will display a handwritten journal with the ability to switch between a typed transcript version via a switch button. I am coding the website from scratch and working within php.
It will be around 70 pages long.
Have the ability to switch between the pages via arrows or by typing in a page number.
A switch that switches between the handwritten version and the typed transcript.
I have included some annotations of my designs below to give some more details of what I would like to achieve.
Is there some kind of framework available that allows for embedding multiple page pdf into a site that I can then work from to achieve the ability to switch between the handwritten and transcribed version
I am a bit stuck on where to start - I am more of a designer :)
Thanks for taking your time to read
Nina :)
The most common JS framework to embed PDF files in a webpage is pdf.js, you can find a demo here https://mozilla.github.io/pdf.js/web/viewer.html. I have not used pdf.js but I don't think it allows for editing the PDF content, like the style and fontface. So you could create 2 pdf files, a handwrittin and a plain pdf and just switch the viewed files around with a button, or try styling the pages in HTML/CSS and not PDF's. If you are not that experienced with CSS I would recommend the former.
Hope it helps.
Edit: I am not sure if a clickable popup is possible inside of a PDF, if this is an important feature, you may have to choose the HTML/CSS path instead of the PDF path.

Toggling for Live Webpages

I am currently working on a project at my internship where we are trying to create some kind of display that shows live status updates of our servers. I have the webpages I need to use on file; however, I am very confused on how to code the display. We are planning to use HTML and JavaScript, so I have been able to find these links. Are they leading me down the right path?
Javascript to rotate between pages within ONE HTML page
https://www.wikihow.com/Toggle-HTML-Display-With-JavaScript
Still, I am not sure how to add the links in there as well as if/how to write the CSS.
Any help would be appreciated!

Debugging/Reformatting a replacement jquery js plugin

In very basic terms, where does someone experienced in HTML, CSS & JS start looking for errors in the formatting of various JS plugins?
For example, I'm working with a couple of different templates that went in tandem with a youtube tutorial on Expression Web 4 from the Timothy Framework series. Now that I've completed the tutorial site design, which included a basic jquery slider and lightbox effect, I'm trying to replace those slider and lightbox effects with a different version. For the question's sake, let's say I'm trying to replace the Magnific-Popup plugin with a Feature-List plugin.
The file structure has been updated with the needed photos and linked correctly. The CSS and JS files are in place and linked correctly. The script activates more or less correctly in any given browser, but the formatting is all off. My text and various images aren't lining up correctly.
I believe there's probably a conflict in the div that contains the Feature-List plugin between the pages main CSS file and the plugin specific css, but I'm hoping someone can give me some general guidance as to where they would start to look to debug/reformat the plugin.
I can copy my code or be more specific, but I'm really looking for just some general thought process ideas.
Thanks in advance!

Categories