Drupal 7 - Personal Blog Theme Guide for Developers

Overview

Starting with a new theme, it sometimes takes a lot of time for first time users to really understand how it works. You may want to know how to customize layouts, typography, block styles and make it look the way you want.

In most cases you won't need to know PHP or database queries, but basic knowledge would be very helpful to get great results.

If you're an experienced Drupal developer or if you want to build the theme from zero with only the basic appearance of your theme, find this guide in handy. This guide will give you the detailed step by step installation guide to help you start building the content for Personal Blog to look exactly like the demo site.

1. Personal Blog Package

Included content:

  • README.txt
  • Personal Blog theme: personal-blog-7.x-1.1.zip
  • Demo Profile for Personal Blog: personal-blog-profile-7.x-1.1.zip

2. System Requirements

Database

  • MySQL 5.0.15 or higher with PDO
  • PostgreSQL 8.3 or higher with PDO
  • SQLite 3.3.7 or higher

PHP

  • PHP 5.2.5 or higher (5.3 recommended)
  • PHP5 GD library installed
  • Disabled error_reporting flag on production server
  • Enabled mod_rewrite in Apache for clean URLs
  • Memory limit set up at least 128MB

If you are new to Drupal, please take a reference to System requirements on drupal.org.

3. Screenshots

Let's glance through the theme's design & some features:

Home

About Me page

Polls page

Blogs page

Gallery page

Forums page

Contact

Multi colors

4. Module requirements

Core Modules

  • Block
  • Blog
  • Color
  • Comment
  • Contact

Third-party Modules

  1. Backup Migrate
  2. Context
  3. Chaos tools
  4. Entity
  5. Gallery Formatterar
  6. Google Analytics
  7. Jcarousel
  8. Jquery Plugin
  9. Jquery Update
  10. Libraries
  11. Mailchimp
  12. Mailsystem
  13. Mandrill
  14. Memcache
  15. Menu Breadcrumb
  16. Path Auto
  17. Quicktabs
  18. Simplenews
  19. Superfish
  20. Tagclouds
  21. Taxonomy Menu
  22. Token
  23. Views
  24. Views featured-post
  25. Wysiwyg

Required libraries by the modules

  • Mailchimp
  • Jquery.cycle
  • Superfish

Download Drupal core files, and extend your site with modules at here.


Installation

How to install a WeebPal demo package

1. Download theme package Personal Blog

Files included:

  • README.txt
  • Personal Blog theme package: personal-blog-7.x-1.1.zip
  • Personal Blog demo package: personal-blog-profile-7.x-1.1.zip.
    This demo package includes all source codes and content, including sample images. This package will be used to build a site like our demo for the theme easily.

Package

The below steps will give you the installation guide so that you can build your website to look exactly like the Personal Blog Demo

  • personal-blog-profile-7.x-1.1.zip

2. Extract personal-blog-profile-7.x-1.1.zip above and copy it into your host, and rename the directory to personal-blog

Quick Installation

3. Access your MySQL database and create a new database (e.g: personal-blog) and user account. Don't forget to add correct permissions to new user to access the database

Quick Installation

4. In the demo directory database/ (or profile/weebpal), you can find database dump named sample_data.sql.

Quick Installation

Import this file into new database.

Quick Installation

5. Now, you need to modify sites/default/default.settings.php file. Clone default.settings.php file, then rename it "settings.php"

Quick Installation

6. Open settings.php, then locate the $database array and set proper credentials.

Quick Installation

                    $databases['default']['default'] = array(
                        'driver' => 'mysql',
                        'database' => 'databasename',
                        'username' => 'username',
                        'password' => 'password',
                        'host' => 'localhost',
                        'prefix' => '',
                    );
                

When using this installation, you are installing everything from our preview server. So don't forget to set proper values to access to your database: db name, db admin username, db admin password, host, etc.

7. Open the browser and visit your website with the prepopulated content & layout exactly like our Personal Blog Demo

Now, you can visit administrator site with the admin account admin/admin to delete the unnecessary contents and add the new ones.

How to install a WeebPal theme for Drupal developers

If you're an experienced Drupal user or if you want to build the theme from zero with only the basic appearance of Personal Blog Theme, find this guide in handy.

1. Install Drupal

1. Go to Drupal download page and download the latest version of Drupal 7.

2. Extract and copy Drupal folder to your host and rename the directory (e.g: personal-blog)

