04 - Implementing a Weblog and Custom Field Group to Hold Home Page Content

In this chapter we start developing our data structure by implementing the Home Page Weblog with a Simple Content custom Field Group.  Then we’ll pull the content that we want editable out of the template, post it into the weblog, then add the necessary EE tags back to the Home page to get ExpressionEngine to pull the content from the new weblog.

 
Download the EE Code for 04 - Implementing a Weblog and Custom Field Group to Hold Home Page Content

Creating the Homepage Weblog

  • In the EE Control Panel, click the Admin tab, then Weblog Administration (in the left column), then Weblog Management.
  • Click the Create a New Weblog button in the upper right corner of your screen.
  • Fill in the Full Weblog Name and Short Name fields.  I’ve called mine “Home” and “home,” respectively.  The Full Weblog Name is what will show in the Control Panel under Publish and Edit, and the Short Name is what you will use as a parameter when setting up EE tags.  I usually keep the Full Name and Short Name as close as possible as it makes it easier to remember when coding.
  • For now, just accept the default settings on the rest of the options here, and click Submit.

Creating a Simple Content Custom Field Group
Now that we have a weblog, we need to create and assign a new Field Group to it.  As we determined in Chapter 3, the Home, About and Services section will all share a “Simple Content” Field Group that has only the default (and required) title field, a URL title field, and a catchall “page body” field.  Here are the steps to create the new Field Group:

  • In the EE Control Panel, click Admin tab, then Weblog Administration, then Custom Weblog Fields.
  • Click the Create a NewWeblog Field Group button in the upper right corner of your screen.
  • Name the Field Group.  I’ve called mine Simple Content.  The name isn’t a huge deal - the only place you’ll use it is when assigning it to the weblog. Click Submit.
  • EE will now flag you that you need to assign the Field Group to a weblog in order to use it.  For me, this always seems a bit out of sequence as I first want to create fields within the group, then - once it’s fully created - assign it to the target weblog.  So that’s how I’m going to proceed.

Adding a Field to the New Field Group
New Field Groups will have only the Title and URL Title fields by default.  Anything else must be added.

You can reference the EE documentation for Custom Fields in addition to my steps below.

We need just one additional field, so here’s how to add it:

  • In the list of Field Groups showing below the warning, find the new group you just created - again Simple Content in this tutorial - and click the (0) Add/Edit Custom Fields.
  • On the next screen (where EE should be telling you that there are currently no fields in this group) click the Create a New Custom Field button in the upper right corner of your screen.  Remember that EE will provide the Title and URL Title fields by default, so we only need to create one more field.
  • Enter the Field Name for the new field.  I’m going to call mine “page_body”.  Keep in mind that the value you enter here is what you’ll use while coding your templates.
  • Enter the Field Label.  This is what will show on the Publish or Edit screens for this weblog, so it should be more user-friendly.  I’m going to specify “Page Body” as my label.
  • Specify Field Instructions if you feel they are necessary.  These will also show on the Control Panel Publish or Edit screens, so this is a good place for text that will help end-users know what to do, where this content gets used, size guidelines for images, etc.
  • Choose the Field Type.  For this example we’ll want a textarea, as the content is likely to be longer than a text field will allow.  A textarea will also show more content at a time in the Control Panel.
  • Choose the number of rows.  This setting only changes how big the textarea is on the Control Panel Publish and Edit screens - it doesn’t change how much content the field will hold.  I’m going to specify 20 rows.
  • The next setting is important: Default Text Formatting for This Field.  The three choices are XHTML, Auto, and None, and these will control how EE applies formatting to the content entered in this field.  I find that I most often use XHTML or None.  For our current field, let’s stick with XHTML as then EE will mark up the content entered with p tags, which is appropriate for our intended use.
  • Let’s leave the formatting field set to Display Formatting Menu and keep Text Direction at the default of Left to Right.
  • Since this field will likely hold an entire page’s worth of content, let’s take a step to prevent users from publishing blank pages by choosing Yes to Is This a Required Field?
  • The next option, Is Field Searchable?, is one that I tend to forget and have to come back to.  By default this is set to No; and, as a result, when implementing the search engine I won’t get the results I expect.  Let’s set this to Yes now so that doesn’t happen.
  • The next setting, Show This Field by Default?, should also be set to Yes - so that end users won’t have to expand it to enter or maintain the content while Publishing or Editing
  • Field Display Order - this is valuable for Field Groups that have more than one field.  In this current case we can just leave this alone.
  • Click Submit to save your new custom field.

