I spent the weekend helping my wife get her email campaign up and running. It was a lot of work, but we finished her custom wordpress-based website, typed up the automated emails, built the landing pages, and have begun our ad campaigns to start testing the waters. And now we play the waiting game.
The Wordpress theme itself is based on Bootstrap (which I am seriously falling in love with.)
It looks really nice on web, but truly shines on mobile.
I was super excited to apply my new-found knowledge of SQL into building a simple call to action form that reserves bookings for a photography shoot. I spent about 1 hour hooking up the logic to automatically remove time slots that are already reserved. Then I had to figure out how to integrate PayPal into it.
and that…well that took a lot longer. I spent countless hours trying to get PayPal to validate my information. Their documentation is spotty at best, and I finally ended up posting on Stack Overflow to see if I could get some input. That community is wonderful, and they helped me make the minor tweaks needed to get it up and running. I learned a lot about PayPal’s integration, and look forward to using it next time, because I know enough now to save myself a lot of time.
Once I got the form set up, it was simply a matter of laying the page out with some extra HTML and CSS, and since I’m using Bootstrap, I can have a completed landing page in just a few hours.
PHP is really growing on me. I can’t build a page without seeing a foreach loop that would make it easier. After I get a little more comfortable with it, I think I’m going to dive into CakePHP.
How many developers do you know in your life? If you work with a group of them, you might notice that they have particular quirks or personalities that you can actually group together, which is what I’m going to do with this post.
I identify with a lot of these to a small extent, but would probably be called the artsy one. I pretty much strictly use HTML, CSS, and PHP on Bootstrap for all of my website building, and have been focusing on using PHP functions to build my HTML snippets so I can get to the designing faster.
I’ve been playing a lot of “Keep Talking and Nobody Explodes” with my family, so I figured I could sharpen my JavaScript a bit while learning morse code a little better.
This pen is to help illustrate how transform:translate can change how you position objects, including how to dynamically center something vertically and horizontally. Related blog post coming soon!
I have been researching how to better-position objects using CSS. I love the calc, and display:flex; attributes but sometimes they’re not the most elegant option. I have found a handy way to center an object within a div both horizontally and vertically. It makes use of thetransform:translate(); attribute, and comes with a mindset on how I use it. It has grown to be more than that though. This method actually lets me specify the point I’m referencing when moving an object.
So, I made a WordPress theme. Hopefully I will be able to get it onto the WordPress repository soon. It is a theme specifically for people who need to show off a visual portfolio, such as photographers and designers. It would do well with industrial designers, as well.
I built it from the ground up to use every last inch of the available screen space. I have a 27″ monitor, and it renders beautifully on there. Of course, it formats on mobile quite well, too.
Independent Sidebar
One of my favorite features is the independent-scrolling sidebar. The content in the sidebar will scroll at a slower (or faster) pace than the rest of the window, so that both the sidebar and the page end at the exact same time. This gets rid of that awkward white space between the post content and the end of the document when your blog post is more than 500 words.
Single Post
An individual post displays a prominent header, featuring a huge featured image at the top. The content has plenty of white-space on either side, which I think breaks the otherwise busy theme up. When the content is longer, it reads a lot like an eBook, and that makes me very happy. At the bottom, related articles are displayed based on the category of the post you’re reading. All of the “Blog post boxes” you see are smart, and will fill the space appropriately if there is an odd number of posts.
Sidebar menu
The menu displays on a sidebar, and will darken the rest of the site when you click on it. This helps put focus on the menu when it is clicked on. A company logo can go above the menu, and a google-friendly, structured data address below the menu.
Image Gallery
All Wordpress image galleries will look like this. I made a point to not use any special code on the user’s end, because I didn’t want to force users to go through all of their existing content to swap out for a new “fancy image gallery”