Blog Design Inspiration & Templates https://speckyboy.com/topic/blog-design/ Resources & Inspiration for Creatives Mon, 17 Feb 2025 17:11:52 +0000 en-US hourly 1 https://speckyboy.com/wp-content/uploads/2024/03/cropped-sdm-favicon-32x32.png Blog Design Inspiration & Templates https://speckyboy.com/topic/blog-design/ 32 32 20+ Best Free Magazine & News WordPress Themes in 2025 https://speckyboy.com/free-wordpress-theme-magazine-news/ https://speckyboy.com/free-wordpress-theme-magazine-news/#respond Wed, 12 Feb 2025 18:02:03 +0000 https://speckyboy.com/?p=107609 Explore our collection of beautifully designed free magazine WordPress themes, perfect for news sites and online magazines.

The post 20+ Best Free Magazine & News WordPress Themes in 2025 appeared first on Speckyboy Design Magazine.

]]>
Starting an online magazine is an exciting business venture. By sharing stories on topics that inspire you, you can engage with other like-minded individuals and establish yourself as an authority in your chosen niche. It’s a great way to inspire, educate, and entertain your audience while pursuing your passion.

WordPress is the perfect CMS for launching an online magazine. Their magazine themes have been specifically designed for websites that frequently publish news or editorial content. They typically feature a grid or column-based layout that makes it easy to display multiple posts from various categories at once.

They often come with customizable widgets and modules, allowing you to create a unique and engaging user experience. Other benefits include easy post navigation, social media integration, and the ability to showcase ads or sponsored content.

The free WordPress magazine themes we have for you here are an excellent choice for bloggers, news websites, or anyone that publishes frequent content updates.

Metropolis WordPress Magazine Theme

Free to Download | Demo | WordPress Hosting

Metropolis is a magazine theme with a clean design and offers a simple yet structured layout suitable for most news, lifestyle, or entertainment content. It includes a customizable large header section, multiple widget areas, and plenty of whitespace that gives your content lots of room to breathe.

Metropolis free wordpress theme wp responsive magazine news blog

Barlog Modern Magazine WordPress Theme

Demo | WordPress Hosting

Barlog is a magazine theme with a highly unique design and layout that would be perfect for an online publication that wants to be seen as quirky. It includes three homepage layouts: grid, masonry, and a standard horizontal layout, and you can also add sliders and sidebars to each of those layouts should you want to.

Barlog Modern free wordpress theme wp responsive magazine news blog

Blogasm Minimal Magazine WordPress Theme

Free to Download | Demo | WordPress Hosting

Blogasm, with its multiple-column layouts and minimal design, would work perfectly as a creative magazine or a fashion ezine. It comes with two-, three-, and four-column home and archive page templates and various single post layouts. It also comes with a single-click demo content importer, so you can get up and running quicker.

Blogasm Minimal free wordpress theme wp responsive magazine news blog

Bloxer Magazine WordPress Theme

Demo | WordPress Hosting

Bloxer is a WordPress magazine theme that comes with an extensive array of options and layouts. It includes twelve home layouts, four archive page layouts, three different article layouts, eight header styles, and so much more. It is versatile enough to be used for any type of content. Designed using Bootstrap, and the layouts can be edited with Elementor.

Bloxer free wordpress theme wp responsive magazine news blog

Archeo Magazine-Style WordPress Theme

Free to Download | Demo | WordPress Hosting

Archeo is a simple magazine theme that has been inspired by ancient Mayan culture with its muted color palette and sans-serif typography. Sticky post support brings key articles to the top, while widget-ready zones allow you to add unique features to your article layouts. This theme lets you create a truly distinctive platform for your content.

Archeo Magazine-Style free wordpress theme wp responsive magazine news blog

Newsbreak Multi-Purpose Magazine Theme

Free to Download | Demo | WordPress Hosting

NewsBreak is a theme with a classic online magazine layout that allows you to display a lot of content all in one place. Its clean design and excellent use of space make it a great choice for content-heavy periodicals or breaking news websites.

Newsbreak Multi-Purpose free wordpress theme wp responsive magazine news blog

Femme Fashion WordPress Magazine Theme

Demo | WordPress Hosting

Femme is a stylish WordPress magazine theme for publishing lifestyle and fashion content. It includes WooCommerce support and eCommerce template layouts so you can also sell items or subscriptions on your site. It is an extensive theme that gives you every possible functionality for launching a professional online magazine.

Femme Fashion free wordpress theme wp responsive magazine news blog

Newslink WordPress Magazine Block Theme

Free to Download | Demo | WordPress Hosting

NewsLink Magazine is a WordPress block theme with minimal design and layout options. This free theme is compatible with popular builders like Gutenberg and Elementor, and also supports WooCommerce. This simple theme would be perfect for writers or publishers looking to set up their magazine and to get publishing content quickly.

Newslink Block free wordpress theme wp responsive magazine news blog

Overflow Modern Magazine WordPress Theme

Demo | WordPress Hosting

Oneflow is a lovely contemporary WordPress theme that comes with nine optionable layout styles, with each offering the perfect platform for launching a lifestyle magazine or blog. Optimized for Gutenberg, WooCommerce compatible, and even includes features such as video backgrounds and multiple header styles.

Overflow Modern free wordpress theme wp responsive magazine news blog

Marpha Elegant Magazine Theme

Free to Download | Demo | WordPress Hosting

Marpha is a free WordPress theme with a minimal design and beautiful sans-serif typography, making it perfect for both editorial pieces and personal blogs. While not packed with features like the other themes on this page, it does offer just enough to get your magazine online quickly.

Marpha Elegant free wordpress theme wp responsive magazine news blog

Travelbee Travel Blog WordPress Theme

Free to Download | Demo | WordPress Hosting

Even though Travelbee has been designed for publishing travel-or vacation-related content, it can be customized to be used for any industry or niche. This free magazine-style theme includes ten homepage layouts, nine header styles, and a multitude of customizable widgets.

Travelbee Travel Blog free wordpress theme wp responsive magazine news blog

Glob Simple WordPress Magazine Theme

Free to Download | Demo | WordPress Hosting

Glob is a traditional WordPress magazine theme with a clean design and a simple multi-column layout. Customizable layouts and multiple widget areas make this free theme perfect for various publishing needs.

Glob Simple free wordpress theme wp responsive magazine news blog

Almighty Magazine WordPress Theme

Free to Download | Demo | WordPress Hosting

The Almighty theme has a clean and minimal design and offers multiple blog layouts. The theme is fully responsive and comes with tons of options for customizing the theme and making it your own.

Almighty free wordpress theme wp responsive magazine news blog

Crowley For Bloggers & Online Magazines

Free to Download | Demo | WordPress Hosting

Crowley is suitable for any type of online magazine as well as for personal blogs. You can customize every aspect of the theme using the Live Customizer, and you can choose between several column layouts for your archive pages.

Crowley Bloggers Online free wordpress theme wp responsive magazine news blog

Semicolon Simple & Clean Magazine Theme

Free to Download | WordPress Hosting

Semicolon is a simple and clean magazine theme for WordPress. It comes with a responsive layout, elegant and easy-to-read typography, and a unique grid layout with featured posts support. You will also find several widget areas, a menu for your social profiles, and more.

Semicolon Simple Clean free wordpress theme wp responsive magazine news blog

The Next Mag WordPress Theme

The Next Mag is a feature-rich magazine and news theme for WordPress that offers features such as Ajax post-loading, several demo options, mega menus, and a responsive design.

The Next Mag wordpress theme magazine news blog

Hueman Blog & Magazine WordPress Theme

Free to Download | Demo | WordPress Hosting

The Hueman theme has a modern design paired with the standard column layout. You can add up to two sidebars and insert widgets such as most popular posts, recent comments, social media icons, and more. It also includes multiple menu locations.

Hueman free wordpress theme wp responsive magazine news blog

Brilliant Stylish WordPress Magazine & Blog Theme

Free to Download | Demo | WordPress Hosting

The Brilliant is a stylish WordPress theme that has a stunning slider on the homepage that’s perfect for sharing your latest posts. You will also have the ability to showcase your post categories, and there are several customization options to make this theme your own.

Brilliant Stylish free wordpress theme wp responsive magazine news blog

Madd Magazine WordPress Theme

Free to Download | Demo | WordPress Hosting

The Madd Magazine offers a traditional online magazine layout with plenty of widgets for popular posts, categories, advertising space, and more. It’s fully responsive and has the ability to use videos in sliders.