Follow steps below to install a Drupal site only:

3. Access to database and create a new database with a name such as personal-blog.

Install theme package

4. Open browser and navigate to your website.

5. Select Standard => click Save and continue button.

Install Drupal 7

6. Choose language => click Save and continue button.

Install Drupal 7

7. Enter database parameters => click Save and continue button.

Install Drupal 7

8. Enter site information => click Save and continue button.

Install Drupal 7

9. Click Visit your new site and you will have a new site.

You can refer the guide from drupal.org to delve more details about drupal installation.

2. Install Personal Blog Theme

  1. Extract Personal Blog theme .ZIP file:
    • personal-blog-7.x-1.1.zip
  2. Move this theme into your Drupal folder (personal-blog of part 1. Install Drupal): sites/all/themes

  3. Navigate to Appearance > Choose Enable and set default Personal Blog theme

3. Install Required Modules

Now that you've enabled Personal Blog theme, you will install and enable the required modules (listed in the Module Requirements section) to customize and use them.

If you don't know how to install the contributed modules, this tutorial is an essential guide.

Cheat to install modules & theme:

  1. Extract personal-blog-profile-7.x-1.1.zip
  2. Open extracted folder, go to sites/all and copy all folders inside (modules, themes, libraries)
  3. Paste them to your host, folder sites/all

Note: See this guide to get more details about installation


Taxonomy configuration

Quick Information

  • Taxonomy: Taxonomy can be simply understood as category management using organizational keywords known in other systems as categories, tags or metadata. It allows you to connect, relate and classify your website's content. In Drupal, these terms are gathered within "vocabularies". The Taxonomy module allows you to create, manage and apply those vocabularies.
  • Vocabulary: for example product category, tag, provider name, ...
  • Term: the items in each vocabulary. For example: vocabulary product category has some terms: laptop, pc, mobile, tablet, camera, headphone, ...
  • For more information about taxonomy, please see: Organizing content with taxonomies

Navigate to Structure > Taxonomy to create vocabularies as the following:

Vocabulary

Configure taxonomy Blog Category:

Vocabulary

Note: See this guide to get more details about taxonomy configuration


Media configuration

Image Style Configuration

Image styles are the presets of image settings. Image styles are used to define how the images are shown.

Navigate to Configuration, In MEDIA area, click Image styles, then create image styles as the following:

Image Styles

Configure for each image style:

  1. galleryformatter_slide:
  2. Vocabulary

  3. large:
  4. Vocabulary

  5. featured:
  6. Vocabulary

  7. gallery_thumbs:
  8. Vocabulary

  9. gallery_thumbs_page:
  10. Vocabulary

  11. featured-post:
  12. Vocabulary

Content type configuration

Configure Forums

Note: Required Modules: Forums.

1. Navigate to Structure > Forums

2. Click Add forums link and add forums followings:

Forums

3. Click Save button

Configure for each forums:

  1. Helps and Supports:
  2. Vocabulary

  3. Before You Start:
  4. Vocabulary

  5. Installing Drupal:
  6. Vocabulary

  7. Installing Modules:
  8. Vocabulary

  9. Installing Themes:
  10. Vocabulary

  11. General Discussion:
  12. Vocabulary

  13. Module Development:
  14. Vocabulary

  15. Theme Development:
  16. Vocabulary

  17. Translations:
  18. Vocabulary

Modify Article type

1. Navigate to Structure > Content Type find Article to click link

2. In Article row, click "manage display" link.

3. Go to Manage display tab > Default set following properties:

Article

4. Go to Manage display tab > Teaser set following properties:

Article

5. Click Save button

Modify Blog entry type

Note: Required Modules: Blog.

1. Navigate to Structure > Content Type

2. In Blog entry row, click "manage fields" link.

3. To add an existing field, you can take action on "Add existing field" row

Blog type

4. Set properties for Image field

Blog type

5. Set properties for Blog Category field

Blog type

6. Go to Manage display tab > Default set following properties:

Blog type

7. Go to Manage display tab > Teaser set following properties:

Blog type

8. Click Save button

Modify Forum topic type

Note: Required Modules: Forum topic.

1. Navigate to Structure > Content Type

2. In Forum topic row, click "manage fields" link.

3. To add an existing field, you can take action on "Add existing field" row

Forum topic

4. Click Save button

Create Gallery type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type Gallery with following properties:

Gallery

2. To click Publishing options and set properties