Assigning the New Custom Field Group to the New Weblog
Now that the Field Group is complete we have both a new weblog and a new Field Group.

They are not yet “connected” in EE, though; to do that we need to assign the new group to the new weblog.  Here’s how:

  • In the EE Control Panel, click the Admin tab, then Weblog Administration, then Weblog Management.
  • On the next screen, find the name of your new weblog—“Home” in my case.  Click the Edit Groups link associated with it.
  • There are three different groups that can be assigned to a weblog: category, status, and field.  This Home Weblog will not use categories, so leave Category Group set to None.  If Status Group shows None, click the drop-down and choose Default Status Group (this tutorial won’t cover Status Groups specifically, but I have had odd results when no Status Groups were assigned).  In the Field Group drop-down, choose the name of the new Field Group you created.  For me this is Simple Content.
  • Click Update to save your changes.

You can verify that the new weblog and new Field Group are connected properly by clicking Publish, then choosing your new weblog from the list.  The entry screen should load with a field structure of Title, URL Title, and Page Body.  If not, run back through the steps above for assigning the Field Group to the weblog.

Pulling Content from the Template
With the weblog and Field Group setup and assigned, we are ready to move the main content from its static form on the site/index template into weblog posts.  Here’s how I’d go about it:

  • Click the Templates tab and find your site/index template.  Click its name to open it for editing.
  • In our example template, the main page content starts under div id=“left_side”.  The h2 tags will contain the title of our weblog post, so for the moment leave that there.  We want to select and cut all the code starting with the img tag, down through the unordered list just above where the left_side div closes.

OK, hang on here.  While I had originally planned that all this content would get put in one weblog post, looking at the code and the way the h2 tag is used again for the “Our Assets” paragraph, I’ve decided that I’ll code the Home page to allow multiple posts, and each post will be a section on the Home page with an h2 title.

This would allow a client to have a variable number of sections on the Home page, each promoting a different aspect of the business.  And it will prevent clients from having to markup section headings with h2 tags as the template will do this for them.

With that mid-stream decision made, let’s get back to the moving of the content.

  • As stated above, starting just below the first h2 tag (include the img tag), select down to just above the closing left_side div tag and cut out your selection.
  • Save changes to the template by clicking Update.
  • Tip - in this spot I’ll usually fire up a blank Notepad document (working on a PC) and paste the text in from the clipboard.  This will prevent losing it accidentally when cutting/copying/pasting something else to the clipboard.
  • If you refresh the site/index template in your browser, you should have the About Us header with an empty content area.

Putting Content into Weblog Posts
Let’s get our content into a couple of posts in our new Home Weblog:

  • Choose Publish, then Home.
  • Enter a title of something besides “About Us”—in a fit of sheer creativity, I’m going to title my post “Welcome”.
  • Paste in the content that you cut from the template.
  • We don’t want the whole chunk of content from the template, however, so let’s take half of that back.
  • Find the div class=“textbox” in the middle of that block of text, above the “Our Assets” h2 tag.
  • Select from there to the end of the text and cut again – which should remove this small chunk of code and put it back on the clipboard.
  • You should be leaving the image code and four paragraphs of text including the blockquote in the Page Body field.
  • We have the field formatting set to XHTML, so we need to pull out all the p tags, otherwise we’ll get double tags on the rendered page. Pull them out of the blockquote as well.
  • I’m going to re-format the CSS file to make it so p class=“mpnull” inside the blockquote is unnecessary, as this would have to be assigned manually by a client/user.  I can use a #maincontent blockquote p declaration to apply the same formatting as “mpnull” would to paragraphs inside a blockquote.
  • Once you have the p tags removed, save the entry by clicking Submit.
  • Now create an “Our Assets” entry by choosing again Publish, then Home.
  • Enter a title of “Our Assets,” then again paste in the code from your clipboard.
  • Let’s just lose the div class=“textbox” altogether, leaving this post containing the two paragraphs and the unordered list.
  • Remember again to remove all the p tags.
  • Also, remove any spacing around the ul and li tags; make sure they are flush-left with only one carriage return between them.