Madd free wordpress theme wp responsive magazine news blog

Cerauno Clean Magazine Theme

Free to Download | Demo | WordPress Hosting

Cerauno Clean free wordpress theme wp responsive magazine news blog

Edge WordPress Theme

Free to Download | Demo | WordPress Hosting

The Edge theme is perfect for blogs and magazines. It was designed to load fast and includes SEO optimization features as well as responsive design and multiple layout options.

Edge free wordpress theme wp responsive magazine news blog

Bootstrap Blog Lifestyle Magazine Theme

Free to Download | Demo | WordPress Hosting

This free theme is based on the popular Bootstrap framework which means it will be responsive out of the box. It also offers features such as an extensive theme options panel, various layout options, and WooCommerce integration.

Bootstrap Lifestyle free wordpress theme wp responsive magazine news blog

Conclusion

When it comes to your online magazine, an attractive design that offers a pleasant reading experience is crucial.

Make your magazine the best it can be with one of the themes in this collection that offer beautiful layouts, legible, and elegant typography, and a responsive design that looks great on all devices.

Magazine & News WordPress Theme FAQs

  • What Are Magazine WordPress Themes?
    They are WordPress themes that have been designed specifically for digital magazines, news sites, and content-rich blogs.
  • Who Should Use Magazine WordPress Themes?
    They are ideal for online publishers, news editors, bloggers, or anyone looking to create a website with a magazine-style layout to display articles, news, and multimedia content.
  • Can These Magazine Themes Be Customized?
    Yes, they all come with customizable options, such as color schemes, font choices, and layout configurations, allowing you to tailor the site to your specific needs and brand identity.

The post 20+ Best Free Magazine & News WordPress Themes in 2025 appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-wordpress-theme-magazine-news/feed/ 0
20+ Best Free WordPress Personal Blog Themes in 2025 https://speckyboy.com/free-wordpress-themes-personal-blog/ https://speckyboy.com/free-wordpress-themes-personal-blog/#respond Fri, 08 Nov 2024 17:46:47 +0000 https://speckyboy.com/?p=107620 Looking for a free WordPress theme for your personal blog? Check out our collection of handpicked themes that are perfect for personal bloggers.

The post 20+ Best Free WordPress Personal Blog Themes in 2025 appeared first on Speckyboy Design Magazine.

]]>
While not as popular as it once was, blogging is still something everyone should consider doing. It has numerous benefits, including sharing knowledge and expertise, building authority and credibility in a specific niche, establishing a community and engaging with readers, improving writing and communication skills, and generating income through advertising or sponsored content.

WordPress is our choice for blogging. It’s a widely-used platform with a large and supportive community, making it easy to find resources and assistance. It’s also highly customizable, with a vast library of plugins and themes freely available.

When it comes to WordPress blogging themes, there are certain things you should be looking for. They should be responsive, customizable, and have features designed specifically for blogging, such as post organization and author information. It should also have widget areas, a commenting system, be compatible with popular plugins, and fast loading for user experience and search engine rankings.

Ultimately, the specific theme features needed will depend on the blogger’s goals and needs for their website. The free themes we have for you below should help narrow your search for a WordPress blogging theme. Happy blogging!

Nuria Responsive Blogging Theme

Free to Download

Nuria is suitable for a variety of personal blogs. It features a minimal design paired with gorgeous typography. It’s easy to customize and comes with built-in SEO optimization, loads fast, and has several widget areas.

Nuria free wordpress theme wp responsive personal blog blogger blogging

Bootstrap Blog Theme

Free to Download

The Bootstrap Blog theme is a lightweight, minimal, and free WordPress theme. You will find plenty of customization options, and several layout options, which include a slider layout as well as a standard blog layout, WooCommerce integration, and more.

Bootstrap free wordpress theme wp responsive personal blog blogger blogging

Norge Responsive Blog WordPress Theme

Norge combines minimalist design with clean typography, which makes for an enjoyable reading experience on all devices. The theme has a sidebar and full-width layouts, numerous widgets, shortcodes, and support for different post types.

Norge wordpress theme personal blog blogger blogging

Boxstyle Personal Blog Theme

Free to Download

If you’re looking for a personal blog theme with a unique design, consider Boxstyle. It features a unique boxed layout with social media icons in a colorful sidebar, so it’s sure to make your blog stand out.

Boxstyle Personal free wordpress theme wp responsive personal blog blogger blogging

Ezy Blog Theme

Free to Download

The Ezy blog theme is compatible with Elementor and Gutenberg, which means you will have no problems creating a unique layout for your pages. On top of that, the theme includes features such as a modern and creative design, SEO optimization, a slider section, featured post columns, and plenty of customization options.

ezy free wordpress theme wp responsive personal blog blogger blogging

Lightly Responsive WordPress Theme

Free to Download

The Lightly theme is a perfect choice if you want your blog to look like an online magazine. It has a grid-based layout and bold typography that makes your content pop. The theme is also fully responsive and easy to customize.

Lightly free wordpress theme wp responsive personal blog blogger blogging

Lovecraft Two-Column WordPress Blog Theme

Free to Download

The Lovecraft theme comes with a stunning header image which allows you to easily give your readers an immediate glimpse into your personality. The theme has a standard two-column layout and allows you to customize the colors, upload your own logo, and more.

Lovecraft free wordpress theme wp responsive personal blog blogger blogging

Good Responsive Blog Magazine Theme

Free to Download

The Good theme has an interesting grid-based layout on the homepage. It allows you to upload your own logo and set your own brand colors. The theme is SEO-friendly and fast loading.

Good free wordpress theme wp responsive personal blog blogger blogging

Olsen Light Blogging Theme for WordPress

Free to Download

Try the Olsen Light theme if you’re planning on launching a fashion or beauty blog. With an elegant and feminine design, paired with custom widgets, customization options, and SEO-friendly code, the Olsen theme has everything you need to create a captivating blog.

Olsen Light free wordpress theme wp responsive personal blog blogger blogging

Versaille Personal Blog WordPress Theme

This theme has a unique curvy design on the homepage and includes an additional page layout for your portfolio. You can customize the theme using the built-in Live Customizer.

Versaille wordpress theme personal blog blogger blogging

Eighties Theme One-Column WordPress Theme

Free to Download

Eighties is a bold, one-column theme that’s perfect for personal blogs. The theme supports various post formats, and you will also find large featured images that make it easy to share your stories visually.

Eighties One-Column free wordpress theme wp responsive personal blog blogger blogging

Stylizer Blog Theme

Free to Download

The Stylizer theme is perfect for anyone looking for a unique design. The theme is responsive, so it will look great on all devices, and it also comes with features such as related posts and post navigation, dark and light color switches, and more.

Stylizer free wordpress theme wp responsive personal blog blogger blogging

Hoffman Minimal WordPress Theme for Bloggers

Free to Download

The Hoffman theme is a beautiful minimal WordPress theme that’s best suited for personal bloggers or authors. The theme puts a strong focus on great typography and offers a responsive design and beautiful galleries.

Hoffman Minimal free wordpress theme wp responsive personal blog blogger blogging

Curver Personal Blog Theme

Free to Download

As the name suggests, Curver is a personal blog theme with a uniquely colorful and curved look. The theme includes a featured post slider, a standard or list blog layout, and a unique author header profile.

Curver free wordpress theme wp responsive personal blog blogger blogging

Arba WordPress Blog Theme

Free to Download

Arba is a free WordPress theme for personal blogs. It has a minimal design and a simple layout. The theme is also fully responsive and uses gorgeous typography for a better user experience across all devices.

Arba free wordpress theme wp responsive personal blog blogger blogging

Risa Personal Responsive Blog Theme

Free to Download

The Risa theme features a clean and classy look, offers a number of different customization options, and is SEO-friendly and translation-ready. On top of that, the theme includes support for various post formats: Standard, Aside, Image, Link, Gallery, and more.

Risa free wordpress theme wp responsive personal blog blogger blogging

Signy A Personal Blog WordPress Theme

Try the Signy theme if you’re a freelancer or creative professional that wants the ability to showcase your past projects on top of a blog. The theme comes with four different homepage layouts and six unique portfolio layouts.

Signy wordpress theme personal blog blogger blogging

Invenio Tumblog-Style WordPress Theme

Free to Download

The Invenio theme mimics the look of Tumblr blogs, so it’s a great choice if you’re going for a more unique design. Invenio is also responsive and has support for multiple post formats.

Invenio Tumblog-Style free wordpress theme wp responsive personal blog blogger blogging

