Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design en consultancy

blog

  1. Home
  2. blog
  3. lees
  4. Creating Your WordPress Knowledge Base’s Front End
  • like 2 23

    Creating Your WordPress Knowledge Base’s Front End

    1. January 2015
    2. Daily
    3. gelezen 778

    In the previous part of this series, I showed you how to register custom taxonomies for your knowledge base and deregister the ones you don't need.

    The next step is to create the front end, by creating and/or editing any template files we need and adding functions for custom navigation.

    What You'll Need

    To follow this tutorial, you'll need

    • a development installation of WordPress
    • a text editor
    • a starting theme

    1. Creating Template Files

    If you'll remember, in the first part of this series when we planned the knowledge base, we identified the following templates:

    • index.php
    • page.php
    • archive.php
    • single.php
    • sidebar.php

    The starter theme I'm using already includes all of these, which is great news. I will need to edit sidebar.php, to enable the context-sensitive navigation which was part of the original plan. I'll come to this shortly.

    If you're using your own theme and it doesn't include all of those template files, you'll need to create them. Alternatively, if your index.php or loop.php file (if you have one) includes the code necessary for effectively displaying single posts and taxonomy archives, you might want to stick with that.

    I'm not going to work through each of the template files, but let's have a quick look at archive.php to see how it works in my theme:

    <?php 
/* the archive file - for displaying archives
*/
 get_header(); ?>

    	<div id="content" class="two-thirds">
	
			<?php
			/* Queue the first post, that way we know if this is a date archive so we can display the correct title.
			 * We reset this later so we can run the loop properly with a call to rewind_posts().
			 */
			if ( have_posts() )
				the_post();
			?>

					<h2 class="page-title">
						<?php if ( is_day() ) { ?>
							Archive for <?php echo get_the_date();
						}
						elseif ( is_month() ) { ?>
							Archive for <?php echo get_the_date('F Y');
						}
						elseif ( is_year() ) { ?>
							Archive for <?php echo get_the_date('Y');
						}
						else {
							echo get_queried_object()->name; 
						} ?>
					</h2>

			<?php rewind_posts(); ?>	
			
				
			<?php // start the loop proper ?> 
			<?php while ( have_posts() ) : the_post(); ?>

			<article id="post-<?php the_ID(); ?>" <?php post_class( 'clear' ); ?>>
			
				<section class="left image quarter">
					
					<?php if ( has_post_thumbnail() ) { ?>
						<a href="<?php the_permalink(); ?>">
							<?php the_post_thumbnail( 'medium', array(
								'class' => 'left',
								'alt'	=> trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))
							) ); ?>
						</a>
					<?php } ?>

				</section><!-- .image -->
			
				<section class="left archive-content three-quarters">
			
					<h3 class="entry-title">
						<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'compass' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
							<?php the_title(); ?>
						</a>
					</h3>

					<section class="entry-content">
						<?php the_excerpt(); ?>
					</section><!-- .entry-content -->
				
				</section><!-- .archive-content -->
		
				
			</article><!-- #post-theID-->
			
			<?php endwhile; ?>
			<?php // ends the loop ?> 

			
		</div><!-- #content-->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

    As you can see, the template uses object-oriented CSS to set the widths of elements and allows for the display of featured images if the post has one. In a knowledge base, you're less likely to use featured images but it's not impossible so I'll leave those in. If posts don't have featured images, the title and excerpt will still be displayed.

    2. Creating the Sidebar Navigation

    The next step is to create the context-sensitive navigation in the sidebar. I'm not going to add this to the sidebar.php file; instead, I'll add an action hook to that file and then create a function which I'll attach to that action hook.

    Creating the Action Hook

    Open your theme's sidebar.php file. Mine looks like this:

    <!-- the sidebar - in WordPress this will be populated with widgets -->