Adding EE Tags to the Index Template
Still with me?  This is a long chapter, I know.  But we’re to the really fun part now—putting the EE code into the template to get it to draw our content from the weblog.  We’re going to use the exp:weblog:entries tag, which is the one you really should get familiar with first, as it’s the most common tag you’ll use while putting an EE-based site together.

You should take the time to review the EE documentation for the exp:weblog:entries tag.

Here’s the code of the final site/index template.  Take a look at the code and then we’ll work through what’s going on:

{embed="embeds/html_header"}
<body>
    <
div id="content">
        
{embed="embeds/logo_title"}
        {embed
="embeds/main_nav"}
        {embed
="embeds/search_section_intros"}
        
<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

OK – here is what’s happening with the exp:weblog:entries tag:

  • Weblog parameter—since we want entries only from the Home Weblog, we need to specify it.  It’s just a good habit to always be specific about where you want to pull content from.
  • Disable parameter - our template would still work without this parameter, but it’s a good idea to get in the habit of turning off aspects of the exp:weblog:entries tag that you don’t need.  The more you can disable the better your performance will be—see the EE documentation for more information on the disable tag.
  • Sort parameter - the exp:weblog:entries tag defaults to sorting by date in “newest at the top” order (one of those times where it’s weblog roots does show).  Since we put in our “Welcome” post first, if we didn’t change the sort it would have gone to the bottom of the page.

Whew!  Quite a chapter—but definitely an important one.  If you compare the source code of our original HTML template to the text version of the current EE template you can see we’ve come a long ways in integrating EE into the site design.  The rendered page is the same but the site/index template is vastly simplified and our content now stored in a database for ease of updates.

The Results
You should be able to load the Home page of your site and have it display the content now coming dynamically from EE.  The key here is that you want it to look exactly the same when you refresh.

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Ralph

by Ralph

Date: Monday, December 15th, 2008
Comment: #1

Yep, you rock. thanks for this tutorial. it is much appreciated.

Picture of davidrtk

by davidrtk

Date: Friday, December 26th, 2008
Comment: #2

great tutorial.. I really appreciate you putting this together.

one correction. in the index template sample above I believe you left out embeds before logo_title.. it should be embeds/logo_title..

I am a newbie so at least that is what worked for me.

Mike Boyink

by Mike Boyink (Author)

Date: Friday, December 26th, 2008
Comment: #3

Good catch - thanks!

Picture of Tamalita

by Tamalita

Date: Sunday, January 4th, 2009
Comment: #4

awesome. I’ve been using EE for several years (for my own site) but have never taken the time to really really understand it ... I’ve always got too much other stuff to do to focus on my own site——but this is soooooooooooooooooooooo helpful! thank you! I’m having lightbulb moments!

Picture of tom

by tom

Date: Wednesday, January 14th, 2009
Comment: #5

hi
thanks for this. i was building a site and got stuck, found your lessons and began going through them - which are great.
But I’m stuck again in that my home page content does not appear. The header does but not the content.

{exp:weblog:entries weblog=“Home-page”  disable=“categories|member_data|pagination|trackbacks” sort=“asc” }
<h1>{title}</h1>
{Content}{page_body}
{/exp:weblog:entries}

i have added {Content} to see if that worked. as in other pages this works:

{exp:weblog:entries weblog=“Company-Pages”  disable=“categories|member_data|pagination|trackbacks” sort=“asc”}
<h1>{title}</h1>
{Content}
{/exp:weblog:entries}