Upright Responsive Blog Magazine Theme

Free to Download

The Upright free theme is a grid-like theme with a strong focus on bold imagery., It supports a variety of content. You can create galleries and showcase past projects, and allow your visitors to enjoy your content on all devices thanks to the responsive design.

Upright free wordpress theme wp responsive personal blog blogger blogging

Hemingway Two-Column Theme for Bloggers

Free to Download

The Hemingway theme features beautiful typography and a standard two-column layout. The theme is fully responsive and has a minimal and clean design. You can easily customize the colors and fonts.

Hemingway Two-Column free wordpress theme wp responsive personal blog blogger blogging

Editor Theme Personal Blogging Theme

Free to Download

The Editor theme is geared toward personal bloggers and photobloggers. It includes big typography and images, plus a tab-based sidebar with a social links menu, featured posts, and a site logo.

Editor free wordpress theme wp responsive personal blog blogger blogging

Popster Blogging Theme for Writers & Authors

Free to Download

The Popster theme has an elegant layout and design that’s focused on beautiful typography. The theme is SEO-friendly and optimized to load fast, and it’s also responsive and translation-ready.

Popster free wordpress theme wp responsive personal blog blogger blogging

Vito Blog Theme

Free to Download

The Vito theme is sure to grab the attention of your readers, thanks to stunning animations and a minimal design that lets your posts stand out. The theme has a standard, two-column layout.

Vito free wordpress theme wp responsive personal blog blogger blogging

Justread Minimal WordPress Blog Theme

Free to Download

The Justread theme focuses on improved reading experience across all devices and fast loading times. It features an elegant blog layout and sticky sharing buttons so your readers can easily share your content.

Justread Minimal free wordpress theme wp responsive personal blog blogger blogging

WordPress Blog Theme FAQs

  • What Are Blogging WordPress Themes?
    They are themes that have been designed with layouts for blogging content. They focus on personal style, storytelling, and content presentation.
  • Who Should Consider Using a Personal Blog WordPress Theme?
    They are perfect for individual content creators, writers, hobbyists, or anyone looking to share their thoughts, experiences, or expertise through a personal blog.
  • Why Use a Blog Theme for Your WordPress Site?
    They offer designs that highlight your content and personal brand. They provide an engaging, reader-friendly layout, essential for capturing and retaining your audience’s attention.
  • Do These Themes Support Different Types of Media?
    Typically, yes. Personal blog themes usually support various media types, including text, images, videos, and audio, allowing for a rich, multimedia blogging experience.

Perfect Starting Point for Your Personal Blog

The right personal blog theme will make it easy for your visitors to enjoy your content on any device. With features such as improved typography, responsive design, and stunning featured images, the themes in this collection are a perfect starting point for your personal blog design.


The post 20+ Best Free WordPress Personal Blog Themes in 2025 appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-wordpress-themes-personal-blog/feed/ 0
10 Free Personal Blog Web Templates for Photoshop https://speckyboy.com/free-blog-magazine-psd-web-templates/ https://speckyboy.com/free-blog-magazine-psd-web-templates/#respond Tue, 17 Sep 2024 15:07:04 +0000 https://speckyboy.com/?p=105090 Designing a blog doesn’t have to be difficult when you have one of these free PSD templates that have been designed specifically for bloggers.

The post 10 Free Personal Blog Web Templates for Photoshop appeared first on Speckyboy Design Magazine.

]]>
Bloggers are constantly searching for ways to make their blogs stand out from the crowd and present their writing in a visually appealing way.

Fortunately, designing a blog layout doesn’t have to be a tedious task when you have access to hundreds of high-quality pre-made PSD templates designed specifically for bloggers. These templates provide a starting point for creating a blog that’s both aesthetically pleasing and user-friendly.

If you’re searching for design inspiration, check out this collection of the best free personal blog and magazine layouts. With these free PSD templates, you can let your creativity flow and customize the design in Photoshop to fit your brand and message.

These pre-made layouts can save you considerable time and effort, allowing you to focus on creating high-quality content that engages your readers.

The Free DO PSD Web Templates

Try the Free DO template if you need a template that features a soft color palette and subtle typography. This template comes with ten files that can be used for creating a business, finance, fashion, or travel blog.

The Free DO blog magazine web design layout adobe photoshop template free psd format

Alohan Fashion Magazine & Shop PSD Template

The Alohan template makes a great starting point for a fashion blog, but it can also be used for lifestyle blogs. It has a colorful, trendy design, and it even includes a shop template.

Alohan Fashion Magazine Shop web design layout adobe photoshop template free psd format

Gute Minimalist Personal Blog PSD Template

The Gute template features a fresh and clean design that would be perfect for many types of brands. The template comes with a total of 27 web page layouts.

Collins Minimalist Personal Blog web design layout adobe photoshop template free psd format

Noemi Elegant Blog PSD Web Template

The Noemi template features an elegant, feminine design and allows you to create a homepage with a large header that’s perfect for sharing your blog’s mission statement or including a call to action.

Noemi Elegant Blog web design layout adobe photoshop template free psd format

Magazine Magazine PSD Template

This is another magazine-based template that features a more standard layout. The template allows you to showcase plenty of content without making your pages appear cluttered. The template consists of 20+ layered PSD files that are all well-organized.

Magazine web design layout adobe photoshop template free psd format

Yomac Magazine & Blog PSD Template

The Yomac template has a grand total of 12 PSD files. This template combines a minimalist design with excellent readability and usability. It’s a well-organized template, so you can easily customize everything you need.

Yomac Magazine Blog web design layout adobe photoshop template free psd format

Gridzilla Free Magazine Layout PSD Template

As the name suggests, the Gridzilla template has a grid-based layout that allows you to showcase featured posts from a variety of categories. The template includes several well-organized PSD files and can be customized quickly.

Gridzilla Magazine web design layout adobe photoshop template free psd format

Subtlety Light & Minimal Blog Template for Photoshop

The Subtlety has a fresh and modern design. The template includes all the files you’ll need to design a complete blog website, as well as fonts, icons, and other elements that were used to create it.

Subtlety Light Minimal web design layout adobe photoshop template free psd format

Transworld Skateboarding Free Magazine & Blog PSD Template

This template has a trendy design that’s perfect for a modern magazine. The template is an ideal choice for a lifestyle blog and contains several PSD files that you can easily customize.

Transworld Skateboarding Magazine Blog web design layout adobe photoshop template free psd format

Cyclone Magazine Web Template

The Cyclone is a great starting point for designing a travel blog. The template features stunning full-width imagery and a clean grid-based layout. You’ll find several well-organized PSD files that are easy to edit.

Cyclone Magazine web design layout adobe photoshop template free psd format

Personal Blog PSD Web Template FAQs

  • What are personal blog PSD web templates?
    They are pre-designed layouts for personal blogs, created in Photoshop and saved as PSD files. They provide a framework for the design of a blog, including elements like headers, footers, and content areas.
  • Who will find these PSD web templates helpful?
    They’re perfect for bloggers, content creators, aspiring web designers, or anyone looking to start a personal blog with a professional design without starting from scratch.
  • Do I need special skills to use these PSD templates?
    Basic knowledge of Photoshop is helpful. These templates are designed to be user-friendly, but knowing how to navigate and edit in Photoshop will make the process easier.
  • How customizable are these PSD templates?
    They’re quite flexible. You can customize colors, fonts, images, and layout elements to match your personal style and blog’s theme.
  • What do I need to start using these PSD templates?
    You’ll need a computer with Photoshop installed. Once you have the template, you can open it in Photoshop and start editing to fit your needs.

Conclusion

Breathe new life into any blog with these creative and unique PSD templates. From fashion and travel blogs to personal blogs and magazines, there is no shortage of templates, and this roundup only scratches the surface. It is, however, a good starting point when you need to come up with a blog design quickly.

More Free Web Design PSD Templates

The post 10 Free Personal Blog Web Templates for Photoshop appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-blog-magazine-psd-web-templates/feed/ 0
The Key Elements to Look for in a WordPress Blogging Theme https://speckyboy.com/wordpress-blogging-theme/ https://speckyboy.com/wordpress-blogging-theme/#comments Sun, 27 Jan 2019 08:18:28 +0000 http://speckyboy.com/?p=58303 Let’s face it, the main reason individuals and companies use the WordPress platform is for the blogging capabilities. Sure, it’s a content management system with the functionality to provide everything...

