User Tools

Site Tools


tutorial_creating_site_with_wordpress_gallery_publisher

Creating Websites w/ WordPress, Gallery & Publisher

Flexibility is the keystone upon which The Turning Gate's plugins are built, and CE3 Theme for WordPress introduces a slew of new possibilities for creating your photographic website.

CE3 Theme for WordPress can be used to supplement a CE3 Pages-based website with a blog, or users may opt to forego using CE3 Pages altogether, instead using CE3 Theme for WordPress as the site's core.

In this tutorial, I will walk you through the process of creating a website with:

  • CE3 Theme for WordPress as base.
  • CE3 Auto Index creating a gallery structure.
  • CE3 Gallery used to create image galleries.
  • CE3 Publisher used to manage gallery content.

This tutorial will cover how to structure your website, not how to design its appearance.

Step 1: Install WordPress

The first step is to install WordPress into the root of your site, such that the WordPress Home page will also be the Home page of your website. This is basic stuff, so I'll not go into it here. You may wish to see our recommendations on WordPress installation, or just hit the standard WordPress installation documentation.

While we're here, save yourself some trouble:

  1. Create an empty .htaccess file in the root of your site. Change its permissions to make the file writeable.
  2. Make the /wp-content/ folder and its contents writeable as well.

For some stupid reason, the WordPress installation guide doesn't do a very good job addressing these points. But taking these steps early on will prevent our having to return here later because of errors thrown during WordPress configuration.

Step 2: Designing in Lightroom

With WordPress idly installed on our server, we turn our attention to Lightroom's Web module. Here you can spend as much or as little time as you like designing your site. We're going to be exporting CE3 Auto Index first, but you may wish to perfect your design in CE3 Theme for WordPress, as that will be the base of the site.

Either way, it's not important; you can use our technique for sharing templates between plugins to get your designs in sync.

So spend some time getting to a design that you're happy with. One way or another, end up with CE3 Auto Index loaded in Lightroom's Web module, then move on to step 3 when you're ready.

Step 3: Enabling PHPlugins in CE3 Auto Index

Now we have CE3 Auto Index loaded into Lightroom's Web module, and we have customized the look of the page to our liking. The next thing to do is enable PHPlugins. This is optional, but highly recommended as it will allow us to create better integration between our blog and galleries.

If you're new to this, don't worry. And don't be afraid of PHPlugins. They're relatively simple, we're going to hold your hand through the technical bits, and most of what we're going to be doing here is copy-and-paste. Now let's get to it.

In the Site Info control pane of CE3 Auto Index, locate the PHPlugins control group and enable the “Enable PHPlugins” check-box.

For now, it's okay to leave the server path blank.

On the lefthand side of the Web module, access the Template Browser. Click the '+' button to create a new template and give it a suitably informative name, like “My Website - AutoIndex”. We will be saving additional templates later, so you might like to create a “My Website” folder to keep them in.

Now EXPORT the page. You will be prompted for save location and asked to give it a name. For the sake of ease, save to your Desktop and name the export “galleries”.

On your desktop a new folder – /galleries/ – will be created.

Step 4: Upload the /galleries/ folder.

This step is easy. Upload the /galleries/ folder now on your desktop to your server. It should be uploaded to the same location as your WordPress files, like this:

Just so you know, this folder is super important! We're going to be coming back to the /galleries/ folder throughout this tutorial.

Now we have two things to do while we're here:

  1. Change permissions on the /galleries/ folder to make it writeable. Depending on your server, we'll want permissions to be either 777 or 755. This is so that we can publish to the folder using CE3 Publisher later on. If you're not sure whether to use 777 or 755, then just pick one; it can be changed later if there's a problem. If hosting on Bluehost, use 755.
  2. Rename the /galleries/phplugins-sample/ folder to /galleries/phplugins/. To be very clear, that's the “phplugins-sample” folder inside of /galleries/, being renamed to “phplugins”, pictured below.

Step 5: Revisiting PHPlugins Setup

Now that your /galleries/ folder is in place and your /phplugins/ folder renamed, we can fetch the server path for our PHPlugins. This is what ties everything together so that we can do amazing things later.

In your web-browser, ping the path.php file located in /galleries/phplugins/path.php. You accomplish this by targeting the address:

http://yourdomain.com/galleries/phplugins/path.php

This will return a server path to this location, something like:

/var/www/vhosts/theturninggate.net/subdomains/ce3/httpdocs/galleries/phplugins

Copy this path in its entirety from your web-browser, then paste it back into Lightroom under the PHPlugins settings:

After pasting this into Lightroom, revisit the Template Browser. Right-click the template you saved previously (do not left-click it first!) and “Update…” the template with the new information.

There is no need to replace the /galleries/ folder now online with an updated version, though you can if you want to. However, do make sure that this information is included in everything that you design henceforth. That includes exports from CE3 Theme for WordPress, CE3 Gallery, and any additional instances of CE3 Auto Index that you may create.

If you're copying template settings between engines, this information should travel to the destination templates now that we have it saved, assuming you use the newly saved auto index template as your source.

Step 6: Export and Install Your WordPress Theme

You may now complete your design using CE3 Theme for WordPress. Be sure to include the PHPlugins path above!

When ready, EXPORT your theme and save to your desktop. Name the folder whatever you'd like; it's not important. Just keep in mind that whatever you configure within the WordPress admin – menus, widgets, theme options, etc. – WordPress will associate with the folder name of your theme. If you later switch to an updated theme with a different folder name, then WordPress will treat it as a new theme; if you later upload an updated theme with the same folder name, then WordPress should carry over your existing settings. To wit, save the theme using a folder name that you're comfortable keeping for the long term.

