Page layout question

  • I’m not looking to change the whole template, I just need to know the way to change the page content to something more attractive than I currently have.

    For a case studies section I need to show images and descriptive text. I managed it in tinymce but it’s very basic (text above, image below, and a horizontal line to separate this from the next item below) and I would like something that looks better. I can’t write the html code for it, and I was hoping I could find a plugin or something that would make it simple for me to do this.

    This is a good example of the kind of thing I need – https://briansmith.com/

    All the divs are clearly on separate subjects and the layout is good. I have dreamweaver and I suppose I could maybe figure out how to lay out the divs there, and copy the code into tinymce, but there must be a way to build the effect I want in wordpress isn’t there?

    I hope someone can advise.

Viewing 3 replies - 16 through 18 (of 18 total)

  • Is it done with plugins?

    There might be plugins that can do this but I’ve usually coded my own solution along the lines of:

    functions.php:

    // Generate page tree
function my_page_tree($this_page) {
	$pagelist = '';
	if( !$this_page->post_parent ) {
		$children = wp_list_pages('title_li=&child_of='.$this_page->ID.'&echo=0');
		if( $children ) {
			$pagelist .= '<li class="current_page_item"><a href="'.  get_page_link($this_page->ID) .'">' . $this_page->post_title . '</a>';
			$pagelist .= '<ul>' . $children . '</ul>';
			$pagelist .= '</li>';
		}
	}
	elseif( $this_page->ancestors ) {
		// get the top ID of this page. Page ids DESC so top level ID is the last one
		$ancestor = end( get_post_ancestors($this_page) );
		$pagelist .= wp_list_pages('title_li=&include='.$ancestor.'&echo=0');
		$pagelist = str_replace('</li>', '', $pagelist);
		$pagelist .= '<ul>' . wp_list_pages('title_li=&child_of='.$ancestor.'&echo=0') .'</ul></li>';
	}
	return $pagelist;
}

if( function_exists( 'my_page_tree') && my_page_tree($post) != '' && ( !isset($my_theme_options['display_subpages']) || $my_theme_options['display_subpages'] == 'yes' ) ) :?>
<div class="sub-pages"><h3><?php _e('Pages in this section', 'my');?></h3><ul>
<?php echo my_page_tree($post);?></ul></div>
<?php endif;?>

    page template file:

    // Generate page tree
function my_page_tree($this_page) {
	$pagelist = '';
	if( !$this_page->post_parent ) {
		$children = wp_list_pages('title_li=&child_of='.$this_page->ID.'&echo=0');
		if( $children ) {
			$pagelist .= '<li class="current_page_item"><a href="'.  get_page_link($this_page->ID) .'">' . $this_page->post_title . '</a>';
			$pagelist .= '<ul>' . $children . '</ul>';
			$pagelist .= '</li>';
		}
	}
	elseif( $this_page->ancestors ) {
		// get the top ID of this page. Page ids DESC so top level ID is the last one
		$ancestor = end( get_post_ancestors($this_page) );
		$pagelist .= wp_list_pages('title_li=&include='.$ancestor.'&echo=0');
		$pagelist = str_replace('</li>', '', $pagelist);
		$pagelist .= '<ul>' . wp_list_pages('title_li=&child_of='.$ancestor.'&echo=0') .'</ul></li>';
	}
	return $pagelist;
}

if( function_exists( 'my_page_tree') && my_page_tree($post) != '' ) :?>
<div class="sub-pages"><h3><?php _e('Pages in this section', 'my');?></h3><ul>
<?php echo my_page_tree($post);?></ul></div>
<?php endif;?>

    Thread Starter np07

    (@np07)

    Thanks. I am going to find out how to insert this with a bit of googling, and then I’ll see how it looks. Thanks for your effort.

    Thread Starter np07

    (@np07)

    Well i figured it out. I wish someone had mentioned shortcodes to me. I suppose nobody realised now new to wp I was ??

Viewing 3 replies - 16 through 18 (of 18 total)
  • The topic ‘Page layout question’ is closed to new replies.