Gallery

3. To click Menu settings and set properties

Gallery

4. Go to Manage Fields and add following fields:

Gallery

5. Set properties for Image field

Gallery

Gallery

6. Go to Manage display tab > Default set following properties:

Gallery

7. Click Save button

Create Featured Post type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type Featured Post with following properties:

Featured Post

2. To click Publishing options and set properties

Featured Post

3. To click Menu settings and set properties

Featured Post

4. Go to Manage Fields and add following fields:

Featured Post

5. Set properties for Image field

Featured Post

Featured Post

6. Go to Manage display tab > Default set following properties:

Featured Post

7. Go to Manage display tab > Teaser set following properties:

Featured Post

8. Click Save button

Configure URL aliases

1. Navigate to Configuration, find SEARCH AND METADATA area. Then click URL aliases link

2. Go to Patterns tab and set the following properties:

URL aliases

3. Click Save button

Configure Menu Breadcrumb

1. Navigate to Configuration, find USER INTERFACE area. Then click Menu Breadcrumb link and set properties

URL aliases

2. Click Save button


Create Homepage

Search form block

Front end Display

Search form

1. Navigate to Structure > Blocks, find Search form block, click configure link and set the following properties:

Search form

2. Click Save button

Main Menu

Front end Display

Main Menu

1. Navigate to Structure > Blocks

2. Find Main Menu block, click configure link, set following properties

Main Menu

3.Click Save block button.

Featured Post block

Front end Display

Featured Post

1. Create Featured Post view

1. Navigate to Structure > Views, click Add new view link, Create Featured Post view with following properties:

Featured Post

2. Click Continue & edit button and set following properties:

Featured Post

3. At FIELDS area, click Add button to add fields: Content: Image, Content: Post date

4. Set properties for Content: Image

Featured Post

5. Set properties for Content: Post date

Featured Post

6. Set properties for Content: Title

Featured Post

7. At FIELDS area, click Rearrange button and set following arrange

Featured Post

8. At FILTER CRITERIA area, click Add button and add file Content: Image:fid

9. Set properties for Content: Image:fid

Featured Post

10. At FILTER CRITERIA area, click Rearrange button and set following arrange

Featured Post

11. At FORMAT Format click Settings and set following properties:

Featured Post

12. Click Save block button.

2. Configure View: Featured Post block

1. Navigate to Structure > Blocks

2. Find View: Featured Post block, click configure link, set following properties

Featured Post

Featured Post

3.Click Save block button.

Sidebar first: About Me block

Front end Display

About Me

1. Add field Image

Find sites/default/files/field/image/ add image field demo-9.jpg

About Me

2. Create and configure About Me block

1. Navigate to Structure > Blocks, click Add blocks link to create About Me block with following properties:

About Me

About Me

3.Click Save block button.

Refer to following PHP code:

                            

Molestie libero nummy ornare

Lacinia metus Donec ut quis id. Euismod vel pretium euismod wisi tristique Nam lobortis Vestibulum euismod adipiscing. Amet id laoreet at nec wisi nibh justo.

Sara Broggen

Product Management

Sidebar first: Most Recent Blog block

Front end Display

Most Recent Blog Posts

1. Create Most Recent Blog Posts view

1. Navigate to Structure > Views, click Add new view link. Create Most Recent Blog Posts view with following properties:

Most Recent Blog Posts

2. Click Continue & edit button and set following properties:

Most Recent Blog Posts

3. At FIELDS area, click Add button to add fields: Content: Image, Content: Post date, Content: Body

4. Set properties for Content: Image

Most Recent Blog Posts

5. Set properties for Content: Post date

Most Recent Blog Posts

6. Set properties for Content: Body

Most Recent Blog Posts

Most Recent Blog Posts

7. At FIELDS area, click Rearrange button and set following arrange

Most Recent Blog Posts

8. At FILTER CRITERIA area, click Content: Type link and set following properties

Most Recent Blog Posts

9. At TITLE Title area, click link and set following properties

Most Recent Blog Posts

10. At Advanced > OTHER area, add CSS class

Most Recent Blog Posts

11. Click Save block button.

2. Configure View: Most Recent Blog Posts block

1. Navigate to Structure > Blocks

2. Find View: Most Recent Blog Posts block, click configure link, set following properties

Most Recent Blog Posts

Most Recent Blog Posts

3.Click Save block button.

Sidebar first: Categories

