Getting Started

The WP Component Library is a bare-bones plugin that you can use and customize to improve collaboration during your development process, or build a reference library of components for quick implementation on your web projects. Before you get started, let’s review a few things.

Requirements

This plugin requires Advanced Custom Fields Pro. The plugin uses the Flexible Content field to allow you, the user / developer, to choose which element to display on the post, along with the corresponding meta that is required to completely and accurately document the element.

Add the WP Component Library functions to your theme

In order to get single posts to display the component content, you will need to add a template part, or other markup to your theme that includes calls to the WP Component Library functions that display the component, usage and implementation, and code.

There are two main functions required for the complete display of a component:

  1. wp_component_library()->component->display_component();
    This function is responsible for the actual display of the component. It’s a good idea to display this near the top of the component post.
  2. wp_component_library()->component->display_component_meta();
    This function is responsible for displaying usage, implementation, and code relating to the component.

Here is an example of a template part that is optimized to work with Alcatraz:

<?php
/**
 * Default template for single WP Component Library posts.
 *
 * @package WP Component Library
 */
?>

<?php do_action( 'alcatraz_before_entry' ); ?>

<article id="post-<?php the_ID(); ?>" <?php post_class( 'component-content' ); ?>>

	<?php alcatraz_the_entry_header(); ?>

	<div class="component-example">
		<?php if ( class_exists( 'wp_component_library' ) ) :
			wp_component_library()->component->display_component();
		endif; ?>
	</div>

	<div class="entry-content">

		<?php the_content(); ?>
		
		<?php
			wp_link_pages( array(
				'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'wp-component-library' ),
				'after'  => '</div>',
			) );
		?>
	</div>

	<div class="component-code">
		<?php if ( class_exists( 'wp_component_library' ) ) :
			wp_component_library()->component->display_component_meta();
		endif; ?>
	</div><!-- .component-code -->
</article>

<?php do_action( 'alcatraz_after_entry' ); ?>

If you are using Alcatraz, or any other theme, like _s that utilizes template parts, then you can drop this code into your theme’s template-parts folder. If you are using something other than Alcatraz, please be sure to update the Alcatraz-specific functions, otherwise you may get fatal errors (the dreaded white screen). You may also need to update how get_template_part() is called from your theme’s single.php file.