Tag Archives: themes

Josh Leuze 10:26 pm on August 26, 2015
Tags: , , themes,   

Update on building a new WordCamp theme

This is a follow up to the @iandunn post on the WordCamp.org tools survey results.

I setup a Github repo for the new WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. theme with a fork of Underscores to get things started.

To start with I have been collecting feedback and ideas for a new WordCamp theme so that our design lead, @robertnienhuis, has something to work with. I haven’t gotten too much feedback online yet, but have gotten some good ideas from several other organizers offline. If you would like to share some feedback as well please post a comment below!

Theme Features

Here is the feedback that I have collected so far, as well as my own ideas:

  • Great Design: I would like to keep the theme light and minimalist, easy to build on, but also have it look good enough out of the box for a WordCamp without a strong designer to be able to use as-is.
  • Mobile First: I’d really like to include a strong mobile version that makes WordCamp sites easy to use at the event when you are on the go.
  • Widgetized: It’s always tough to get markup where you want it, I’d love a lot of widgetized areas so I can get the content I need in the right spot to match any design. I spoke with some other organizers who would also like more widgetized areas, sitewide and page specific. Particularly for the featured content sections typically found on a WordCamp site.
  • Widgets: Building actual widgets into the theme might be a step too far, but there was some interest in having a few featured widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. styles built in, so that if you used the right markup in a text widget you could get a good looking featured section right out of the box that organizers can expand on from there.
  • Page Templates: Most of the people I talked to were interested in having more page templates to choose from. Like a homepage template with a page content area and multiple widget areas for featured content and also a similar homepage template with a smaller blog area setup as recent posts with excerpts. We’ll need a single column page template of course, but I’d also like to try to include a more minimalist template with little or no headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. or footer as well that people can use for whatever they want as a blank canvas.
  • 404 Template: I’d like to include a pretty minimalist template for this too that includes a widget area just for the 404 page, so that people can create a nice custom 404 page if they want to.

Website Examples

I also have a few examples of WordCamp sites that I like, please share your favorites in the comments!

  • WordCamp Minneapolis: Westwerk did an awesome job designing this site and if we can do half as good I’d be thrilled!
  • WordCamp Montreal: They had a sharp looking site this year, I really like the call to action blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. on the homepage below the header with the tickets/schedule spot, and the subscribe/ social media spot.
  • WordCamp Denver: A nice clean site, great for mobile, with a sweet camping vibe.

I’m pinging people that volunteered to help out in the previous post: @cheffheid, @valeriosza, @dnelle, @danielgcarvalho, @brettshumaker, @davidjlaietta

#improving-wordcamp-org, #official-websites, #themes, #wordcamp-org

Jen 3:58 pm on June 15, 2015
Tags: , themes,   

1-Question WordCamp.org Themes Survey

Ian posted this follow up survey in a comment below, but since I’m thinking most people won’t see it there, wanted to post again. It’s a 1-question survey about WordCamp.org themes, as a follow up to the last survey. It will take less that a minute, I promise! Just put the three choices in the order you think they should be and click submit.

Go do it: http://wordcampcentral.polldaddy.com/s/improving-wordcamp-org-tools-clarification

#official-websites, #themes, #wordcamp-org

Ian Dunn 1:12 am on April 9, 2015
Tags: , , , page templates, themes,   

Improving WordCamp.org: Adding More Themes and/or Page Templates

This post continues the previous discussions we’ve had on the project to improve WordCamp.org. If you’d like some background information, you can check out the notes from the 2014 Community Summit and the discussion on the CSS Editor.

* * * *

 

One of the most common pieces of feedback has been that, when organizers are building their sites, they want more themes and/or page templates to choose from. The goal of this post is to start a conversation on that topic and hash out the details of what we want and how to move forward.

Right now organizers can only choose from the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. themes (TwentyTwelve, TwentyFourteen, etc) plus the WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Base theme, a custom theme that was written specifically for WordCamps. Organizers can’t edit the PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php., HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. and JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. of the themes due to security and maintenance concerns, so customizing the CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. is the only way to create a new design. There’s a lot that can be done with just CSS, but sometimes organizers still wish they had more options.

Define the Problem and Goals

