05 - Editing Content, Implementing a Miscellaneous Content Weblog, and Embedded Variables

In this chapter we’ll do a few odds and ends - we’ll edit our content to get rid of the “Greeking” and we’ll implement a Miscellaneous Content Weblog to store the text found in the green area under the main navigation (and in the process, use one of the most powerful ExpressionEngine features available).

 
Download the EE Code for 05 - Editing Content, Implementing a Miscellaneous Content Weblog, and Embedded Variables

Editing Content
No, this isn’t a step necessary to getting this site up and running on EE.  At this point in the process, however, I’m ready to see some visual changes to the rendered page to show that it’s actually not the static HTML/CSS we started with.  So let’s do some quick content editing.  In the EE Control Panel:

  • Click the Edit tab.
  • Either scan the list for your entries, or use the filtering and sorting controls that EE provides to find your entries.
  • Click the entry Title to edit.
  • Change content to suit.
  • Click Quick Save to save your changes but remain in Edit mode.
  • Click Update to save your changes and get a preview of them.
  • I’m going to change out the template graphic for one of the EE linking buttons, write a description of the project at hand, include some of the comments that people have so graciously left, and change the “Our Assets” section to “Helpful Links” with links to other EE sites.
  • Once your changes are saved, refresh the site in your browser.

There - now we have a Home page with some “real” content.  A small step, but it feels good.

Except - now that I’m actually trying to read the page, I’m seeing how small that text really is.  I edited the CSS to bump up the size of the text in the main content area from 8px to 10px.  I had to then size down the site title text, slogan text, the text in the green header area, and the footer - and I note this CSS has fonts specified in pixels, percentages and ems. 

Miscellaneous Content Weblog
So this template has these sorta-cool, but sorta-odd paragraphs of text next to the search box.  It’s hard to know the designer’s intent here; was that text supposed to stay the same throughout the site, be specific to each section, or be completely randomized and independent?

I know I don’t want just one blurb there over the whole site, so that’s out.  Randomized client testimonials would be cool - but the way this text is positioned over the green that includes the main navigation it just feels like there should also be a semantic relationship between them. 
So we’ll need six little blurbs of text, and a way to relate them to the selected main navigation.  And these blurbs of text should be editable like any other content on the page.  To be editable they’ll need to be in weblog entries - but stuffing them into our existing Home Weblog doesn’t make sense either as these will appear in other sections of the site.

One perfectly valid option for implementing these would be creating a dedicated weblog for them.  However, if you look past these blurbs you’ll see other little “chunks” of content that should be editable—the site footer text, the “no results found” message that comes up on empty searches, the confirmation message that appears after submitting the Contact Us form, etc.

What I’ve gotten in the habit of doing on each EE site I work on is implementing a Miscellaneous Content Weblog whose sole purpose is to hold all these little chunks of content that I want clients to be able to edit.  This has proven to be a handy little tool for making the entire site client-maintainable.

So for these chunks of text we need to:

  • Create a new weblog.
  • Assign the existing Simple Content Field Group.
  • Publish an entry into the new weblog.
  • Modify EE templates to pull in the new content.

The Easy Stuff
We covered the specific steps for creating a new weblog in Chapter 4, so I’m not going to repeat them here.  Essentially I’m going to:

  • Create a new weblog with the Full Weblog Name of “Miscellaneous Content” and the Short Name of “misc_content.”
  • Under the Edit Groups option for the new weblog, assign the Simple Content Field Group.
  • Publish a new entry to the new weblog, with a Title of “Home Page” and a URL Title of “home-page”. Note - the URL Title will be critical in the following steps.

Modifying the Embedded Template
Now for the fun stuff. I’m going to introduce you to one of the most powerful features of ExpressionEngine - Embedded Variables with embedded templates.  You should review the EE documentation around them.

Here’s why I want to use them:  In Chapter 2 we “chunked up” the static HTML template and now we have an embedded template that holds both the search box and these section-overview paragraphs of text to the left of the search box.

