educational WordPress theme Archives - CactusThemes Official blog

Reviewing some university sites using educational WordPress theme

September 29, 2015

WordPress has become a convenient tool for education organizations to create and manage their own website. In addition to taking advantage of free WordPress education blog themes, these organizations also choose to use premium ones or hire a designer to develop their own educational WordPress theme. And you may be interested in taking a deep look at their websites in order to draw inspiration for designing your site.

In this article, we review six WordPress sites of universities and colleges all over the world. Hope this will help you get more ideas.

Some university sites using educational WordPress theme

Nicholls State University This university is located in Thibodaux, Louisiana. It provides educational opportunities and services to the people in the center of Cajun country and beyond.

Nicholls State University is powered by WordPress Multisite with a custom WordPress education course theme using Suzy, SASS, and a variety of open source software in order to create a responsive education site. The Nicholls website takes advantage of WordPress’ ease of use to meet their needs.

Eastman School of Music

Eastman has been known for the high standards of scholarship, performance, creativity, and teaching. Its illustrious list of alums serves as a testament to a legacy that began around 80 years ago.

The school uses WordPress as a content management system and its site network is largely powered by WordPress Multisite with a custom educational WordPress theme and plugins.

Solo Practice University

Solo Practice University is a premium membership site powered by WordPress/BuddyPress. It focuses on building a professional and educational community for lawyers as well as law students.

With a focus on education for lawyers, this website takes advantages of the blogging features of WordPress Multisite and the social features of BuddyPress plugin. There are more than 40 virtual classrooms in the network. Each of those classes is a WordPress blog with a custom educational WordPress theme enhanced with multimedia plugins. Also, each classroom has a study group (powered by BuddyPress) where faculty and students can communicate with one another in many different ways. If students take part in the study group of any course, they will receive an automatic email notification every time a new lecture is posted for the course.

FIU College of Engineering and Computing

FIU College of Engineering and Computing (CEC) is the premier university in engineering and information science, ideally located in Miami.

This is a public research university with vibrant and student centered learning environment.

Georgia State University

Georgia State is an enterprising urban public research university. Powered by WordPress Multisite, it is a network of over 150 sites. This allows visitors to discover all information about Georgia State, from its nine colleges and institutes, more than 100 fields of study to its libraries and global engagement.

UCF College of Medicine

UCF College of Medicine is a medical school located in the United States. Its program epitomizes innovation, high-tech learning tools and a pioneering spirit to educate young doctors and scientists in a new and better way.

The UCF College of Medicine’s utilizes WordPress to develop a website emphasizing its high-tech learning environment. It uses a custom educational WordPress theme and customized backend to create a site which is easy to edit and maintain.

Featured, WordPress Themes, WordPress Tutorials

Masonry layout in designing educational WordPress theme

September 14, 2015

With the current trend, more and more WordPress websites use Masonry layout, which is favored by a lot of users. The name of this layout probably originates from the jQuery Masonry plugin which is developed by David DeSandro – a designer of Twitter.

Masonry Layout is initially used by Pinterest.com, a famous website that specializes in sharing images and other media content; so Masonry Layout is also known for the name of Pinterest Style Layout.

While Masonry layout is usually used on photography or creative websites, it is a good idea to build education WordPress sites owning this grid style. If you are a WordPress designer or developer, you should think about creating an educational WordPress theme with Masonry design. You can read the following section in order to know how to create this trending layout.

As we often see, elements in the classic layouts are often aligned with CSS floats. It means that to arrange these elements horizontally and vertically, their size will be ignored. This creates a lot of unnecessary gaps in the layout of many WordPress themes like WordPress education academy theme.

However, with the Masonry layout, elements will be arranged based on columns with no fixed height rows. In particular, it reduces the spaces and tries to fit the maximum number of elements into the rows and columns. Simply, you imagine a Masonry layout looks like the puzzle game Tetris.

Masonry layout in use

Masonry Layout can be well applied for a WordPress education academy theme to present classes’ images (Image Gallery) or online/onsite courses. This kind of layout is suitable with the websites using infinite scrolling. It is very wonderful.

How to create Masonry layouts

In order to create a Masonry layout is quite simple, you need to download and activate the jQuery Masonry plugin. Make sure that your parent folder has the following file and folders: css, js, img and index.html

This is the HTML code for a simple Masonry layout:

<!DOCTYPE html>

<html>

<head>

        <title>Masonry Layout</title>

        <meta charset=”utf-8″ />

        <meta http-equiv=”X-UA-Compatible” content=”IE=edge, chrome=1″ />

        <meta name=”viewport” content=”width=device-width, intial-scale=1.0, user-scalable=no” />

        <link rel=”stylesheet” href=”css/normalize.css” />

        <link rel=”stylesheet” href=”css/main.css” />

</head>

<body>

        …

        …

        …

        <!—end header –>

        <section class=”container”>

                <ul>

                        <li class=”item red”>

                                <a href=”https://www.behance.net/gallery/Oscar-Wilde/9330545“>

                                        <img src=”img/1.jpg” alt=”1″ />

                                        <p>Dewald Venter</p>

                                </a>

                        </li>

                        …

                        …

                        …

                </ul>

        </section>        <!– end container –>

        <!– Javascript – Jquery –>

        <script src=”js/jquery.min.js”></script>

        <script src=”js/masonry.min.js”></script>

</body>

</html>

Next, use CSS code to style the layout:

*, *::after, *::before {

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

}

a {

        display: block;

        text-decoration: none;

        color: #000;

}

ul {

        list-style: none;

}

img {

        display: block;

        max-width: 100%;        /* flexible image */

        outline: none;

        border: none;

        margin: 0 auto;         /* align center image */

}

.container {

        max-width: 1200px;

        margin: 100px auto;

        padding: 0 auto;

}

.container ul .item {

        text-align: center;

        border-radius: 10px;

        display: block;

        width: 32%;

        padding: 8px;

        margin: 7px 5px;

}

/* Responsive design */

@media screen and (max-width: 900px) {

        .container ul .item {

                width: 45%;

        }

}

@media screen and (max-width: 500px) {

        .container ul .item {

                width: 100%;

        }

}

Finally, use the below jQuery script so as to initialize the Masonry layout. Note that item selector must be elements in the container:

<script>

        $(document).ready(function() {

                var $container = $(‘.container’);

                $container.masonry({

                                itemSelector: ‘.item’

                });

        })

</script>

Conclusion

In general, it is easy to generate a masonry layout for using plugins. You can choose to use another plugin instead of jQuery Masonry plugin and create a Masonry educational WordPress theme as your liking.

BLOG, MAGAZINE, EDUCATION & VIDEO WORDPRESS THEMES

educational WordPress theme

Reviewing some university sites using educational WordPress theme

Some university sites using educational WordPress theme

Masonry layout in designing educational WordPress theme

Masonry layout in use

How to create Masonry layouts

Conclusion

About CactusThemes

Links

Find us on Facebook