I think it’d help to have some specific examples of limitations, and to describe what the goals are in having more choices. These questions should help start the discussion, but feel free to ask/answer others too.

  • Have you run into limitations customizing your site? If so, can you describe them?
  • Do you find that it takes too much work to transform the design of the available themes into your custom design?
  • Do you run into situations where you can’t achieve the design you want without modifying the theme’s HTML?
  • Are there other major problems that you run into?
  • What do you think would be good solutions to the problems you found?

Potential Solutions

So far two potential solutions have been discussed: making more themes available to choose from, and providing a way for organizers to submit custom page templates for any available theme.

They’re not mutually exclusive, so we could possibly do both, but we have limited resources, so I think it’d be best to pick the one that will make the most impact and focus on that first. After the first round of improvements are made, we can reassess where we are and what to do next.

Other than those two, are there any other solutions that should be considered?

Adding More Themes

The first potential solution would be to simply make more themes available to organizers. This would save time in some cases because you could start with something that is closer to your custom design.

It would also provide a wider variety of layouts and templates, which could solve some of the problems related to needing a specific layout in order to achieve a particular custom design. If a developer did run into that problem, though, they would still be stuck because they wouldn’t be able to edit the HTML.

Just like with plugins, we have to be careful about security, performance, etc when adding more themes, but those concerns could mostly be mitigated by picking themes that are available in both the WordPress.org directory, and on WordPress.com. Those themes have passed an exhaustive review by trusted developers, so we would be able to assume that they’re safe without having to audit them ourselves.

Do you think this is a good solution? If so, which specific themes would you choose?

Are there any problems with it?

Accepting Custom Page Templates

Another potential solution would be to allow organizers to write custom page templates, so that they could create custom layouts for the content area if their design required it. The templates wouldn’t affect the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes., sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. or footer, though. In order to use the templates, we’d need to create child themes for the existing themes, and add them there.

The templates would have to meet certain criteria, and be reviewed for security and other concerns before they could be added to WordCamp.org. We wouldn’t want to end up with dozens of templates that are only relevant to a single camp, or to have to review new templates for every site, so I think we’d have to require that the templates be generic enough to be reused by other camps, and that they only be created when there is a significant need that can’t be accomplished with CSS alone.

What do you think about this solution? Are there any specific page templates that you think would be useful?

Are there any problems with it?

 

Do you have any other thoughts or comments?

 

Everyone is encouraged to particpate in the discussion, but I’m pinging the people who took part in the previous discussions to make sure they don’t miss the post: @ryelle, @harbormark, @chanthaboune, @nvwd, @kovshenin, @rafaehlers, @davidjlaietta, @dimensionmedia, @mj12982, @iandstewart, @miss_jwo, @topher1kenobe, @jenmylo, @georgestephanis

#community-summit, #improving-wordcamp-org, #official-websites, #page-templates, #themes, #wordcamp-org

Ian Dunn 10:03 pm on March 5, 2015
Tags: , customization, , , maintenace, , , themes,   

Improving WordCamp.org: Notes from the 2014 Community Summit

At the 2014 Community Summit there was a breakout discussion that focused on ways to improve WordCamp.org. You’ll find the notes from that discussion below, which are being posted here so that the discussion can continue with the participation of everyone who’s interested (not just those who were able to make it to the Summit).

Kudos to @dimensionmedia for taking the notes. It’s impossible to catch everything, though, so if anyone remembers any ideas or remarks that didn’t get recorded, please post them in the comments (but please don’t reveal the identity of the person who made the remark, since the Summit was a safe space.)

* * * *

Most of the discussion centered around the desire of organizing teams to customize their site more than they currently can, or making it easier to customize.

The top 5 pain-points of people present at the discussion were:

  • CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. Editor
  • Lack of custom JS
  • Lack of accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)
  • Theme Repo Is too small
  • Possibility of crafting default theme

Customization of WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. themes

This was more of a passionate subject than you would think. First we discussed best ways to share code with other WordCamp sites that already have great designs, because not every camp has access to a designer. Since WordCamp sites only allow CSS as custom code, right now it’s a copy/paste process.

We talked about two main areas of customization: design and functionality.