<?php if ( is_active_sidebar( 'sidebar-widget-area' ) ) { ?>
    <aside class="sidebar widget-area one-third right" role="complementary">
		<?php dynamic_sidebar( 'sidebar-widget-area' ); ?>
	</aside>
<?php } ?>

    At the moment this just includes the widget area. I want to keep this but add a hook above it.

    Above the if ( is_active_sidebar() ) line, add the following:

    do_action( 'tutsplus_sidebar' );

    This creates an action hook using the <a href="http://codex.wordpress.org/Function_Reference/do_action" target="_self">do_action()</a> function. Any functions you attach to that hook will be fired at that point in your template file, so anything displayed via the hook will show up before the widget area. If you'd rather have the hook below the widget area, just add the code after the widget area instead.

    Creating Functions

    When I was planning my knowledge base, I identified three lists I'd need in different sidebars:

    1. links to the archive pages for the user topic taxonomy terms
    2. links to the archive pages for the developer topic taxonomy terms
    3. links to the archives for the content type taxonomy terms

    Each of these needs to include conditional tags so they're added to the sidebar on the right pages. They can all be included in one function but with a number of conditional tags.

    So let's write them!

    Note that as some of the conditional tags will be detecting static pages, you'll need to create three static pages before you start: for users, developers and content types.

    The User Topics List

    First up is a list of user topics. This includes a link to the main archive page for the taxonomy at the top.The first step is to create the function, and inside it add a conditional tag to check which part of the site we're in.

    Open your functions.php file and add the following:

    function tutsplus_sidebar_content() {

    // user topics list
	if ( is_tax( 'usertopic' )  || is_front_page() || is_page( 31 ) || is_single()) { ?>

	<?php }
			
}
add_action( 'tutsplus_sidebar', 'tutsplus_sidebar_content' );

    This creates an empty function with our first conditional tag, and attaches it to the tutsplus_sidebar hook we added to the sidebar.php file.

    Now add the content inside your conditional function so it reads as follows:

    if ( is_tax( 'usertopic' )  || is_front_page() || is_page( 31 ) || is_single()) { ?>

    <aside class="user-topics one-third right">
				
		<h3>Users</h3>
			
		<ul>

			<?php
			// output list of terms in the usertopic taxonomy with links to their archive pages
			$args = array(
     					'orderby'  => 'slug',
						'order'  => 'ASC',
     		);
     		$terms = get_terms( 'usertopic', $args );
    	    foreach ( $terms as $term ) {
       			
       			echo '<li><a href="'.get_term_link( $term->slug, 'usertopic' ).'">'.$term->name.'</a></li>';
	    			
	    	} ?>

		</ul>
		
		</aside>
	
<?php }

    This outputs a list of terms in the User Topics taxonomy, with links to their archive pages, under a heading, using the following WordPress functions:

    • <a href="http://codex.wordpress.org/Function_Reference/get_terms" target="_self">get_terms()</a> to retrieve a list of taxonomy terms
    • <a href="http://codex.wordpress.org/Function_Reference/get_term_link" target="_self">get_term_link()</a> to output a link to the term's archive page

    Note that the is_page(  31 ) check will need to have a different page ID depending on the ID of the Users page you've created.

    The Developer Topics List

    Now below the conditional tag for the user topics list, and still inside the tutsplus_sidebar_content() function, add the code for the developer topics, which is very similar:

    // developer topics list
if ( is_tax( 'developertopic' )  || is_front_page() || is_page( 33 ) || is_single()) { ?>

    <aside class="developer-topics one-third right">

	<h3>Developers</h3>
	
		<ul>
						
			<?php
			// output list of terms in the usertopic taxonomy with links to their archive pages
			$args = array(
     					'orderby'  => 'slug',
						'order'  => 'ASC',
     		);
     		$terms = get_terms( 'developertopic', $args );
    	    foreach ( $terms as $term ) {
       			
       			echo '<li><a href="'.get_term_link( $term->slug, 'developertopic' ).'">'.$term->name.'</a></li>';
	    			
	    	} ?>

		</ul>
	
</aside>
	
<?php }

    The Content Types List

    Finally, add the code for the content types, still inside the tutsplus_sidebar_content() function:

    // content types list
