I recently decided that my personal blog and portfolio needed a bit of a face lift. The website has had minor fixes added to patch holes, changed quickly in a moment of need, or left to flounder for months at a time. Rather than going in and getting it “just enough”, I decided to fully rethink the usage of david.garden, and design a new layout for it that suits those needs. Additionally, I wanted to make it a bit more accessible, as well as add some responsive layout to the design. (more…)
Category: Tutorials
-
Making Your Own Excerpts
There are plenty of reasons that you would want to use excerpts of posts. If you run a site that has a lot of lengthy posts, and want each to be showcased individually, then your posts page may benefit from the use of excerpts for display. An excerpt is a short intro to the post, usually ending with a “read more” link to the full text.
(more…) -
How to Make a Custom Post Type in WordPress
Today we’re going to talk a bit about custom post types in WordPress, and how they can further help to develop a unique layout for your website. There are plenty of reasons that a blog owner would have to make use of custom post types.
For instance, a photographer can use the build in gallery shortcode to easily create collections of images from a particular set. This can allow easy updating of a portfolio in a news style format, with newer work remaining at the top of the page of posts. For full page viewing of photos, or to avoid overflow, they may want to remove sidebars or asides from the main content of the site. This can be seen on the photography theme, where we’ve made a custom type of gallery to display your pictures.
(more…) -
Editing Menus In Your Theme
Pretty much every wordpress theme that you find will have some sort of navigation menu of top-level pages. After all, how else would users be able to easily navigate your website? Here are a few methods to customize those menus in your theme.
(more…) -
Using @font-face To Duplicate Typekit
Recently, WordPress.com (the paid and web hosted version of the WordPress software) added further Typekit integration into their service. That’s all good if you are a member of Typekit and use WordPress.com, but if you are hunting for custom themes, you don’t have that at your disposal. What you do have, however, is the power of @font-face for your custom theme CSS, and you can style accordingly.
How does it work?
Activating @font-face is pretty simple. You have to have your custom font saved online somewhere that you can reference it, and have to include it in your style sheet for your theme. The code would work as follows:
@font-face { font-family: "Helvetica"; src: url(http://www.example.com/fonts/helvetica.ttf) format("truetype"); } p { font-family: "Helvetica", sans-serif }The above code names a font with an identifier, in this case, “Helvetica”, and tells the style sheet where to find the font, the url changing based on where you have your font uploaded. The format will become important later on in the tutorial. Unfortunately, as is often the case, not all browsers are created equally, and truetype fonts are not recognized as imports in all browsers. Thankfully however, Google once again comes to the rescue, and has just released a new method for importing fonts in, and even better, you don’t have to host them yourself!
The Google Web Fonts API currently has about 180 fonts that are royalty free for you to insert into your website wherever you choose. They have made it simple to sample text, get link, import, and javascript code, and show how to add the font into your stylesheet. Now there’s more reason than ever to give your website a unique look with a less boring font than Arial or Times New Roman!