Design wise, we talked about how extendable current themes are and maybe aren’t. We talked about the hacking that needs to be done in certain situations. And we talked about having a potential gallery of WordCamp sites that organizers can choose from – greater availability of choices than what we currently have. Offering themes that have already been audited by WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ (but are also available in the WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ repository) might be an easy way to add more choice.

We also talked about maybe making certain large sections of a theme as a widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. to begin to allow custom HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. in addition to the custom CSS. Or possibly creating more page templates that meet common needs.

Functionality wise, we came up with some potential interesting ideas for WordCamp sites. We talked about how some customizations have come about and been implemented. And also possibility of allowing WordCamps to experiment with a concept or idea, and then bring it to the attention of the WordCamp development team, which is by the way run only by two people and they deserve a ton of praise for that. Some of the more simple ideas, like commenting for asking questions.

So our takeaway was understanding current limitations, primarily for security. But also allowing flexibility for great designs and concepts for future WordCamps.

Why we disallow custom PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. code: every single pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party would have to be maintained forever and also looked over to make sure the code is secure. If there was a security vulnerability on WordCamp.org, then that would put WordPress.org in a position to be hacked, since they’re connected. We also try to create solutions that work for all WordCamps, rather than just a single camp doing something on their own. Contributions can be made to the Meta trac and integrated for all WordCamps to use.

Miscellaneous

  • We also discussed perhaps converting each site to static HTML after the camp is over, which would allow us to remove the burden of constantly maintaining plugins. Maybe use commenting for archives.
  • MailPoet has the ability to integrate with WordPress, providing basic functionality that could be useful for other WordCamps. CampTix has some MailChimp integration; it collects stats, and delivers information back to WordCamp.org. We want to own that data, not a third-party.
  • Sessions might be extended be custom post types.

So say we all.

* * * *

After the Summit, @ryelle built a prototype for a way to easily clone another WordCamp’s CSS and other visual elements, to help organizing teams get a quick start on their own site. Kelly, could you please post that code to MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/., so that everyone can check it out and collaborate on it? A couple screenshots in the comments would be awesome too, for those who aren’t developers.

I’ve also spent some time thinking about how we could improve the CSS-editing experience, but that’s a big enough topic that it warrants a separate discussion, so I’ve started another post for that.

If you have any thoughts on anything mentioned above, or have an idea to improve WordCamp.org that hasn’t been mentioned yet, please post it in the comments 🙂

 

Everyone is encouraged to particpate in the discussion, but I’m pinging the people who took part in the original discussion to make sure they don’t miss the post: @ryelle, @harbormark, @chanthaboune, @nvwd, @kovshenin, @rafaehlers, @davidjlaietta, @dimensionmedia, @mj12982, @iandstewart, @miss_jwo, @topher1kenobe

#accessibility, #customization, #improving-wordcamp-org, #jetpack-css-editor, #maintenace, #official-websites, #security, #themes, #wordcamp-org

Courtney O'Callaghan 4:33 pm on October 24, 2013
Tags: themes,   

Reposting from Theme School Blog First Module Child…

Reposting from Theme School Blog: First Module: Child Themes of course!

I have been talking this week with Tracy Levesque (@LilJimmi) who is my FAVORITE child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. trainer in the WP world. She and I have discussed her awesome curriculum that she has used to teach child themes at: Philly WPs MeetupMeetup Meetup groups are locally-organized groups that get together for face-to-face events on a regular basis (commonly once a month). Learn more about Meetups in our Meetup Organizer Handbook. Group, WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. NYC, WordCamp Montreal, Girl Develop It Philly, Web Start Women in Philly, & Philly Tech Week. I think it and she are a perfect way to build content for this.

She will be placing an outline + her content that will be fleshed out by us all into a script. I am hoping we can be in agreement and done with it in the next 2 weeks.

I also want to put a call out to anyone who remembers who were in the groups at WCSF this summer. I want to have us place all the documents worked on under the Shared Material page. If you want to contact me you can find me at courtneydawn on gChat or twitter. Thanks!!!

#themes, #training

Courtney O'Callaghan 2:20 am on September 19, 2013
Tags: themes,   

Theme School Curriculum

