JS Page Layout

Hi Patrick, it sound like you want to build a “one page” website like this, but maybe with the navigation laid out differently?
https://www.inkthemes.com/previews/?demo_id=21

I would recommend starting with an existing theme that has this functionality the first time you do a one page website. This will help you see how a functional version works and give you something to reverse engineer. There are a lot of commercial themes like this, I haven’t seen too many free ones, but the above example does have a free version:
https://www.ads-software.com/themes/one-page

Basically what you want to do is set up something like this without JS, just using anchors to link to different parts of the same page, and then add JS that animates the transition between these anchors. This allows you to build something that works well without JS and separate the problem into smaller pieces to solve.

Good luck!

Sort of, I want the layout exactly as I described in my picture and that very simple jsfiddle I originally linked. I only want this applied to one page and not an entire theme, I’m not convinced that you even looked at the links I provided or actually considered what I said.

There are a million things in the theme that I don’t want or need, the jsfiddle I provided contains all of the functionality I need for the single page I want to apply it to, like I said, I just can’t figure out how to implement the JS required to make that layout work inside of wordpress. I don’t know why I would buy a theme and worry about reformatting it, adding anchors, and still using JS when the jsfiddle is everything I want and adding JS seems to be my problem using the layout.

Any help with this incredibly simple page layout would be greatly appreciated. Thanks!

Ah, typically if you are setting up a page like this, it is because it’s a one page website with only that one page. I thought your example was the whole page/site, not say, the content of a certain page.

If you want that exact layout you will likely have to do this from scratch like you are. But there are a lot of good options for adding tabbed or accordion content, like in jQuery UI, that might allow you to avoid messing with JavaScript.

Where are you at adding this to your theme, have you got a script file with this JavaScript added to the theme? Are there any errors, can you post a link to the site you’re working on?

From the jsfiddle I posted, I implemented the CSS and obviously HTML but that provides the layout without the links actually working. I don’t know how to implement the JS code into the page or what to do with it to make the layout actually work as the picture and JSfiddle I included. The jQuery UI almost seems like it would work, but I don’t want vertical tabs and a table so much as just links exactly like is in the JSfiddle I posted. The JSfiddle allows you to click the links and display the content but without the JS properly implemented it just adds a # on the URL without actually doing anything. There’s nothing set up on the site right now other than the HTML and CSS that is in the JSfiddle I posted, I’m just not sure how to implement the javascript to make it work.

You have to create a new JavaScript file and added it to your theme to get the JavaScript working. Your theme might already have some JavaScript files, look for a “js” folder. You can add a file to that or create a new folder. You need to make something like a “nav-script.js” file and add the JavaScript contents of the JSFiddle to it.

The documentation on the wp_enqueue_script function will tell you everything you need to know about loading this file to your theme properly. Beware, WordPress loads jQuery in no conflicts mode, so to use the $ shortcut you need a different wrapper in your script.

The contents of the script file might look like this:

jQuery(document).ready(function($) {
	$("#navigation").on("click", "a", function(){
		var id = $(this).attr('class');
		displayContent(id);
	});

	function displayContent(id){
	    if(id == "one"){
	        $("#content").html("Content one");
	    }else if(id == "two"){
	        $("#content").html("Content two");
	    }
	}
});

And you could load that in the theme by adding this to your functions .php file:

/**
 * Enqueue nav scripts
 */
function custom_nav_scripts() {
	wp_enqueue_script( 'nav-scripts', get_template_directory_uri() . '/js/nav-script.js', array('jquery'), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'custom_nav_scripts' );

Oh! It seems like it’s almost working now. Instead of keeping the links in the same place and loading the content where it should, now it’s loading the content on top of the entire thing. Any idea why that would be?

Here’s a link to the page. https://patricktilghman.com/projects

Ah, the problem is that the #content ID is already being used in your theme, and your JS is targeting that ID because it is first on the page.

Switch this to a unique ID, like #project-content in your HTML, CSS, and JS, and it should work. I’d recommend doing the same with the nav ID.

Oh, thank you, that worked! I can finally stop pulling my hair out over this. I still don’t fully understand the implementation of JS, but I sort of understand what’s happening now and just really glad it works. Again, thanks so much!

No problem! Basically what that JS is doing is dynamically removing the content of that container and replacing it with new content from the JS file.

This totally works, but in the future I would consider trying to do it like the tabbed jQuery UI example that I posted. It doesn’t have to actually be jQuery UI or use that layout. But basically what how the tabs work is, there are multiple containers in your content, and they are all hidden aside from one at a time. So the script doesn’t contain the content, you are still able to manage all your content in WordPress, the script just displays different containers as you select them with the nav. Sort of like a slideshow.

One more quick question, would there be a way to get it to display images or a slideshow in the content area instead of text?

Yes, it will load whatever you add in the JS for the content, so it doesn’t have to be just text, it could be an image, but you would have to use the absolute URL to the image in the JS code.

You can manage a little bit of content this way, but for a lot of content, or anything complex like a slideshow, you want to manage this content in WP as a page and just use the JS to hide and show different sections of the content.

Oh, I didn’t see your post. Maybe this method isn’t the way I should be doing it if I plan on including images? The jQuery UI method seems much easier and more efficient, but I have no idea how to implement that to work like this script method.

Basically, you want to create each “tab” as a different container of content in a WordPress page, then in your stylesheet hide them all aside from the first container. Then using JS you can switch between them using something like addClass or removeClass to switch the classed on the containers and display different ones.

Hmm, I might need to just hire a developer to create the layout. I’ve been stumbling through this just trying to include the script and the other JSfiddle was given to me by someone else, I wouldn’t have any idea on how to begin doing something like that.

Yeah, it can be tricky to deal with JavaScript, especially within a bigger scope like WordPress, I’ve found it easier to learn by building simple things outside of WordPress and then integrate them in later.

Generally with JavaScript you want to keep as much of the content and functionality within the HTML and CSS as you can and then add in the JS just for the bits that can’t be done without it. This simplifies things a bit and allows them to work even with JS disabled.

Here’s a pretty good example of how to build your own tabbed section with jQuery, you could use CSS to lay this out with the links on the side like you want it: https://www.jacklmoore.com/notes/jquery-tabs/

[Moderator note: Please do not solicit work from these forums. Recommend WP Jobs instead]