Following export, use an FTP client to upload the theme to your server, then activate the theme via the WordPress admin per documentation.

Step 7: Infuse Your Menu with the Power of MAGIC

By now, you may be wondering why all this nonsense with PHPlugins?! It will shortly become clear.

First, let's dive into the WordPress admin, Appearance > Menus section:

Using the provided interface, create a new menu. For now, we'll add just two items; you can add more later as you develop your site structure. Using the Custom Links area –

– create items for:

URL:   http://yourdomain.com/
Label: Home
URL:   http://yourdomain.com/galleries/
Label: Galleries

The “Home” link brings us back to the front page of your WordPress blog/site, and the “Galleries” link takes us to our auto index.

Under the “Manage Locations” tab, assign your newly created menu to the “Site Navigation” item.

Press SAVE.

Now visit your site's front page, and you should see that your new menu has replaced the menu that was exported from Lightroom.

Click on the “Galleries” link to visit your auto index, however, and you will see that your menus are now out-of-sync. Let's do something about this … something … magical.

We are going to utilize PHPlugins to pull the WordPress menu into all of our non-WordPress pages, including the Galleries page, all of our future image galleries, etc. This will allow you to use the WordPress admin to manage the navigation menu for your entire site, and it will serve to tie your site's various pages – those managed by WordPress and those which are not managed by WordPress – together in a very fundamental way.

Using your FTP client and a plain text-editor, open the /galleries/phplugins/phplugins.php file for editing.

Scroll down past the line which reads ”// SET USER FUNCTIONS BELOW”. Below that you will find a number of sample functions which are presently inactive. Ignore them.

In this same general area, though, copy-and-paste the following:

// GET FUNCTIONS FROM WORDPRESS
define('__ROOT__', '/path/to/wordpress'); // SET PATH TO WORDPRESS
require_once(__ROOT__.'/wp-includes/version.php'); global $wp_version;
require_once(__ROOT__.'/wp-load.php');

// SITE-WIDE NAVIGATION FROM WORDPRESS
function ttg_header_navigation( $style, $path ) {
	if (G_STYLE != 'CE3-WORDPRESS') {
		echo '
	<div id="navigation" class="tab-content clearfix">
	<div class="mantle clearfix">
		<div class="core clearfix">'; 
wp_nav_menu( array( 'theme_location' => 'site-navigation', 'container' => '', 'container_id' => '', 'container_class' => '', 'menu_id' => '', 'menu_class' => 'sf-menu clearfix', 'fallback_cb' => '', 'walker' => new My_Walker_Nav_Menu() ));
		echo '	
		</div>
	</div>
	</div> <!-- #navigation / wp_nav_menu -->'; 

		return false; // Replaces normal menu for non-WordPress pages
	}
	return true; // WordPress returns normal menu
} // END

There's just one thing you need to do beyond simply pasting this in. This is line 2:

define('__ROOT__', '/path/to/wordpress'); // SET PATH TO WORDPRESS

We need to change the /path/to/wordpress so that it is correct for your site.

Get that same path we used for PHPlugins. For me, that was:

/var/www/vhosts/theturninggate.net/subdomains/wp/httpdocs/galleries/phplugins

For you it will be something different, obviously. We need to edit the tail-end of the path so that it points to our WordPress installation, not the phplugins folder. So I trim it back to:

/var/www/vhosts/theturninggate.net/subdomains/wp/httpdocs

I then update line 2 of our PHPlugins function:

define('__ROOT__', '/var/www/vhosts/theturninggate.net/subdomains/wp/httpdocs'); // SET PATH TO WORDPRESS

Save the file.

Now turn your attention back to your “Galleries” page in the web-browser. Refresh the page, and the navigation menu should now be the menu that you setup with the WordPress admin.

From now on, any galleries or gallery indexes that you upload to your site should automatically pull the navigation menu from WordPress. And when you update the menu from within WordPress, those changes will automatically be reflected throughout your site.

IT'S MAGIC!!

Step 8: Setup CE3 Publisher

At this point, it's pretty much business-as-usual. If you're already familiar with using TTG plugins, then you can probably fly on auto-pilot. For the rest of you, I will brush over the final steps in the process.

Per standard procedure – see Publisher documentation for details – we copy the /publisher/ folder to the same location as our existing WordPress site:

As usual, set the API key, setup the plugin within Lightroom, authenticate, etc. That's all covered in the documentation, so I'll not repeat it here.

Return to Lightroom's Web module.

We already have our main “Galleries” page. That's the auto index we exported previously as the “galleries” folder. We need now to create an auto index template for publisher to use when creating album sets.

This can be exactly the same as your previously exported page, or you can make any necessary adjustments. The most important thing is to ensure that the PHPlugins setup is filled in with the server address from Step 5 above.

EXPORT the auto index, save to desktop using any folder name you like. Upload this newly exported folder to the /publisher/templates_autoindex/ folder:

Return to Lightroom's Web module.

Load CE3 Gallery, dupe your auto index configuration, then finish your design for a gallery template. EXPORT. Again, name is whatever you like.

Upload the newly exported gallery folder to /publisher/templates/ as pictured below:

Step 10: Grow Your Site

At this point, you're ready to run free. You've setup your entire publishing platform. Here are some ideas how to proceed …

  • In Lightroom, build albums and start publishing galleries via Publish Services.
  • In WordPress, create pages and add them to your site navigation menu.
  • In WordPress, start blogging.
  • In WordPress, install the Contact Form 7 plugin and create a Contact page; add it to your site navigation menu.

Most of all, have fun. Your website will be what you make of it, and you should definitely enjoy carving out your own space on the Worldwide Web.

tutorial_creating_site_with_wordpress_gallery_publisher.txt · Last modified: 2014/07/05 03:52 by admin