But wait—now we want the promotional text to change depending on what section of the site we’re in.  In other words, we have a common, shared template that needs to adapt itself to the section of the site it’s being pulled into.  You might be tempted to un-embed it, and stick it back in the main templates so that it can be section-specific. That would work, but wouldn’t be nearly as fun.

As we implement the other sections of the site and publish new entries in the Miscellaneous Content Weblog to go with them, all the embedded templates will need to know in order to be adaptable is which entry to pull for which section.  We can tell the embedded template which entry to pull by passing a value to it from the main template, then using that passed-in value in the {exp:weblog:entries} tag in the embedded template.

I’m going to use the url_title as my Embedded Variable - you could also use entry_id. url_title is more readable from a coding perspective, and easier to restore if inadvertently deleted.

This concept may be a bit confusing; but, I think looking at the code will actually make it clearer.  We need to modify two templates - the site/index template, and the embeds/search_section_intros template.

Modifying the Site/Index Template
Not a huge change here. In the code where we are embedding the search_section_intros template, we need to add the variable name and value that we want to pass to the embedded template.  The code is currently:

{embed="embeds/search_section_intros"

and it needs to change to:

{embed="embeds/search_section_intros" the_url_title="home-page"

So my variable name is the_url_title, and the value is home-page.  I got this value by grabbing the URL Title that EE assigned my new Home page entry in the new Miscellaneous Content Weblog.

URL Title Note
The separator used in URL titles could be either a dash or an underscore, depending on how you’ve defined it under Admin > Weblog Administration > Global Weblog Preferences > Word Separator for URL titles.

So here then is what the updated site/index template looks like:

{embed="embeds/html_header"}
<body>
    <
div id="content">
        
{embed="embeds/logo_title"}
        {embed
="embeds/main_nav"}
        {embed
="embeds/search_section_intros" the_url_title="home-page"}

        
<div id="maincontent">

            <
div id="right_side">
                
{embed="embeds/latest_news"}
                {embed
="embeds/latest_products"}
            
</div><!-- close right_side -->
            <
div id="left_side">
                
{exp:weblog:entries weblog="home" disable="categories|member_data|pagination|trackbacks" sort="asc" }
                    
<h2 class="underline">{title}</h2>
                    
{page_body}
                {
/exp:weblog:entries}
            
</div><!-- close left side div -->
        </
div><!-- close main content div -->
        
{embed="embeds/footer"}
    
</div>    <!-- close content div -->
   </
body>
</
html

Modifying the Embedded Template
We’ve got the site/index template “sending” the URL Title of the entry we want the embedded template to pull.  Now we need to code the embedded template to use that variable in a exp:weblog:entries tag to pull the right content.  I think this will be easier if you take a look at the code and we can work through what’s going on:

<div id="subheader">
    <
div class="rside">
        <
div class="padding">
            <
div id="search">
                <
form action="#" method="get">
                    <
p><input type="text" name="search" size="20" maxlength="250" class="text" value="" /> 
                    <
input type="submit" value="" class="btn1" /></p>
                </
form>
            </
div>
        </
div>
    </
div>
    <
div class="lside">
        <
div class="padding">    
            
{exp:weblog:entries weblog="misc_content" limit="1" dynamic="off" disable="categories|trackbacks|member_data|pagination" url_title="{embed:the_url_title}" }
                {page_body}
            {
/exp:weblog:entries}
        
</div>
    </
div>
</
div

Looking at the embedded template:

  • You’ll note that the search box is left unchanged - we’ll deal with that in the future.  For now, just look at the div class=“lside”.
  • We use another exp:weblog:entries tag, this one pulling content from the new Miscellaneous Content Weblog.
  • We use the limit=“1” parameter to ensure that we’re only grabbing one entry.  We don’t want multiples in this case.
  • The next parameter, dynamic=“off,” is important (and the biggest source of posts in the EE forums).  Please reference the EE documentation around this parameter. Since we’re not wanting the page URL to affect which content we pull from the new Miscellaneous Content Weblog, we need to turn it off.
  • The disable parameters are again for performance reasons.  It’s just a good habit to get into specifying them with every weblog entries tag you write.
  • Here’s the meat of this step - where we use the url_title parameter to specify what entry we want to pull, but instead of hardcoding a value we insert the variable embed:the_url_title between the quotes.  This way the exp:weblog:entries tag will use the URL Title that we specified in the site/index template - and with each new main template we just change out the value of that variable.  The code here in the embedded template will not have to change.

The Results
If you load these templates, save your changes and reload the Home page, you should get a version with new content and new section-specific intro paragraph.

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Jannis

by Jannis

Date: Friday, April 3rd, 2009
Comment: #1

Hey there. A very nice read so far, thanks for the effort of showing the complete process.

One question though: Is “the_url_title” a custom variable that you created? I’m having a hard time understanding why you sometimes write “url_title” only and somethings put a “the_” in front of it. The ExpressionEngine documentation doesn’t show any results for the longer variant.

Mike Boyink

by Mike Boyink (Author)

Date: Friday, April 3rd, 2009
Comment: #2

Hi Jannis -

Well - I’ve probably set you up for a bit of confusion.  “url_title” is a EE-provided field in every weblog.  url_title can also be used as a parameter on the weblog:entries tag - a way to tell the tag to only pull just the one entry that has this url title.

“the_url_title” is a variable that I’ve made up - and it’s just a way for the parent template to tell the embedded template which entry to pull from the search_section_intros weblog based on that entries url_title.

Does that help?

Picture of Jannis Borgers

by Jannis Borgers

Date: Friday, April 3rd, 2009
Comment: #3

Hi Mike,

what a fast response! Thank you very much!

Now I understand what this is about. But I still find it kind of complicated. Wouldn’t it be easier and more straight-forward to just use the actual url_title of the current “section” or weblog (Home, About, Products, Services, etc.) and trigger the returned content of the embedded template by that url_title?

That would save me the step of manually setting a “the_url_title” for each section’s template. Not much maybe, but I think it would make the whole automation process even more worthwhile.

Mike Boyink

by Mike Boyink (Author)

Date: Friday, April 3rd, 2009
Comment: #4

Well—keep in mind that in these tutorials I always have to strike a balance between the instructional value of a particular method vs. a “cooler” implementation approach.

You could, for example, exactly match the URL title of the entry in the “search_section_intros” weblog to the template name (which I think might be what you are suggesting).

Then rather than pass a value into the embedded template, the weblog:entries tag could just have parameter setting of:

url_title="{segment_2}" 

Entirely do-able, but a bit less flexible and might open an opportunity for it to not find a value and return nothing.

It’s also a bit less clear from the parent template what’s going on as the logic is concealed in the embedded tempate.  With the “the_url_title” I can see that I’m sending a value to the embedded template—handy if something isn’t working and I’m in reverse engineering role.

Regardless - if you understand the approach enough to choose a different one then my mission here is done..;)

Picture of Jannis Borgers

by Jannis Borgers

Date: Friday, April 3rd, 2009
Comment: #5

Yes, I see your point there. Using a semantic custom variable is a better solution. Thanks again.

Picture of Paul Meggs

by Paul Meggs

Date: Saturday, October 10th, 2009
Comment: #6

Hi there,

I’ve had to go through this tutorial again as I lost my last effort. Having a problem though, whoops!

The “the_url_title” thing. I get how this works, however, when I implement it exactly as you have, nowt shows up on the page where the content is meant to be. THe rest is fine, just the main content. The home-page specific “top"content also shows up at the top…

Any idea what I’m doing wrong?

Cheers…

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, October 10th, 2009
Comment: #7

Hey Paul -

Sorry - getting over a cold here and I’m not quite sure what is and isn’t showing for you.

‘the_url_title’ is the means by which we are telling EE what specific top content to display - and that’s working?

The main content is being returned by the weblog:entries tag pair in the left div.  It’s looking for content from the home weblog - is that content in the system?

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>