FREELessons: 35Length: 7.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.3 Article Menu Items

Now we’ve created some content, it’s time to publish it on the front-end. But how do we achieve that? Well all we need to do is use menu items to tell the Joomla system to render the content. Remember, even though you may have content within the back-end, it doesn’t automatically generate visible content on the front-end. Here we use menu item types associated with the articles component to render content within the component.

5.3 Article Menu Items

Hi, guys. Welcome back to a beginner's guide to using Joomla. So in this lesson, we want to take a look at all the different menu item types that are associated with the article's component. So the first thing we want to do is log in to the back end, and we're gonna take a look at the Test Menu. And right now, I'm going to select all of these menu items. And I'm simply going to stick them in the Trash. Now, what I'd like to do is go ahead and start adding in new menu items that link to all of the different types of content we have associated with the articles component. So what I'm gonna do is pause the video, and go ahead and add in each menu item. And then, we'll cover that menu item type extensively Later on. So now, I've added in all of these menu item types, and they're all on level one. What I've gone ahead and done is readjusted the test menu module in the sidebars, so now it shows up on all pages. And again, we have our menu items right there. And also, don't forget we have our other test menu module that renders these menu items in the footer. But however, what we can do now is start to discover what these menu item types deliver in terms of their content. And also, how we can manipulate the layout of the content when we go ahead click on one of those menu items. So firstly, we have the archived articles link. Now in here, we can filter through the archived articles, but unfortunately I don't have any articles with the archived status. So what I'm first going to do is create a category that's called Archive. And then, I'm going to duplicate my articles, and set their category to be archived, the newly created category. And then, I'm gonna set all of their statuses to archived as well. Then, we shall have them show up on this page. So this page shows all of the articles with the status of archive. Now, it doesn't matter where these articles are. I only duplicated these articles, and then I set their status to archived. But, it doesn't really matter what category they're in. I only did that to organized this. But however, if you get any article, you target it and set it to Archive, it will show up on this page. And what I can do is now organize it by the month, the year, or both. And also, I get to say, how many articles we show on a single page. So at the moment, we have five archived articles showing on a single page before we have to go to a new page. Or I could say all, and so I can change that on the fly. But by default, it's set to five. Now, what I'd like to do is take a look at the menu manager component and specifically in the test menu. And inside of that, I'd like to take a look at the archived articles link. And let's have a closer inspection of this menu item. So all you need to do again with creating a menu item is provide a title, that is a must. Then, I need to select the type of menu item. So I selected it, so I dropped down article, and then said archived articles. And this doesn't require any additional data cuz it already knows what content it needs to render. Now on top of that, you do get a new tab under here for archive. And also, you can play around with some of these options are well. So such as the ordering of your articles, whether you want to order them by the title, by the author, or when you want to show the oldest archived, articles first, and so on and so forth. You can also say the date for ordering. So for example when I select a date right here, such as Jan 2004, what date am I ordering these are archived articles by? We can say the created date, the modified date, or the published date. So show me all of the articles that are archived that were published in January 2004. And also, I can say how many article I'd like to show in a single page. So by default, it's set to five right here, but I can change that on the front end as well. Then on top of that, I can say the Filter Field, hide or show it, or use the global configuration. So the global configuration is currently set to hidden, but I can show that field. Which means now, that what I can do is filter the titles of the archived articles. Then on top of that, I can also limit the intro text. So I've set that to 100 characters, which means you only get 100 characters before you get this ellipsis. And then, you need to click on the title, and then you can read more into that specific article. So that is the archived articles menu item type. And now, I'd like to move on to take a look at the categories blog menu item type. So what does this link do? Well first of all, it's gonna show the contents relating to a category. But, you have two different types of options. You can either have a blog layout or list layout. So let's first of all, take a look at the blog layout for the Tuts+ Category. So I'm gonna go ahead and click on Tuts+ Category, and in brackets I put blog, so I know which layout this is. And you can see here that it's showing all of the articles associated with this category. Also if I had a lot of articles, we may get some pagination at the bottom to flick through pages of articles. And you can see here that I've added in a few more articles. And again, we have a few more intro images. So that was the first one I created, but now I've added in a few more, like so. And so, that is the blog layout. We get a nice intro image, a title. We get a little bit of a description, and also some nice information as well, about the article. So this is really nice. So if you want to show your category with the blog layout, what you need to do is go ahead and create a new menu item, provide a title for it, select the menu item type. Drop down Articles, go to Category Blog. So, show a category in the blog format, and then we say which category do we want to display. Now, you can show a child category or the parent category. So, if I say Blog, which is the parent category now. You'll see if I hit refresh, we now get all of the articles associated with the Blog category. But however, below there we can see sub categories, TouchPlus, and a little description, which I have provided for that category. And then, I can click on there. And now, I can take a look at the articles associated with that subcategory, Tuts+. Again, we'll talk more about this later, but I can change that back to Tuts+ now. So it shows all of the articles associated to the Tuts+ category in the blog layout. So let's have a quick mess around with some of these options. For example, we have the category options such as, show the category title, show the category description, and show the category image as well. So I can go ahead and save that, and we can hit refresh. And now, you can see the category title, image, and description. On top of that, you also have the blog layout so you can determine the number of leading articles, which by default is set to one leading article. So this is the leading article right here that spans the full width of the page. But, I can have more than one leading article if I want to. I just type it in right there. Then also, we have the intro articles below the leading articles. These are the articles that are placed within the columns. So right here, I can say only show two intro articles maximum per page. And so what we get is one leading article, two intro articles, and the rest of the articles are linked down below. And also, you have the pagination as well to go to a different page. So what I can do now is just go ahead and delete that. Then also, I can specify how many columns. So again, if your theme supports it, you can have multiple columns such as at the moment, two columns. But I could set this to three, maybe four columns if I wanted to. And also, I can set it to one, so that each intro article spans the width of the page, like so. So now, you can see there's intro articles spanning the width of the page. And so again, you have lots and lots of options to go through including all of the other options for the menu items that we've already discovered. And so, you can really have a good play around right here, but there's lots and lots to go through. And Joomla is incredibly flexible. So next up, we're gonna take a look at the Tuts+ category being rendered out as a list. So if we go ahead and click on that. We can see the menu item type has been set to category list. So you click on there and go to Articles, and then click on Category List. So now, we have the list format. And then, we need to choose which category we want to render in the list format which is Tuts+. So if we go ahead and click on that link. So Tuts+ category list. We now can see that this is extremely different to the blog layout. We don't have the description in the images. We just have the title, author, and how many hits there has been on that article. So that is the Category page in the list format. Then also, we have the Featured Articles. So again, I create a new Menu Item. I select the type. And all I need to do is drop down articles, and say featured article. So now, I'm targeting that specific menu item type. Again, it doesn't really require any options to say what it wants to display, because it already know that we want to display the featured article. And if you're a member in the last lesson, what we did was created a few articles, and we put a star in there to say that this is a featured article. You can also drop down the content manual and take a look at the featured article specifically right here. So if we go ahead and click on the featured articles, there they are, all of the main featured articles right there. Nice and easy, real quick to settle. And again, you can have a play around with the options. Let's go back to the test menu, and I'm just gonna check any featured articles in here. And again, go through these options, have a play. Then also, we can list the categories. So again, I created a new menu item. I said Select, we went under Articles, and then we went to List All Categories. What we can do here is we can select the top level category. If we say root, we're on the root level, but don't forget you can nest categories inside of categories. So if we're on the root level we could say categorize blog, TutPlus archive, and so on and so forth. Now, let's go ahead and click on that link, list categories. So, I can see the uncategorized category with two published articles assigned to it. Then, we have the blog category with four assigned published articles. Now, also we had a third category called Archive, and that's where all of our archived articles were placed. However, it's not showing up here. Why is that? Well, let's go ahead and take a look at the article's component, and specifically the article manager. And what I'm going to do is drop down search tools, and say, only show articles to do with the Archive category. Now, you'll notice by default that all of the archived articles are not actually showing up. So we have to drop down the Status and show Archived articles. Now, we can see all of the articles that have the status of archived that are in the Archive category. And so, what I can do is go ahead and tick on one of these and change it's status to published. Now you'll notice that when I go back and refresh, archive appears on the list, and it shows me that there is one assigned article that has the published state. It has archived, then it won't show up in this list count right here. This article count for that particular category. Now, I'd like to take a look at the Tuts+ single article menu item. So let's go ahead and go back to the test menu. And then, take a look at Tuts+ single article. So what I did here was I selected the menu item type. Dropped down articles, and then I clicked on the single article menu item type at the bottom. Once you do that, it asks you which article you'd like to display, of which you can say select. Of course, you have your filtering along the top, and you can go ahead and click on one of these articles that you would like to show on the page. So this is the article on its own. So, I've chosen the article Tuts+. And so now, when I go ahead and click on this link, it will show that article specifically, like so. And again, you have lots of options available to you in terms of the display, such as titles, link titles, show intro text, and so on and so forth. So that is the single article menu item type. Now, we have one more menu item type that I have not discussed. And that is the create article menu item type. So just like you can create articles on the back end, you can also create articles on the front end, providing you have permissions to the articles component. So what I'm going to go ahead and do is create a new menu item. And I'm going to give it the name of Create Article. Then I'm gonna select the menu item type, then I'm gonna drop down articles then Create Article. Now, this will take us to a page that will allow us to create an article on the front end. However, if we don't have permission to access the article's component and create content within the article's component, we simply will not be allowed to access the page. So if I go ahead and save it right now, and currently we have the viewing access level set to public. Well, I'm the public right now, because I'm not logged in on the front end. If I hit refresh and say Create Article, it will simply say, sorry, you are not allowed to access this page. It simply denied it altogether. So what I'm going to do is go ahead and change the viewing level because nobody needs to see this unless they're logged in as administrator. So I'm just going to say, only allow test managers to see this menu item. Hit refresh, and now you'll see it disappears. Now, we have to login as the Test Manager, and then once we're logged in as the Test Manager, we have to create audio link. And there you can see we can provide a title, some content for our article, publishing language, and also metadata as well. And I can also take a look at the different versions of this article as well, right from the front end without having to go into the back end. So thank you for watching me in this lesson. And please join me in the next lesson, where we'll take a look at the global settings for the article component.

Back to the top