I have changed the weblog Home name to see if that was the problem.
There is definitely content in Publishing.

Not sure what to do.
tom

Picture of tom

by tom

Date: Wednesday, January 14th, 2009
Comment: #6

doh!
sorry - being a chump.
{page_content} is not a set bit of code, its the field name you set, and that i called something else. In this case Welcome.
So, {Welcome} sorted it.
Sorry to bother you.

thanks again
tom

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, January 14th, 2009
Comment: #7

;) No problem.

A key thing to remember with EE is that while the weblog:entries tag has many standard variables for meta-data about the post (date, time, author etc) the main content will always be in custom fields that you name.

Glad you got it sorted.

Picture of Casey Hill

by Casey Hill

Date: Sunday, January 18th, 2009
Comment: #8

Using the demo site. Things were good up to Chap 4. When I finished the coding I got the following error message. (I even went back and simply pasted all your code from Chap 4 in the index template, and still get same error.

I’m sort of “dead in the water” on this one! Hope you can help.

——————————-

Error

The following tag cannot be processed:

{exp:weblog:entries weblog=“home” disable=“categories|member_data|pagination|trackbacks” sort=“asc” }

Please check that the ‘weblog’ module is installed and that ‘entries weblog=“home” disable=“categories|member_data|pagination|trackbacks” sort=“asc” ‘ is an available method of the module

Mike Boyink

by Mike Boyink (Author)

Date: Sunday, January 18th, 2009
Comment: #9

Casey - make sure you’re getting the right quote marks (not the smart quotes but the straight text/browser quotes).

Picture of Casey Hill

by Casey Hill

Date: Sunday, January 18th, 2009
Comment: #10

Mike. I can see that in the error message there are smart quotes, but in my code they are all straight. What I did last was to copy and paste your entire block of code from Chap 4 into my index page. Everything appears to be okay, but I could copy and paste it here if that would help?

If I remove the disable part of the code, I still get the error.

Could this have anything to do with it being the EE demo site?

Everything was working up to this point.

<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>

Picture of Casey Hill

by Casey Hill

Date: Monday, January 19th, 2009
Comment: #11

Mike. After your last message, I decided to paste the code into Notebook and then back into the index page. That did the trick.

It did introduce a new issue which I’m trying to figure out. Now at the beginning of paragraphs, I’m getting:

               Â

I’ll try pasting that code in and out of Notebook to see if it resolves the issue.

Picture of Casey Hill

by Casey Hill

Date: Monday, January 19th, 2009
Comment: #12

All errors resolved.

I was pasting your lessons into OneNote so I could hilite items for future reference. Then I copied some of your code from OneNote into my EE site. So, although the code looked like it was just ascii text in OneNote, I’m guessing it was pasting in some invisible gremlins.

Thanks for your tip on the quote marks. That got me on the right track.

Picture of _SiD_

by _SiD_

Date: Thursday, February 26th, 2009
Comment: #13

Hi Mike,

firstly thanks for this invaluable series.

I’m trying to apply most of this to my own site that I’ve trying to set up, so I’m not following the same “small-business-site” as everyone else.

So far so good, I’ve the embed working, all css and images appear as they should. Tagea re pulling through the content - but I want to click through and link to a “full atticle”

So,  I copied the .index code, with {embeds} to a new template (to save extra work in future as you suggested) made some change to the code to pull through the content…but all css and images disappear when the page is rendered. As if all links are broken, I assumed they’d be intact from the {embeds}.

Any idea?

Thanks in advance.

S

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, February 26th, 2009
Comment: #14

Hey Sid -

It’s tough for me to support you since you’re not following the series..but it’s probably a pathing issue.  You’ll need to look your rendered code and see what the paths are and why they’re different from the page that does work.

If you need additional help I’d suggest the EE forums - they’re pretty responsive there as well.

Picture of asd

by asd

Date: Wednesday, April 22nd, 2009
Comment: #15

This is programmers heaven :)

Picture of Michael

by Michael

Date: Sunday, June 21st, 2009
Comment: #16