Below I have set out the topics and layout for the theme school training modules.Please take a look and get back to me if you are interested! For those who were at Contribute Day at WCSF, please contact me if you have any materials already created (outside of the videos that were recorded) so we can use the awesome content you all worked on already.
The basic layout for each section module would be:
  • a short intro in what you will learn (written or video)
  • voice over screencast walk through (user could follow along if they wanted to)
  • 2-3 practice examples
  • self quiz for each topic
Here are first thoughts on sections of the theme school. There are probably too many in some sections and not enough in others.  I am sure I missing some of the topics we covered at Contribute Day – please remind me what topic you worked on so i can include it. I look forward to seeing everyone’s ideas 🙂
  • What is a Theme
    • How does a theme interact with WP
    • What is a framework (definition)
    • What is a child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. (definition)
    • What is CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. or Role of CSS in WP theme
  • Theme Basics
    • Setting up Local InstallLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. of WP
    • Theme Standards & Best Practices
    • Basic Files &  Structure: Anatomy of a Theme
      • see: http://yoast.com/wordpress-theme-anatomy/
    • Template Hierarchy
    • Template Tags
    • Post Formats
    • Files & Structure 2: Deconstructing twentytwelve (or other) file structure
      • perhaps broken down into HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes., Sidebars, Navigation, Stylesheet, etc.
    • Page Templates
    • Images (best practices)
    • CSS troubleshooting
  • Altering a Theme: Child Themes
    • Child theme basics (unless covered in basics)
    • Picking a parent theme
    • Creating child theme
      • functions.php
      • style.css
      • adding / overwriting other files
    • Common requests
    • Adding Additional Widgeted Spaces
  • Turning HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. design/website into WordPress theme
    • Breaking design into modules via WordPress file structure
    • The LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. & your site
    • Common Issues
  • Creating a theme from scratch
    • Using a starter theme
      • _s (underscores)
      • toolbox
  • Advanced/Other
    • Theme CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. integration
    • Custom Post TypeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. Templates
    • Print Friendly stylesheet
    • Responsive Themes
    • Internationalization
    • Theming Admin Dashboard
    • BuddyPress / MS
    • AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)
    • Testing your theme / Debugging
    • Theme Review aka Submitting Theme to WP

unsure if these would be appropriate / where to put them…

  • Web Fonts
  • How do i create my own theme/what does it mean to create a theme
  • Conditional tags
  • The  Loop explained
  • wp-query best practices
  • Custom fields
  • Custom post types

#themes, #training

Courtney O'Callaghan 7:08 pm on September 17, 2013
Tags: themes, ,   

Training Curriculums: Theme School

Hey all – I am finally getting around to introducing myself. I am Courtney OCallaghan and as Jen mentioned, I was a TA in the first troubleshooting training in DC (where i currently reside). I LOVE WordPress, LOVE teaching & training, and LOVE that the hideous summer weather in DC is almost over.

At Contribute Day WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. San Francisco a few months ago, Jen put together a group of people to begin creating modules for teaching others how to create/modify/hack/submit/etc. themes and named it Theme School. For those of you who participated, if you are interested in continuing on the module you began (or working on something else related) now is the time!! For those of you who did not participate in the first round of Theme School curriculum creation, there is no time like the present! In other words We Need Volunteers!

I have created a large (and I am sure not entirely thorough) list of the modules I would want to see in the theme school curriculum as a whole. I will be posting the list Wednesday for you all to look at and add to so that it is more complete. More to come!

#themes, #training, #training-workshops

Jen 4:45 pm on September 5, 2013
Tags: themes, , troubleshooting   

Training Curriculums

I’ve added Courtney O’Callaghan to this site. @courtneydawn was a TA at the first pilot troubleshooting training in DC, and has volunteered to take on the theme school curriculum, building on the work of the volunteers at WCSF dev day. She’ll be posting here to introduce herself and get things going; I hope we’ll have lots of continuing volunteers in this program. Once we’re at a point where we have some curriculum sections ready to go we can start running pilots to work out the bugs.

Speaking of curriculums/pilots, @sabreuse has committed to sprucing up the troubpeshooting curriculum by getting together some more content (additional practice exercises, self-quizzes, introductory scripts, and finalized walkthrough scripts). She’ll be reaching out to volunteers to help and we hope to have something put together by 3rd week of September for review/feedback.

#themes, #training, #troubleshooting