The post The Key Elements to Look for in a WordPress Blogging Theme appeared first on Speckyboy Design Magazine.

]]>
Let’s face it, the main reason individuals and companies use the WordPress platform is for the blogging capabilities. Sure, it’s a content management system with the functionality to provide everything from an eCommerce store to a reservation system, but WordPress started as a blogging platform, and it still continues to perform as the best solution out there.

It’s the reason so many WordPress theme developers opt to put a strong focus on blogging, with high-resolution featured images, clean interfaces and interesting typography options. Albeit cliche, content is king, and it’s tough to argue against the notion that people are most interested in WordPress for the blogging prowess.

However, just like with all WordPress themes, some of those built for blogging may not end up as beneficial as you initially thought. Since the WordPress theme market is open to just about anyone, you may find that a blogging WordPress theme doesn’t have all the features you wanted. That’s why I’ve put together this list of the ten primary elements you should look for in a blogging WordPress theme.

The best themes range in target markets, but you can assume that although a personal blogger may want a more minimalist interface, they are looking for similar features as a small or even large business would want. That said, keep reading to learn about the elements and features to look out for in your next blogging theme.

Mobile Responsive Design

With all the changes recently implemented by Google, it’s clear that a mobile responsive interface is one of the first areas you want to look into when choosing a blogging WordPress theme.

responsive_design

The key here is to test out the theme on your mobile devices before buying it. You can also go to Google’s Mobile-Friendly Test Tool, copy in the URL from the theme demo and see whether or not it performs well on mobile devices.

Drag and Drop Page Builder

A drag and drop page builder is a tough feature, because many of these tools don’t work the way they are intended. However, solutions like Visual Composer and the Themify Builder provide wonderful tools for you to click and drag modules and simply drop them on your pages.

drag_and_drop_editor

For example, you may want to put an image gallery somewhere on your homepage, or even implement an area for people to follow you on different social networks. With drag and drop builders you can drag the pre-built elements and watch them get published in a live view. The point of this is not to get rid of web designers, but to make it easier for beginners to design their own blogs and to speed up the client site creation process for actual developers.

Full Social Sharing Experience

Yes, buttons that lead to your social pages, along with buttons for your visitors to share content. But what’s the point of adding another plugin when you could have the functionality built into your WordPress theme?

social_sharing

I’ll give you two reasons why this is a huge deal for bloggers. One, social sharing and link-to buttons are often branded for the particular theme when sold along with it. This means that you don’t have to use any custom CSS or go through a plugin’s varying designs to find the right ones. Not to mention, it’s best to keep your plugin count to a minimum, and with a simple feature like this, there’s no reason it shouldn’t be included with the entire blogging theme.

Not to mention, some of the most important parts of a blog are the social sharing buttons, considering you can build up social credibility and even convince people to share your content on whatever social networks they play around on.

High Resolution Featured Images

The best blogs use images, and the images that mean the most in terms of convincing people to click through on your articles are the featured images. It’s wise to test a theme to see if the featured images look good for the type of content you’re trying to offer. Does the theme have thumbnail versions of your featured images to prompt people to click through on articles? Are your high-resolution featured images supported, or are you going to lose quality after the upload?

high_res_featured_images

Previews for Your Content

Along with your post title and featured image, the other area that moves users to click onto your content and continue reading is the preview or description. You’ll notice that many blogs have a rolling feed of their most recent content, and underneath the featured images are small clips of the written content that is to come. A setup like this is imperative because most visitors will read those previews before moving onto the entire article.

content_preview

Minimal Clutter Around Your Content

For some reason bloggers find it necessary to fill up their feeds with ads, affiliate links and widgets, pulling the visitors away from the stuff that means the most: Your content.

minimal_clutter

When looking for a solid blogging theme, take into consideration what an actual article post looks like. Many themes provide the ability to change the post format/style, which is useful for clearing away a sidebar or maximizing the amount of white space; however, your posts will end up cluttered and unreadable if this is not the case.

I recommend looking for a theme that’s built with minimalism in mind. If the post demos look like they are way too congested, find another theme.

Multi-Lingual Support

Another goal for bloggers is to reach out to the international community. Let’s say you write a post in English, but you know that some folks who speak Italian may get a kick out of your content as well. Since they don’t speak your language, there’s a small chance that they will find your content or even want to waste their time with it.

multi_lingual_support

A blogging theme with multi-lingual support ensures that your site can be presented in one, two or multiple languages. When someone lands on your page, they have the opportunity to translate it into their own language to improve the overall user experience for people who don’t speak your language.

Widgetized Sidebars

The widget is a strong friend to the blogger, since these handy little modules let you drag and drop elements in your sidebars, footers, and sometimes your header areas.

widgets_and_related_posts

WordPress comes with various widgets, but you can consider installing plugins with widgets as well. From related post widgets to author boxes, you can bet that if you can’t find the functionality on your theme, it is available somewhere else in a plugin or widget form. With that, however, you must ensure that your blogging theme has the functionality to support widgets in its sidebars and footers.

Ways to Collect Emails

Organic search engine traffic is generally a goal when blogging, but with all the competition your best bet, to get people to visit your blog, is through an email list and newsletter. Quite a few free plugins exist for this, but their formatting options are poor.

newsletter_subscribe_form

With blogging themes that provide email subscription forms, you can typically assume that the designer made it so that it looks stylish and fits in with the theme. Not to mention, the built-in email subscription forms tend to work as widgets, for placing anywhere you want on your site.

Numerous Post and Page Formats

Do you think your blog visitors want to see the same format or style for every blog post you publish? Not only is it boring for readers, but repetitive page and post layouts are bad business, since a landing page layout is proven to boost sales, and a contact page layout is essential for bringing in inquiries.

Finished!

From responsive designs to page formats, your blogging prowess starts with the WordPress theme you initially decide on. Therefore, save this post and remember to check back with it when shopping around.

If you have any questions about the primary elements to look for in a WordPress blogging theme, let us know in the comments section below.

The post The Key Elements to Look for in a WordPress Blogging Theme appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/wordpress-blogging-theme/feed/ 2
Current Design Trends for Blogs and Online Magazines https://speckyboy.com/blog-design-trends/ https://speckyboy.com/blog-design-trends/#comments Mon, 28 Aug 2017 08:51:53 +0000 http://speckyboy.com/?p=44880 Blogs on the Internet are becoming are easiest way to consume news & information. Many web designs are responsive which allows reading on mobile devices, and you aren’t even paying...

The post Current Design Trends for Blogs and Online Magazines appeared first on Speckyboy Design Magazine.

]]>
Blogs on the Internet are becoming are easiest way to consume news & information. Many web designs are responsive which allows reading on mobile devices, and you aren’t even paying for the privilege. The popularity of simple open source CMS’ like WordPress makes it even easier to launch your own project online.

In this guide I want to look at some WordPress themes as examples for current blogging design trends. By studying these current trends designers may also speculate potential changes for the future. The Internet has grown so quickly in a very short time period – who can really know for certain what the next phase will be?

You might also like to view this gallery of beautifully designed personal blog websites.

Obscure Homepages

Something that has always caught my attention is the uncertain design pattern on blog homepages. Often you will find some large heading panel with featured articles, possibly rotating or shifting between stories. There is also usually a set of different cascading post displays focused on categories, recent topics, popular articles, or even specific authors.

valenti wordpress premium theme design wp

The new Valenti theme is a good example of this complex homepage layout. The first 5 posts are displayed in a block-level thumbnail widget. But you’ll also find a small image rotator beneath this, followed by some latest posts and then columns of post categories. In some cases you will find yourself way too confused at the mass of content strewn across the page.

When considering your homepage design make sure that it’s easy to follow along. As a reader myself I can imagine being too overwhelmed by the complexity and just leaving a website before reading anything. But if you plan well then you may be surprised how many people actually like the semi-disheveled style of skimmable homepages.

Trending Posts

Popular breaking news and trending topics are sometimes displayed as news tickers. These will show one post headline at a time for just a few seconds before moving onto the next one. Definitely check out the header on Manshet to get a better conceptual idea.

manshet premium wordpress theme homepage breaking news

This design is really cool because it features the news ticker along with a slideshow of breaking news. This has post thumbnails to draw more attention than just plain text. But all of these elements appear towards the top of the page. It’s an area above-the-fold which visitors will notice right away.

I feel like this idea only works on a blog or magazine with a lot of content. Meaning typically more than 1-2 posts each day. If your blog is constantly publishing news articles then you need a method to differentiate the more popular stories from milder ones. These top headline sliders and news tickers are definitely one trendy solution.