I was just wondering within your ‘Home’ Weblog you have some HTML markup. Assuming the end-user does not have a knowledge of HTML how can this markup be achieved within the blog without the need to use markup in the content?

Mike Boyink

by Mike Boyink (Author)

Date: Sunday, June 21st, 2009
Comment: #17

There are formatting buttons in the EE control panel, and any number of plugins for options like Textile. There are also wysiwyg options available like fckeditor or tinymce. Digging around the EE forums or devot-ee.com should net you some links.

Picture of Michael

by Michael

Date: Sunday, June 21st, 2009
Comment: #18

Many thanks will do… Just out of interest how do you personally like to resolve this?

Mike Boyink

by Mike Boyink (Author)

Date: Sunday, June 21st, 2009
Comment: #19

Strong content definition in the first place to try and have as few free for all fields. Then usually the cp formatting fields and some training.

Picture of David

by David

Date: Saturday, October 3rd, 2009
Comment: #20

Mike, just to say thanks for taking the time out do this series for us newbies. Most appreciated.

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, October 3rd, 2009
Comment: #21

You’re welcome - glad you are finding it useful!

Picture of Paul Steven

by Paul Steven

Date: Tuesday, July 27th, 2010
Comment: #22

You have chosen to sort by “asc” to ensure the “Welcome” post appears first.

If you had say 3 sections to be displayed on the home page and they were not in date order (either desc or asc) is there any other way to control the sorting? For example can it be set to sort by title or can an additional sort order field be added?

Thanks for these great tutorials!

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, July 27th, 2010
Comment: #23

Sure…

If the content isn’t date sensitive just tweak the date/time (the Multi-entry editor works well for this), or create a custom field just for the purpose of sorting and use that fieldname as an orderby parameter.

Or there are 3rd party addons to help this..rEEOrder is one I think.

Picture of Liam

by Liam

Date: Sunday, August 1st, 2010
Comment: #24

I am currently moving from wordpress to ee2. Thank you so much for your awesome tutorial. It’s really helpful:)

Mike Boyink

by Mike Boyink (Author)

Date: Sunday, August 1st, 2010
Comment: #25

My pleasure.  We’re also putting the final touches on a EE2 version of this series in book form.  Hope to have it available by the end of this week.

Picture of adriana

by adriana

Date: Tuesday, September 28th, 2010
Comment: #26

Hi Mike,

I am trying to reach the url above http://expressionengine.com/user_guide/modules/channel/weblog_entries.html to get more information about weblogs entries, but it does not work. Do you have another one?

Thanks and really gerat material!!!!

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, September 28th, 2010
Comment: #27

Hi - the 1x docs have moved.  The new home page for them is at http://expressionengine.com/legacy_docs/.

Picture of HBnC_Design

by HBnC_Design

Date: Friday, October 15th, 2010
Comment: #28

First…Great source for us newbies, I understand that their maybe some time has passed since you did this and since I found.. I am working of off v2.0 and the now call weblog, channel. Was lost till I found this article in the user guide… http://expressionengine.com/user_guide/installation/version_notes_2.0.0.html

Picture of Chris

by Chris

Date: Wednesday, December 28th, 2011
Comment: #29

I am working in 2.3.1 and none of the images being called through the CSS template are appearing.  If they are called in the template itself they are there.  If this something that has changed in 2 I’ll find out when I get your book.

I thank you greatly and EE owes you for your work.

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, December 28th, 2011
Comment: #30

Hi Chris -

If it’s images that the CSS is specifying it’s not EE version related.  It’s probably a path issue.  Compare the rendered paths to what they should be…

Picture of chris

by chris

Date: Wednesday, December 28th, 2011
Comment: #31

I looked 1,000 times and missed it each time.  Thanks for telling me it had to be there.  Stupid “s”.

I know you get praise heaped on you but you deserve it.  Made my day.

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, December 28th, 2011
Comment: #32

You don’t know how many times I’ve had to debug similar things over the shoulders of EE students in class…;)  Glad to hear it’s working!

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>