Front end Display

Categories

1. Create Categories menu

1. Navigate to Structure > Menu

2. Click Add menu link and create Categories menu

Categories

3.Click Save button.

2. Configure Categories block

1. Navigate to Structure > Blocks

2.Find Categories block, click configure link, set following properties

Categories

Categories

3.Click Save block button.

Sidebar first: Personal Blog Newsletter block

Front end Display

Personal Blog Newsletter

1. Navigate to Structure > Blocks

2. Find Newsletter: Personal Blog newsletter block, click configure link, set following properties

Personal Blog Newsletter

3.Click Save block button.

Sidebar first: Quicktab block

Front end Display

Quicktab

1. Create Gallery block view

1. Navigate to Structure > Views, click Add new view link. Create Gallery view with following properties:

Most Recent Blog Posts

2. Click Continue & edit button and set following properties:

Gallery

3. At FIELDS area, click Add button to add fields: Content: Images

4. Set properties for Content: Images

Gallery

5. At FIELDS area, click Rearrange button. Then click remove link to remove Content: Title field

6. At Advanced > OTHER area, add CSS class

Gallery

7. At FORMAT Format area, click Settings button and set following properties

Gallery

8. Click Save button.

2. Create Quicktab

1. Navigate to Structure > Quicktab > Add Quicktab Instance create Quicktab and block with following properties:

Quicktab

Quicktab

2. Click Save block button.

3. Configure Quicktab block

1.Navigate to Structure > Blocks, find Quicktab. Click configure link and block with following properties:

Quicktab

Quicktab

2.Click Save block button.

Sidebar first: User menu block

Front end Display

Custom Sreach 1

Configure User menu block

1. Navigate to Structure > Blocks,find User menu.Click configure link and block with following properties:

User menu

User menu

2. Click Save block button.

Sidebar first: Tags in Tags

Front end Display

Tags in Tags

1. Navigate to Structure > Blocks

2. Find Tags in Tags block, click configure link, set following properties

Tags in Tags

Tags in Tags

3.Click Save block button.

Sidebar first: Who's online

Front end Display

Who's online

1. Navigate to Structure > Blocks

2. Find Who's online block, click configure link, set following properties

Who's online

Who's online

3. Click Save block button.

Sidebar frist: Poll block

Front end Display

Most recent poll

1. Configure Most recent poll block

1. Navigate to Structure > Blocks

2. Find Most recent poll block, click configure link, set following properties

Most recent poll

Most recent poll

3. Click Save block button.

2. Add content

1. Navigate to Content > Add content

2. Find Poll content type link. Then click and create content with following properties:

Most recent poll

3. Click Save button.

Gallery block

Front end Display

Gallery

1. Navigate to Structure > Blocks

2. Find View: Gallery block, click configure link, set following properties

Gallery

3.Click Save block button.

Contact block

Front end Display

Contact

Create and configure Contact block

1. Navigate to Structure > Blocks, click Add block link to create Contact block with following properties:

Contact

Contact

2. Click Save block button.

Refer to following HTML code:

                        

General Inquiries

Capto consequat eros iusto quibus tego uxor veniam vulpes.

contact@myblog.com

Connect with me block

Front end Display

Connect with me

Create and configure Contact block

1. Navigate to Structure > Blocks, click Add block link to create Connect with me block with following properties:

Connect with me

Connect with me

2. Click Save block button.

Refer to following HTML code:

                        

Resources block

Front end Display

Resources

Create and configure Resources block

1. Navigate to Structure > Blocks, click Add block link to create Resources block with following properties:

Resources

Resources

2. Click Save block button.

Refer to following HTML code:

                        

Copyright block

Front end Display

Copyright

Create and configure Copyright block

1. Navigate to Structure > Blocks, click Add block link to create Copyright block with following properties:

Copyright

Copyright

2. Click Save block button.

Refer to following HTML code:

                       

Powered by Drupal. Designed by WeebPal Drupal Themes.

©2014. All rights reserved

Superfish menu block

Front end Display

Copyright

Configure Superfish 2 block

1. Navigate to Structure > Blocks, find Superfish 2 block. Click Configure link and set following properties:

Superfish 2

Superfish 2

Superfish 2

2. Click Save block button.

Social share block

Front end Display

Social share

Create and configure Social share block

1. Navigate to Structure > Blocks, click Add block link to create Social share block with following properties:

Social share

Social share