Prominent Author Features

Weblogs have always been partially about the author behind the website. Readers who fall in love with a blog eventually try to learn more about the writer. blogs do try to make this a lot easier with more featured details promoting the authors themselves.

You will notice articles that include a full author bio, links to their website, and even other external links onto Twitter or Facebook. An example article from the Hickory theme includes a direct link to the author’s Twitter account underneath the post headline. It also directs to the author page itself listing all of their articles on the site.

hickory theme wordpress premium design author info

Giving readers a more intimate connection with the staff helps to build a small community around your website. Readers may come back just to check out a certain author because they really enjoy their articles. Over time you can build a reputation for your website within dynamic niches for really powerful content. Try including other social links onto Tumblr, Pinterest, Instagram, or whatever your writers may benefit from promoting.

Relatable Footer Content

Every website needs a footer even if it’s just one line. Sometimes this will basically focus on copyrights or simple internal page links. But an online blog is such a different beast altogether that you have to marvel in some of these footer designs.

intouch wordpress premium theme design footer api links

The screenshot above is from an example theme called InTouch built for WordPress. Notice that these are most likely footer widgets, but they format perfectly into columns based on the responsive design. You can definitely include simple elements like tag clouds, site information, and links to contact/company pages.

But also notice the connection into 3rd party services like Instagram or Flickr. You can pull data from your own account using APIs and display these into widgets on the page. A website’s footer may be the best placement because it won’t get in the way of your main content or advertising space. The goal is to make your footer relatable to the viewer. Make them feel like your blog is just a typical website, big or small, and present content which will keep them engaged for a little while longer.

Reviews & Ratings

I think that any product in regards to movies, music, gaming, food, books, has the ability to be reviewed. People thinking of buying or consuming something may want to know what your blog thinks of it first. And so internally-powered review features have become very prominent within online blogs.

These reviews typically come from the author who may leave some positive and negative feedback. It could be presented in a 5-star rating, or in a numerical system which talks about different properties(acting, directing, screenwriting, music, etc).

video game review flavor theme premium wordpress

It’s interesting because this theme also allows users to vote on each of the stories as well. This means any review post has the author’s rating along with the collective readership’s rating value. If your blog has a tremendous audience it may be worthwhile to get into reviewing products more frequently. It can sometimes lead to deals with companies or Internet publishers who need market exposure on their new product/service.

Another fantastic design example by Industrial Themes is called Steam. These reviews, much like the other theme, include ratings for various aspects of the product itself. And it also features little trophies or detail icons which explain the type of content in the product.

steam magazine theme wordpress premium screenshot review article

For one example looking at this video game review you’ll find icons for details like underwater gameplay and multiplayer support. This is a really cool feature but it’s not always going to be necessary, depending on how many things you review. Sometimes it is easier for a blog to keep it simple and provide one single rating value – then leave all the detailed explanations for the article content itself.

Regardless, it should be understood that blogs are adopting this review & rating system, along with simpler interfaces like total view counts or total likes on a single article(internal likes not Facebook likes). If you feel these added features could benefit your blog or magazine then definitely find some time and build it out! You may be surprised how many people are willing to interact with your articles, leave feedback, and even return again sometime in the future to read more.

Closing

I know these are some basic ideas since they’ve been coded into websites for a long time. But we have never seen online blogs growing so quickly – blogs which also never had their own print version in retail stores.

I do hope these suggestions may help webmasters or WordPress developers who are looking to build a useful product. Similarly, if you have any questions or comments on the topic feel free to share with us in the post discussion area below.

The post Current Design Trends for Blogs and Online Magazines appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/blog-design-trends/feed/ 4
20 Creative Personal Blog Web Designs for Inspiration https://speckyboy.com/20-creative-personal-blog-web-designs/ https://speckyboy.com/20-creative-personal-blog-web-designs/#respond Fri, 28 Feb 2014 07:42:04 +0000 http://speckyboy.com/?p=21965 As clearly and concisely defined by Wikipedia, a blog is ‘a personal journal published on the World Wide Web consisting of discrete entries (“posts”)…’. But when you do read back...

The post 20 Creative Personal Blog Web Designs for Inspiration appeared first on Speckyboy Design Magazine.

]]>
As clearly and concisely defined by Wikipedia, a blog is ‘a personal journal published on the World Wide Web consisting of discrete entries (“posts”)…’. But when you do read back that definition you soon realize how far we have drifted away from it, especially over the last couple of years and particularly within the design community.

Once-upon-a-time a blog was a place where you could express your opinions, your thoughts, and your ideas. Nothing more, nothing less. Just your personal writing.

Nowadays though, a blog is viewed as many things (a marketing tool, a means for businesses to communicate with customers, a portfolio, an eCommerce solution, and on, and on…) and very rarely do you come across a new blog that fits into the definition I highlighted above.

Yes, I know that the web is continually evolving and that trends do come and go. But when I was researching this gallery, I found myself yearning for a bygone era when discovering a new personal blog, especially within the design community, could often be exciting and educational.

Anyway, back to this post, the good news is that I did manage to find 20 blogs, mainly from the design community, that not only do they meet the criteria set out by the Wikipedia definition above, but that are also beautifully and uniquely designed as well. Just as ‘blogs’ should be.

Visual Idiot

Visual Idiot Personal Blog Web Design Inspiration UI

Rivers & Robots

Rivers & Robots Personal Blog Web Design Inspiration UI

Karl Fernandes

Karl Fernandes Personal Blog Web Design Inspiration UI

Stuart Frisby

Stuart Frisby Personal Blog Web Design Inspiration UI

Janna Hagan

 Janna Hagan A Student Guide to Web Design Personal Blog Web Design Inspiration UI

Hardly Code Blog

Hardly Code Blog Personal Blog Web Design Inspiration UI

The Mavenist

The Mavenist Personal Blog Web Design Inspiration UI

Thomas Aull

Thomas Aull Personal Blog Web Design Inspiration UI

Russ Maschmeyer

Russ Maschmeyer Personal Blog Web Design Inspiration UI

Massimo Dutti

Massimo Dutti Personal Blog Web Design Inspiration UI


The post 20 Creative Personal Blog Web Designs for Inspiration appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/20-creative-personal-blog-web-designs/feed/ 0
Ghost – Bringing blogging back to WordPress https://speckyboy.com/ghost-bringing-blogging-back-to-wordpress/ https://speckyboy.com/ghost-bringing-blogging-back-to-wordpress/#comments Wed, 14 Nov 2012 15:50:35 +0000 http://speckyboy.com/?p=29706 It is a well known fact that WordPress is the most popular CMS today, and it powers websites from different niche and genres. In fact, even though it once began...

The post Ghost – Bringing blogging back to WordPress appeared first on Speckyboy Design Magazine.

]]>
It is a well known fact that WordPress is the most popular CMS today, and it powers websites from different niche and genres. In fact, even though it once began as a blogging tool, WordPress today has risen to great heights, catering to the needs of news websites, online portfolios, eCommerce sites as well as corporate websites, among many others.

However, in the light of such diverse uses, you have to wonder: has WordPress out-grown its blogging platform status? John O’Nolan has attempted to answer this question by talking about his new project called Ghost.

What is Ghost all about?

All can be traced back to Matt Mullenweg’s quote at State of the Word 2012: “66% of [users] said they use WordPress as a CMS and not as a blog.”

While there is no denying the fact that the beauty of WordPress lies in its ability to serve a wide audience, there is also a downside attached to it: WordPress is becoming more and more CMS-like, and its real prowess of being a publishers’ and bloggers’ best friend is getting lost amongst all this.

Ghost Logo

Of course, WordPress is probably better than most CMSs. However, it probably is no longer custom-made for blog publishing, and this very characteristic (or lack thereof) urged O’Nolan to com up with a solution, and he came up with Ghost.

Alright, so what exactly will Ghost do?

Ghost Dashboard

