Tricky layout with targeted menu and iframe

  • Resolved Drding

    (@drding)


    11 years, 6 months ago

    Hi there,

    I’m not sure if this can be done through WordPress. It would be great if it could, because I’d like the whole thing to be as automated and simple to update as possible.

    I’ll try and explain what I’m looking to do as best as I can.
    Basically right now I’m building a custom theme for a webcomic. One of the pages we want to set up is a cast page that lists all the characters from the story and has bios that go with each character. Sounds pretty simple right?

    It’s the functionality that has me stumped. The way we’d like to set it up is a menu of character names along with a small image thumbnail listed vertically to the left of the main content area where the character’s biography would be stated.
    The idea is to click on a name to the left and that pulls up that particular character’s bio and loads it up to the right of the menu.

    So what I need to figure out if it can be done is:

    * Creating a custom menu that lists characters and a thumbnail (right now I have each character as a post and their image set as the featured image).

    * Have that menu’s links target what I’m guessing would be an iframe or if it can target a div (maybe with jquery or ajax?).

    * Adding a new character post adds to the menu to the left, so you’ll be able to click them and view their info.

    Normally I’d code up links with an iframe and have them target it, but I really wanted to utilize WP as much as possible to make things easier to add and update without having to go into the code to say add a new character.

    I’ve been grouping the characters together by a category. And I’m pretty sure I have to make a loop that will pull the post titles under that category and list them. I think that’s how to make the menu part. I initially thought about using WP’s menu builder, but I don’t know how to set up menu items to have a specific target (ie: perhaps an iframe). I only see a “open in new tab” option for links.
    On this loop idea, I’m not sure how to do that with categories.

    This raises the question though, even if I can build a menu through a looped list from this category, how do I get the posts to appear to the right?

    Now, let’s say I use pages instead of posts, I could then have the pages show up in an iframe, but as far as I know you can’t categorize pages, so then how could I build a loop of page titles to build a menu? Again without using WP’s menu builder because I can’t set a specific target for the links.

    It’s perplexing haha. Any suggestions would be awesome, even if it’s for a plugin that has the same functionality I’m looking for above.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The way we’d like to set it up is a menu of character names along with a small image thumbnail listed vertically to the left of the main content area where the character’s biography would be stated.

    Can you link a website that does this already for illustrative purposes?

    Thread Starter Drding

    (@drding)

    I wish I could, and I’m working on the site locally right now.

    I did manage to find a plugin that can give pages categories. Do you know off hand how to loop page titles by category in order to create a list of them?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You’d need create a thread in that particular plugin’s sub-forum on www.ads-software.com; go to the plugin page and press on the “Support” tab. Then scroll to the bottom and fill out that form.

    but I don’t know how to set up menu items to have a specific target (ie: perhaps an iframe).

    In the dashboard under Appearance > Menus, you can create your own menu and then specify custom links for each menu item https://codex.www.ads-software.com/Appearance_Menus_Screen#Custom_Links

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’m sure your layout is feasible within WordPress. WordPress does not limit the use of JavaScript, HTML and CSS, so any layout is entirely doable.

    Thread Starter Drding

    (@drding)

    Hi Andrew, thanks for the suggestions!

    What I ended up doing was using that plugin I mentioned above and then looping the pages with a category now added to them. I was able to then code the target in myself like this: 

    <div class="castmenu">
<ul>
	<?php if ($new_query->have_posts()) : while ($new_query->have_posts()) : $new_query->the_post(); ?>
<li><a href="<?php the_permalink(); ?>" target="biobox" class="static"><span class="castthumbnail"><?php the_post_thumbnail(); ?></span><span class="charactername"><?php the_title(); ?></span></a></li>
	<?php endwhile; else: ?>
		<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
	<?php endif; ?>
</ul>
</div> <!-- end castmenu div -->

    “biobox” in this case being an iframe. So the above code loops page titles and their permalinks, and then opens up said pages in the targeted iframe.

    And since it’s looping that category, any new pages added to it will be therefore added to the menu.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Tricky layout with targeted menu and iframe’ is closed to new replies.