2. Click Save block button.

Refer to following HTML code:

                        
                    


Create Subpages

About Me page

Create and configure About Me content

1. Navigate to Content > Add content link, find Basic page click and create About Me content with following properties:

About Me

2. Find Menu settings to click and set following properties

About Me

3. Click Save block button.

Content type page

Create and configure Content type view

1. Navigate to Structure > View click Add new view, then create Content type view and set following properties:

Content type

2. Click Continue and edit button. Next to steps below to set properties for following fields:

Content type

3. At FILTER CRITERIA area, find Content: Type to click and set following properties:

Content type

4. At PAGE SETTINGS > Menu area, click link and set following properties:

Content type

5. Click Save to save view

Gallery page

Add Gallery page view

1. Navigate to Structure > View, find Gallery view. Then click Edit button

2. Click Add > Page button to create Gallery page view and set following properties:

gallery

3. At FIELDS area, click Add button to add fields: Content: Images

4. Set properties for Content: Images

gallery

5. Set properties for Content: Title

gallery

6. At FIELDS area, click Rearrange button and set following properties rearrange

gallery

7. At PAGE SETTINGS > Menu area, click link and set following properties:

gallery

8. At PAGE SETTINGS > Path area, click link and set following properties:

gallery

9. At PAGER > Use pager area, click link and set following properties:

gallery

gallery

10. Click Save to save view

Contact page

Create and configure Contact block

1. Navigate to Structure > Blocks, click Add block link to create Contact block with following properties:

Contact

Contact

2. Click Save block button.

Refer to following HTML code:

                        

Contact Information

Address brand: 90 Street London, United Kingdom.
Tel: 20 7345 667
Fax: 234 567 890
Mail: sales@weebpal.com

Main Menu Configure

1. Navigate to Structe > Main menu click Edit link and set following properties:

Main Menu

2. Find Conten type click edit link and set following properties:

Main Menu

3. Find Gallery click edit link and set following properties:

Main Menu

4. Click Add link link to create Blogs menu link and set following properties:

Main Menu

5. Click Add link link to create Polls menu link and set following properties:

Main Menu

6. Click Add link link to create Forms menu link and set following properties:

Main Menu

7. Click Add link link to create Contact menu link and set following properties:

Main Menu

8. Click Save button


More Configurations

Site Information

In this section, you can change basic settings, such as the site name, slogan, e-mail address.

1. Log in to Administration site page by administrator account

2. Navigate to the Site Information page Configuration > System: Site information

Site Information

3. Change site details from the view:

  1. Site name
  2. Slogan
  3. E-mail address
  4. Set Default Front page

4. Click on Save configuration to finish editing.

Color Configuration

1. Create a new color.

1. Navigate to the directory: personal-blog/sites/all/themes/personal-blog, you can find file personal-blog.info, open this file.

Color Configuration

2. Locate the skins[ ] arrays and add new code row:

Color Configuration

3. Save file.

4. Navigate to the directory: personal-blog/sites/all/themes/personal-blog/css/colors, clone a folder, then rename it "new_color"

Color Configuration

5: new_color folder includes images folder and style.css file.

Now, you can style new color for theme by modifying style.css file.

Color Configuration

2. Configuration.

1. Log into website by administrator account.

2. Go to Appearance find personal-blog 7.38, click on Settings

3: At CONFIGS area, sele.t one of options for Layout, Skin, Background to set default, (e.g: New Color), and at TOGGLE DISPLAY area, check Show Skins Menu option if you want to display Skins menu on front-end pages.

Appearance Settings

Language Configuration

This section guides you how to have multiple languages for your site. Personal Blog Theme supports both Left to Right and Right to Left languages.

1. Navigate to Configuration > Regional and Language > Languages then add new language.

Language Configuration

2. Check to enable and set default language

3. Go to Detection and selection tab

Language Configuration

4. Save configuration

From our blog

News & Events

Max
Tuesday, 03 November 2015
Max
Saturday, 24 October 2015
admin
Sunday, 15 February 2015
admin
Thursday, 08 January 2015
admin
Wednesday, 17 December 2014

Subscribe to our mailing list

Get a 20% off coupon and be the first to receive exclusive offer, and important events from WeebPal.

Connect with us

We're on Social Networks. Follow us & get in touch.

▲ Top
Subscribe

Get a 20% off coupon and be the first to receive exclusive offer, and important events from WeebPal.