if ( is_tax( 'contenttype' )  || is_front_page() || is_page( 37 ) || is_single()) { ?>
    
	<aside class="content-types one-third right">

	
		<h3>Content Types</h3>
		
		<ul>
			<?php
			// output list of terms in the usertopic taxonomy with links to their archive pages
			$args = array(
     					'orderby'  => 'slug',
						'order'  => 'ASC',
     		);
     		$terms = get_terms( 'contenttype', $args );
    	    foreach ( $terms as $term ) {
       			
       			echo '<li><a href="'.get_term_link( $term->slug, 'contenttype' ).'">'.$term->name.'</a></li>';
	    			
	    	} ?>

		</ul>
		
	</aside>
	
<?php }

    Your entire function will now look like this:

    function tutsplus_sidebar_content() {

    // user topics list
	if ( is_tax( 'usertopic' )  || is_front_page() || is_page( 31 ) || is_single()) { ?>
	
		<aside class="user-topics one-third right">
					
			<h3>Users</h3>
				
			<ul>

				<?php
				// output list of terms in the usertopic taxonomy with links to their archive pages
				$args = array(
	     					'orderby'  => 'slug',
							'order'  => 'ASC',
	     		);
	     		$terms = get_terms( 'usertopic', $args );
	    	    foreach ( $terms as $term ) {
	       			
	       			echo '<li><a href="'.get_term_link( $term->slug, 'usertopic' ).'">'.$term->name.'</a></li>';
		    			
		    	} ?>
	
			</ul>
			
			</aside>
		
	<?php }
	
	// developer topics list
	if ( is_tax( 'developertopic' )  || is_front_page() || is_page( 33 ) || is_single()) { ?>
	
		<aside class="developer-topics one-third right">
	
		<h3>Developers</h3>
		
			<ul>
							
				<?php
				// output list of terms in the usertopic taxonomy with links to their archive pages
				$args = array(
	     					'orderby'  => 'slug',
							'order'  => 'ASC',
	     		);
	     		$terms = get_terms( 'developertopic', $args );
	    	    foreach ( $terms as $term ) {
	       			
	       			echo '<li><a href="'.get_term_link( $term->slug, 'developertopic' ).'">'.$term->name.'</a></li>';
		    			
		    	} ?>
	
			</ul>
		
	</aside>
		
	<?php }
	
	// content types list
	if ( is_tax( 'contenttype' )  || is_front_page() || is_page( 37 ) || is_single()) { ?>
		
		<aside class="content-types one-third right">
	
		
			<h3>Content Types</h3>
			
			<ul>
				<?php
				// output list of terms in the usertopic taxonomy with links to their archive pages
				$args = array(
	     					'orderby'  => 'slug',
							'order'  => 'ASC',
	     		);
	     		$terms = get_terms( 'contenttype', $args );
	    	    foreach ( $terms as $term ) {
	       			
	       			echo '<li><a href="'.get_term_link( $term->slug, 'contenttype' ).'">'.$term->name.'</a></li>';
		    			
		    	} ?>
	
			</ul>
			
		</aside>
		
	<?php }
		
}
add_action( 'tutsplus_sidebar', 'tutsplus_sidebar_content' );

    You'll now find that as you create posts and assign taxonomy terms to them, the terms will show up in the relevant sidebar.

    Note that any terms without posts assigned to them won't be output, so don't be surprised if your lists are empty at first.

    After you've done this and added some posts, your sidebars will display a list of taxonomy terms depending on where you are in the site. On the Users page (and user taxonomy term archives), you'll see the user topics list:

    User topics list

    When in a term archive in the developer topics taxonomy, you'll see a list of all of the terms in that taxonomy with posts associated with them:

    Term archive

    And on the home page and single pages you'll see a list of all of the terms:

    List of terms

    Summary

    Your knowledge base now has a front-end structure with the templates and functions in place to support it.

    If you wanted to, you could take some of these techniques further to add additional navigation to your site. For example, you could:

    • add a list of the latest posts to the sidebar on single post pages
    • add a list of the terms which the current post has to the sidebar on single post pages
    • create a page template for your users, developers and content types pages to display the latest posts in each of the terms for each taxonomy

    You may be able to think of more that are relevant to your own knowledge base, but these should give you a taste of the possibilities.

    In the final part of this series, I'll take you through the steps needed to make your knowledge base live and the considerations you'll need to take into account.

    Photo

    martijn broeders

    founder/ strategic creative bij shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    telefoon: 434 210 0245
    2
    Plaats reactie...
    4elements
    Comments

Per - categorie

Op - datum

Copyright © 1999 - 2026 Shineyrock web design en consultancy, Alle rechten voorbehouden / Algemene voorwaarden / Sitemap: XML, HTML, Images, Mobile, News