The initial plan for Ghost was to fork WordPress itself. Here is how O’Nolan describes his plan:

  1. Revamped Dashboard and Interface: Ghost, according to O’Nolan, would have a Dashboard built for content publishers and bloggers. Similarly, the interface will make life easier by allowing you to “manage posts by actually seeing them”.
  2. Writing Screen: Ghost is said to have a writing screen with a split view. But that’s not all. Unlike WordPress, you will not have to hop between keyboard and mouse to apply formatting. Plus, if you fancy Markdown, you’re gonna love this even more!
  3. Less Tweaks: Ghost aims to do away with stuff such as admin color schemes, QuickPress, PressThis, Email-to-Post, Remote Publishing, etc.
  4. No Native Commenting System: Ghost will have support for third-party systems, such as Disqus or Livefyre, but by its own accord, it will not have a native commenting mechanism.
  5. Limited Backwards Compatibility: I’ll let O’Nolan speak about this himself, “Ghost would have cut-off points with major versions, allowing core developers to remove old code from the database and evolve the platform to allow it to improve. No one expects an app written for OSX 10.4 Tiger to work on OSX 10.8 Mountain Lion.”
  6. Lesser Plugins: Again, another step towards being less bloated.
  7. Truly, Open Source: The development would be open, and Ghost will be an entirely open source project. Since O’Nolan wrote that “Ghost would be free as in Mozilla, not as in Automattic”, I suppose Ghost may probably have an MPL, not GPL.

And… how well has Ghost been received?

Owing to the volume of positive feedback O’Nolan has received, he has stated that he will most likely pursue the development of Ghost and bring it into existence. Which is very exciting!

Ghost Dashboard

As of now, on the basis of suggestions from others and feedback to his initial idea, O’Nolan has talked about three potential routes:

  • As a WordPress Fork: This has been the initial concept: make use of the WP codebase, and evolve it into a project that serves content creators.
  • As a WP Plugin: Probably change /wp-admin to /ghost — easy to deploy and create, and doesn’t offend WordPress loyalists either.
  • As a New Entity: To be fair, if you are forking WordPress, you’ll end up changing the codebase too much, and if you are really going to do that much editing, you might as well create a new software! (O’Nolan attributes this option to the responses at Hacker News).

Once again, it is still a concept, and the final route is obviously likely to change.

To Sum it Up…

Confession: I like the idea of Ghost.

Reason: Don’t get me wrong; I love WordPress! But of late, I’ve been favoring Habari and Wolf over WordPress for some of my smaller web projects. Why? Simply because I find the WordPress editor to be super-annoying at times, and the CMS itself is only one step short of becoming another semi-bloated Drupal. For running stuff such as a personal blog, WordPress is no longer my first choice.

What do you think of Ghost? Share your thoughts with us in the comments!

The post Ghost – Bringing blogging back to WordPress appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/ghost-bringing-blogging-back-to-wordpress/feed/ 3
HTML & CSS Blog Layout – Theme Implementation for WordPress https://speckyboy.com/html-css-blog-layout-theme-implementation-for-wordpress/ https://speckyboy.com/html-css-blog-layout-theme-implementation-for-wordpress/#respond Wed, 11 Jan 2012 01:01:22 +0000 http://speckyboy.com/?p=18945 In this tutorial, I’ll teach you how to adapt a simple HTML blog layout into a WordPress theme. We’ll be using this static page as starting point. Grab the code...

The post HTML & CSS Blog Layout – Theme Implementation for WordPress appeared first on Speckyboy Design Magazine.

]]>
In this tutorial, I’ll teach you how to adapt a simple HTML blog layout into a WordPress theme. We’ll be using this static page as starting point.

Grab the code from Github

The Brilliante Layout project source code for this theme is available on Github, including the dummy content for posts, pages and such. We won’t start from scratch, we’re building it using our static version base.

I suggest you to follow along snippet by snippet, but, if you happen to be as lazy as me, the data folder will help you getting up and running with the content data, it also includes instructions in case you don’t know how to import it to your fresh WordPress installation.

01

Files and structure

First, we’ll need to adapt our previous static version structure to the new WordPress theme conventions. Like checking if the site still works after changing the extension to the index.html to PHP, moving stylesheets, javascripts, images and URLs code relations.

The Brilliante Layout project source code for this theme is available on Github

We could kick out a simple theme by just serving an index.php and a style.css, but we’ll need more than that to give Brilliante Layout all the WordPress shine we can. There’s a good graphic you should check to understand the template hierarchy.

Codex is your friend

When developing a theme, we are basically choping up HTML code into PHP files. Here’s this awesome article explaining every single theme file in a ridiculously simple way.

It’s always a good idea to have an open tab with the Codex: yes, there’s no better place than that to learn or find documentation almost about anything WordPress-related. I’ll be linking to the Codex frequently all along this tutorial.

It's always a good idea to have an open tab with the Codex

style.css


/*
Theme Name: Brillante Layout
Theme URI: https://github.com/tatygrassini/Brilliante_Layout
Description: WordPress theme version for the Brillante Layout.
Author: Taty Grassini
Author URI: tatygrassini.github.com
Version: 1.0
Tags: brillante, white, blue, two-column, fixed-width, right-sidebar
*/

For better performance, we won’t use the @import statement here to call our styles. We’ll use the style file to render the theme info only.

For better performance we won't use the @import statement here to call our styles

header.php

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title><?php bloginfo('name'); ?></title>

<link rel="shortcut icon" href="favicon.ico" >

<link rel="stylesheet" media="screen" href="<?php bloginfo('template_url')?>/css/style.css" />

<!--[if lte IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<link rel="stylesheet" media="screen" href="<?php bloginfo('template_url')?>/css/ie.css" />
<![endif]-->

<?php wp_head(); ?>
</head>

<?php echo is_single() || is_page() ? "<body class='single'>" : "<body>"; ?>

<header>
<div class="top">
<div class="top-content">

<nav>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>

<div class="block">

<p><a href="<?php bloginfo('rss2_url'); ?>">Grab our feeds</a></p>

<form id="search" action="<?php get_option('home') ?>" method="get">
<input name="s" id="s" class="search_input" placeholder="Search...">
<input type="submit" class="search_submit" value="Go">
</form>

</div><!-- .block -->

</div><!-- .top-content -->
</div><!-- .top -->

<div class="logo">
<a href="<?php bloginfo('url'); ?>"><h1 class="notext"><?php bloginfo('name'); ?></h1></a>
<p><?php bloginfo ('description'); ?></p>
</div><!-- .logo -->

See the bloginfo function all over the place. It’s one of the most useful functions in theme development. Highlighted lines show you some of its common parameters, such as site name, RSS, main URL, description and template URL.

See line 9: instead of using the bloginfo('stylesheet_url') function, we’re using the bloginfo('template_url')?>/css/style.css, telling the CMS to go straight to our css folder.

Line 20: if it’s a single view or a page, assign the single class to the <body> element, so we can manipulate different styles with CSS.

Then, the usual stuff: navigation and the search form.

footer.php

<footer>
<div class="footer-content">

<div class="footer-widget footer-first">
<?php if (dynamic_sidebar('footer-first')) : else : ?>
<h2>Links</h2>
<ul>
<?php wp_list_bookmarks('title_li=&categorize=0&limit=6'); ?>
</ul>
<?php endif; ?>
</div>

<div class="footer-widget footer-second">
<?php if (dynamic_sidebar('footer-second')) : else : ?>
<h2>Watch us on flickr</h2>
<ul class="flickr">
<!-- Pulling data from Flickr API with JSON and jQuery -->
</ul>
<?php endif; ?>
</div>

<div class="footer-widget footer-third last">
<?php if (dynamic_sidebar('footer-third')) : else : ?>
<h2>Tweet tweet!</h2>
<div id="twitter">
<script>
typeof getTwitters!="function"&&function(){var a={},b=0;!function(a,b){function m(a){l=1;while(a=c.shift())a()}var c=[],d,e,f=!1,g=b.documentElement,h=g.doScroll,i="DOMContentLoaded",j="addEventListener",k="onreadystatechange",l=/^loade|c/.test(b.readyState);b[j]&&b[j](i,e=function(){b.removeEventListener(i,e,f),m()},f),h&&b.attachEvent(k,d=function(){/^c/.test(b.readyState)&&(b.detachEvent(k,d),m())}),a.domReady=h?function(b){self!=top?l?b():c.push(b):function(){try{g.doScroll("left")}catch(c){return setTimeout(function(){a.domReady(b)},50)}b()}()}:function(a){l?a():c.push(a)}}(a,document),window.getTwitters=function(c,d,e,f){b++,typeof d=="object"&&(f=d,d=f.id,e=f.count),e||(e=1),f?f.count=e:f={},!f.timeout&&typeof f.onTimeout=="function"&&(f.timeout=10),typeof f.clearContents=="undefined"&&(f.clearContents=!0),f.twitterTarget=c,typeof f.enableLinks=="undefined"&&(f.enableLinks=!0),a.domReady(function(a,b){return function(){function f(){a.target=document.getElementById(a.twitterTarget);if(!!a.target){var f={limit:e};f.includeRT&&(f.include_rts=!0),a.timeout&&(window["twitterTimeout"+b]=setTimeout(function(){twitterlib.cancel(),a.onTimeout.call(a.target)},a.timeout*1e3));var g="timeline";d.indexOf("#")===0&&(g="search"),d.indexOf("/")!==-1&&(g="list"),a.ignoreReplies&&(f.filter={not:new RegExp(/^@/)}),twitterlib.cache(!0),twitterlib[g](d,f,function(d,e){clearTimeout(window["twitterTimeout"+b]);var f=[],g=d.length>a.count?a.count:d.length;f=["<ul>"];for(var h=0;h<g;h++){d[h].time=twitterlib.time.relative(d[h].created_at);for(var i in d[h].user)d[h]["user_"+i]=d[h].user[i];a.template?f.push("<li>"+a.template.replace(/%([a-z_-.]*)%/ig,function(b,c){var e=d[h][c]+""||"";c=="text"&&(e=twitterlib.expandLinks(d[h])),c=="text"&&a.enableLinks&&(e=twitterlib.ify.clean(e));return e})+"</li>"):a.bigTemplate?f.push(twitterlib.render(d[h])):f.push(c(d[h]))}f.push("</ul>"),a.clearContents?a.target.innerHTML=f.join(""):a.target.innerHTML+=f.join(""),a.callback&&a.callback(d)})}}function c(b){var c=a.enableLinks?twitterlib.ify.clean(twitterlib.expandLinks(b)):twitterlib.expandLinks(b),d="<li>";a.prefix&&(d+='<li><span className="twitterPrefix">',d+=a.prefix.replace(/%(.*?)%/g,function(a,c){return b.user[c]}),d+="</span></li>"),d+='<span className="twitterStatus">'+twitterlib.time.relative(b.created_at)+"</span>",d+='<span className="twitterTime">'+b.text+"</span>",a.newwindow&&(d=d.replace(/<a href/gi,'<a target="_blank" href'));return d}typeof twitterlib=="undefined"?setTimeout(function(){var a=document.createElement("script");a.onload=a.onreadystatechange=function(){typeof window.twitterlib!="undefined"&&f()},a.src="//remy.github.com/twitterlib/twitterlib.js";var b=document.head||document.getElementsByTagName("head")[0];b.insertBefore(a,b.firstChild)},0):f()}}(f,b))}}()
getTwitters('twitter',{id:'<?php echo get_option('brilliante_layout_twitter_user'); ?>',count:1,enableLinks:true,ignoreReplies:true,clearContents:true,template:'<p style="font: italic 15px/23px Georgia,serif;color:#EDEDED;"><em>&ldquo;%text%&rdquo;</em></p> <p style="color:#EDEDED;line-height:23px;" class="cufon"><a href="https://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a> <br />From&nbsp;%source%</p> <h2><a href="https://twitter.com/<?php echo get_option('brilliante_layout_twitter_user'); ?>/">Follow us on Twitter!</a></h2>',callback:function(){Cufon.replace('p.cufon, h2')}});
</script>
</div>
<?php endif; ?>
</div>

</div><!-- .footer-content -->
</footer>

<div id="bottom">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'link_before' => '&nbsp;|&nbsp;')); ?>

