Community Documentation

Basic Drupal 7 website step-by-step: WYSIWYG, News, Menu and Slideshow

Last updated February 24, 2013. Created by casaran on February 22, 2013.
Log in to edit this page.

So here we go. We are new to Drupal and we want to build our first very simple website. In this tutorial, we assume that you already have Drupal core installed and a basic installation running. You know how to install new modules. We also won't look at how one can theme his website.

Admin menu

First of all, for gain of time during all the project, install the admin menu module. Disable the core Toolbar module. You have now a new drop-down administration menu at the top of your site.
Note that this step is not strictly necessary but just make things easier. Most of the people use this admin menu instead of the normal one.

WYSIWYG

Now let's continue with the WYSIWYG. In this case, we choose to go with CKEditor combined with IMCE for file handling. Read very carefully installation notes for CKEditor to install it correctly. On the CKEditor website, do not use the Drupal version, use the normal one. When both modules are installed, go to Administration->Configuration->Content authoring->CKEditor. In Profiles, click edit for full HTML. In File browser settings, select IMCE for the three drop-down choices. Now you have a working WYSIWYG with integrated file management.

News

With this, it will be easier to create new pages on the website, so now let's use it to create our website news. First go to Administration->Structure->Content types. Click Add content type. Call it News and change settings as suitable for your needs (authoring information, comments, etc.). Click on Save and add fields. Basic set-up could be enough for you (Title and body of the News) but you can add as many fields as you need, for example if you want images. After saving your content type configuration, you can now create news for your site if you go to Administration->Content->Add content->News.

Views

This is nice but we would like to put all news on the front page for easy viewing of what is new on your website. For this we will need to install the Chaos tool suite module. Then install the Views module. When this is done, go to Administration->Structure->Views and Add new view. Name it 'News', Show 'Content', of type 'News', unselect Create a page, select Create a block, title 'News' (possibly). Display format: Unformatted list of teasers. Change more options if needed then click Continue & edit. Change more options if needed then click Save button.

Blocks

You just created a block of news, now let's make it show on the site. Go to Administration->Structure->Blocks. Locate the block named View: News and put it on Content part of your theme. Then click on the configure button of this block. Give block title the value <none> if you don't want any, or give an actual value. Then at the bottom, on Pages, select 'only the listed pages' and give the value <front> on the text block after. Now you have your news working on the site, and showing on the front page.

Static pages

You might want to have more than a front page. If you happen to have that sort of thinking, go to Administration->Content->Add content->Basic page. Your WYSIWYG once again come in handy to input data (don't forget to choose Text format Full HTML if you want to handle files), and when you are done, go to URL path settings and in URL alias, give the alias you want for the url address of this page (about-us, faq, etc.). Change other options as fit and then save your page. You just added a new page to your site, it became bigger and this is great, but if you return to the front page, there is no easy access to the new page you created.

Menu

You need a menu. Let's go the easy way and use the main menu. Go to Administration->Structure->Menus->Main menu and add link. Give it a title (e.g. About us) and the path to the page you just created (e.g. about-us). Click on save and then adjust his position with drag-and-drop with other links on the main menu and save.

Slideshow

You have now a real complete website with a news system, static pages, a functional menu and a WYSIWYG. Let us go over our last step, which is a little bit more "advanced". Yes we don't know why, but we want to create a slideshow. Because slideshows are cool. And we certainly do not want to touch some JavaScript (what is that anyway?). So we will use the Views Slideshow module. After installation, create a new content type called 'Slideshow' and put another image field. Create as many new contents of type 'Slideshow' as you want for your slideshow. When this is done create a new view called 'Slideshow'. This view shows fields of type 'Slideshow', is a block and has as unique field (in FIELDS) Content: Image. Now the interesting part. In Format, select 'Slideshow'. There is a bunch of options. Choose what feeling you want for your slideshow, and if you need more, see the two libraries you can install for more options. Save you options, and save your view. As before, go to the Blocks and activate the block View: Slideshow where you want it to appear on the website and on which pages. You have now a working slideshow on your website.

This tutorial is now complete and if people like it, I can make a similar one for more advanced level stuff and complicated modules. If you have any question, leave a comment or contact me directly. Feedback is also always welcome.

About this page

Drupal version
Drupal 7.x
Level
Beginner
Audience
Site builders
Keywords
basic, Drupal 7, menu, modules, news, slideshow, website, WYSIWYG

Tutorials and site recipes

Drupal’s online documentation is © 2000-2013 by the individual contributors and can be used in accordance with the Creative Commons License, Attribution-ShareAlike 2.0. PHP code is distributed under the GNU General Public License. Comments on documentation pages are used to improve content and then deleted.