<p>Copyright <?php echo date('Y'); ?> &minus; <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> &minus; All rights reserved</p>
</div><!-- #bottom -->

<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="<?php bloginfo('template_url')?>/js/cufon-yui.js"></script>
<script src="<?php bloginfo('template_url')?>/js/frutiger.font.js"></script>
<script src="<?php bloginfo('template_url')?>/js/slides.min.jquery.js"></script>
<script src="<?php bloginfo('template_url')?>/js/func.js"></script>

<!--[if IE 6]>
<script src="<?php bloginfo('template_url')?>/js/belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('*');
</script>

<![endif]-->

<script> Cufon.now(); </script>
<!-- Google Analytics and other scripts here -->
<?php wp_footer() ?>

</body>
</html>

Here, we’re widgetizing all the three block areas in the footer. And on line 27, some JavaScript to render my last Twit. The else statement is giving us the chance to render that content until the user drops some widgets.

we are widgetizing all the three block areas in the footer.

sidebar.php


<aside>
<ul class="sidebar">
<?php if (dynamic_sidebar('sidebar')) : else : ?>

<li class="sidebar-widget">
<div class="sidebar-widget">
<h2><span>Author</span></h2>
<img class="avatar" width="99" height="99" alt="Mahmoud Khaled" src="https://1.gravatar.com/avatar/beb66a755ea479a2f10fc19c7c29c054?s=99&d=Gravatar+Logo&r=G">
<h2>Mahmoud Khaled</h2>
<p><em>Web &amp; Graphics Designer</em></p>
<p>Sectetur adipisicing elit, sf sed dos eiusmod tempor incididunt utto po Web and graphics designer!</p>
</div>
</li>

<li class="sidebar-widget">
<div class="sidebar-widget">
<h2><span>Categories</span></h2>
<ul>
<?php wp_list_categories('title_li='); ?>
</ul>
</div>
</li>

<li class="sidebar-widget">
<div class="sidebar-widget">
<h2><span><?php _e( 'Meta', 'brilliante_layout' ); ?></span></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</div>
</li>

<?php endif; ?>
</ul>
</aside>
</div><!-- #content -->

Sidebar is widgetized as well. Same deal as before with the else statement: unless one or more widgets assigned, render author, categories and log-in box.

Sidebar is widgetized as well

index.php

<?php get_header(); ?>

<?php include (TEMPLATEPATH . '/inc/featured.php' ); ?>

</header>
<div id="content">
<div class="main">
<h2><span>Latest from the blog</span></h2>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php include (TEMPLATEPATH . '/inc/post.php' ); ?>

<?php endwhile;

else : ?>

<p>Page not found.</p>

<?php endif; ?>

<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
</div><!-- main -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Index ties everything up. The get_header, get_sidebar and get_footer are pretty self-explanatory. From the top, we include the featured area slideshow snippet from the inc folder, only used in the home page, then the loop on line 10, the post snippet on line 12 and the navigation snippet included on line 22.

functions.php

<?php
// ----------------- Menus w/fallback for older WP versions --------------------
//
register_nav_menu( 'primary', __( 'Primary Menu', 'brilliante_layout' ) );
// Get our wp_nav_menu() fallback, wp_page_menu(), to show a home link.
function brilliante_layout_page_menu_args( $args ) {
  $args['show_home'] = true;
  return $args;
}
add_filter( 'wp_page_menu_args', 'brilliante_layout_page_menu_args' );
// ----------------- Widget-Ready Sidebar ---------------------------------------
//
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name' => __( 'Sidebar', 'brilliante_layout' ),
        'id' => 'sidebar',
        'before_widget' => '<li class="sidebar-widget"><div class="sidebar-widget" id="%1$s">',
        'after_widget' => '</div></li>',
        'before_title' => '<h2 class="sidebar-widget"><span>',
        'after_title' => '</span></h2>',
    ));
// ----------------- Widget-Ready Footer ----------------------------------------
//
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name' => __( 'Footer First', 'brilliante_layout' ),
        'id' => 'footer-first',
        'before_widget' => '<div class="footer-widget">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name' => __( 'Footer Second', 'brilliante_layout' ),
        'id' => 'footer-second',
        'before_widget' => '<div class="footer-widget">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name' => __( 'Footer Third', 'brilliante_layout' ),
        'id' => 'footer-third',
        'before_widget' => '<div class="footer-widget">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));
// ----------------- Post Featured Images support -------------------------------
// Watch out for the array( 'post','slides' ) in here...
if ( function_exists( 'add_theme_support' ) ) { // Added in 2.9
  add_theme_support( 'post-thumbnails', array( 'post','slides' ) ); // Add featured images to posts
  set_post_thumbnail_size( 140, 140, true ); // Normal post thumbnails
  add_image_size( 'single-post-thumbnail', 542,220, true ); // Single Post thumbnail size
}
// ----------------- Remove code from the <head> --------------------------------
//
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'wlwmanifest_link');
function hcwp_remove_version() {return '';}
add_filter('the_generator', 'hcwp_remove_version');
// ----------------- Disable the admin bar in 3.1 -------------------------------
//show_admin_bar( false );
?>

This huge amount of code has comments, giving us a hint of what these snippets do. This will take care of our menues, widgetized areas, post featured images, meta tags cleaning and the chance to get rid of the admin bar (in the case you hate it).

Oh yeah, there’s more!

We’ll also need a single view for our posts, pages, archives, search results page and a page template for our blog link.

single.php

<?php get_header(); ?>

</header>
<div id="content">
<div class="main">
<h2 id="post-<?php the_ID(); ?>"><span><?php the_title(); ?></span></a></h2>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="post">

<div class="post-single">
<?php if(has_post_thumbnail()) { ?>
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'single-post-thumbnail' ); ?></a>
<?php } else {
echo '<img src="'.get_bloginfo("template_url").'/css/img/no-img-542x220.gif" />';
} ?>

<div class="text">
<?php the_content(); ?>

<div class="readMore">
<span>Author: </span><em><?php the_author_posts_link(); ?></em><br />
</div><!-- .readMore -->

<div class="cat-date">
<span class="posted">Posted in: </span><em><?php the_category(', ') ?></em></span>
</div><!-- .cat-date -->
</div><!-- .text -->
</div><!-- .post-single -->
</div><!-- .post -->
<?php endwhile;

else : ?>

<p>Page not found.</p>

<?php endif; ?>

<div id="comments">
<?php comments_template(); ?>
</div>

</div><!-- main -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

At the top, there’s no need for the featured area slideshow on the single view.

Line 14: we’ll render the featured post image for the single view, bigger image, its dimensions have been declared in the functions file.

Line 41: the comments_template functions is calling… well, you know what…

page.php

<?php get_header(); ?>

</header>
<div id="content">

<div class="main">

<h2><span><?php the_title(); ?></span></h2> 

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<div class="post">

<div class="post-single">

<?php the_content(); ?>

<?php edit_post_link( __( 'Edit', 'brilliante_layout' ), '', '' ); ?>

</div><!-- .post-single -->

</div><!-- .post -->

<?php endwhile; ?>

</div><!-- main -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

archive.php

<?php get_header(); ?>

<div id="content">

<div class="main">

<?php if (have_posts()) : ?>

<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>

<?php /* If this is a category archive */ if (is_category()) { ?>
<h2><span>Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category</span></h2>

<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
<h2><span>Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</span></h2>

<?php /* If this is a daily archive */ } elseif (is_day()) { ?>
<h2><span>Archive for <?php the_time('F jS, Y'); ?></span></h2>

<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<h2><span>Archive for <?php the_time('F, Y'); ?></span></h2>

<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<h2 class="pagetitle"><span>Archive for <?php the_time('Y'); ?></span></h2>

<?php /* If this is an author archive */ } elseif (is_author()) { ?>
<h2 class="pagetitle"><span>Author Archive</span></h2>

<?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<h2 class="pagetitle"><span>Blog Archives</span></h2>

<?php } ?>

<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>

<?php while (have_posts()) : the_post(); ?>

<div class="post">

<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>

</div><!-- .post -->

<?php endwhile; ?>

<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>

<?php else : ?>

<h2><span>Nothing found</span></h2>

<?php endif; ?>

</div><!-- main -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

The code on the first half will give us a heading with the proper condition for our query.

search.php

<?php get_header(); ?>
<div id="content">
<div class="main">

<?php if (have_posts()) : ?>

<h2><span>Search results for: <?php the_search_query(); ?></span></h2>

<?php while (have_posts()) : the_post(); ?>

<?php include (TEMPLATEPATH . '/inc/post.php' ); ?>

<?php endwhile;

else : ?>

<h2><span>Page Not Found</span></h2>

<?php endif; ?>

<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
</div><!-- main -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

A list of search results containing the_search_query.

page-blog.php

<?php /* Template Name: Blog */ ?>

<?php get_header(); ?>

</header>
<div id="content">

<div class="main">

<h2><span><?php the_title(); ?></span></h2> 

<?php query_posts( 'posts_per_page=5' ); ?>

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<div class="post-page-blog">
<?php if(has_post_thumbnail()) { ?>
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail( array(50,50) ); ?></a>
<?php } else {
echo '<img src="'.get_bloginfo("template_url").'/css/img/no-img-50x50.gif" />';
} ?>

<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
<p><?php comments_number('No Comments', '1 Comment', '% Comments'); ?></p>
</div><!-- .post -->

<?php endwhile; ?>

</div><!-- main -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

The code comment in the first line is a WordPress convention for custom page templates. You need to declare a template name which will show in your dashboard when creating a new page or editing an existing one.

You need to declare a template name which will show in your dashboard when creating a new page or editing an existing one

DRY: Don’t Repeat Yourself

Repetition in theme development can be spot quite often if you’re not careful. Most of the times, the post code will repeat on the index, single, archive and search files.

Dan Harper made an awesome screencast some time ago, applying the DRY programming technique into a WordPress theme, using includes as we did with the post, navigation and featured area. But, luckily for us, since version 3.0, WordPress is shipping with the get_template_part function to achieve just that.

Any of these two techniques will do, it’s up to you: the WordPress way or the Rails DRY way.

More CSS styles and testing

I’m not showing the final CSS file here because of its length. Yep, our CSS has grown exponentially and has been changed with new WordPress classes and ID’s. You have to think ahead to the future of our theme users need. They will surely drop a widget on your sidebar or footer and your CSS has to be ready. Sometimes users are HTML-savvy and they will write that rare tag you never thought of and BUM!, your design fails.

Go ahead and download the official WP-theme unit test. It has HTML elements and all sort of crazy stuff to style before hand.

Thanks!

Once again, download the Brilliante Layout theme and take it for a ride. Feel free to use and abuse.

The post HTML & CSS Blog Layout – Theme Implementation for WordPress appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/html-css-blog-layout-theme-implementation-for-wordpress/feed/ 0
The Before & After Redesigns of Popular Design Blogs https://speckyboy.com/before-after-redesigns-of-popular-design-blogs/ https://speckyboy.com/before-after-redesigns-of-popular-design-blogs/#comments Thu, 22 Sep 2011 09:06:04 +0000 http://speckyboy.com/?p=16177 There’s a lot to be learned by looking at before and after shots of a website’s redesign. You get to see what the designer or design team has learned about...

The post The Before & After Redesigns of Popular Design Blogs appeared first on Speckyboy Design Magazine.

]]>
There’s a lot to be learned by looking at before and after shots of a website’s redesign. You get to see what the designer or design team has learned about design since the last rendition, where they’ve identified problems and areas of the design that could be improved.

The site’s look and feel are brought up to date with trends, and often more timeless improvements are made, such as base typography enhancements.

Examining these changes can help you take advantage of the designer’s learning through trial and error and other means and avoid making the same mistakes yourself. Here are 30 popular design blogs that have been redesigned over the past few years for your viewing pleasure.

WebDesignerWall

Before:

After:

Veerle’s Blog

Before:

After:

Tutorial9

Before:

After:

UX Booth

Before:

After:

InspiredMag

Before:

After:

Lord Likely

Before:

After:

Fudgegraphics

Before:

After:

WorkAwesome

Before:

After:

LINE25

Before:

After:

SimpleBits

Before:

After:

Francesco Mugnai

Before:

After:

Speckyboy Design Magazine

Before:

After:

1st Web Designer

Before:

After:

The Design Buzz

Before:

After:

Onextrapixel

Before:

After:

Abduzeedo

Before:

After:

UsabilityPost

Before:

After:

PVM Garage

Before:

After:

Wegraphics

Before:

After:

Janko at Warp Speed

Before:

After:

Visualswirl

Before:

After:

Web Design Ledger

Before:

After:

Think Vitamin

Before:

After:

Dawghouse Design Studio

Before:

After:

Spyrestudios

Before:

After:

AppStorm

Before:

After:

Cats Who Blog

Before:

After:

Under World Magazines

Before:

After:

Smashing Magazine

Before:

After:

Elite By Design

Before:

After:

Mashable

Before:

After:

Conclusion

Much of what you see here is designers keeping up with web design trends before their work looks dated. In the last year or so, many of the redesigns would’ve been about taking advantage of new technologies such as CSS3, allowing designers to accomplish completely new things, or just replace hacks that weren’t exactly standards-compliant with proper implementations.

But what you can see in each and every design is the process of designers learning and growing and honing their skills through iteration. Let us know in the comments your thoughts on where these redesigns hit, where they missed, and what you might have done differently.


The post The Before & After Redesigns of Popular Design Blogs appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/before-after-redesigns-of-popular-design-blogs/feed/ 20