Okay. So tonight I have finally done something I have always wanted to do, but have been too scared/overwhelmed to do. Tonight I made a WordPress theme from scratch. And it wasn’t even that scary! I have created child versions of other themes before, but I really need to learn how to do it from the ground up to actually see what is happening.
Before I get too far, I want to link to this article from ElegantThemes.com, about converting your HTML site to WordPress. It was just the kick in the pants I needed to finally make a WordPress theme.
Make a folder inside of your WordPress sites’ theme folder (wp-content/themes/yournewfilename).
Create these files and save them inside of your new folder: index.php, style.css, header.php, footer.php, sidebar.php, and functions.php
Add this WordPress header to your style.css file and your functions.php file. Don’t forget to change the information out for your own!
Theme Name: Digital Dew Tour
Description: this is something new
At this point if you saved all those files and uploaded them to your site, you would have a theme that you could activate for you site! Really the bare minimum you need for a WordPress theme is a style.css, functions.php and index.php files.
Of course I am assuming that you want to make this a more complete theme, so…
If you haven’t already done so, fill out your new files appropriately. Your CSS into your style.css. The header of your website into header.php. Any footer info into footer.php, and if you have a sidebar put it into sidebar.php.
When filling out your header, you will have to use a slightly different link to your stylesheet as shown below.
<link rel=”stylesheet” type=”text/css” href=”<?php echo get_stylesheet_directory_uri(). ‘/style.css’ ?>”>
Let’s not forget to fix up your index.php page. Begin by linking to each of your new php pages.
<?php get_header(); ?> This will go at the top
<?php get_sidebar(); ?>
<?php get_footer(); ?> These two at the very bottom.
In the middle of this mess you’ll add the loop, which is what the core of a WordPress blog really is. Below is how my skeleton index.php started.
<?php get_header(); ?>
<!– BEGIN LOOP
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<div class=”date”><?php the_time( ‘M j y’ ); ?></div>
<h2><a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
<div class=”author”><?php the_author(); ?></div>
</div><!–end post header–>
<div class=”entry clear”>
<?php if ( function_exists( ‘add_theme_support’ ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?> </div>
<div class=”comments”><?php comments_popup_link( ‘Leave a Comment’, ‘1 Comment’, ‘% Comments’ ); ?></div>
</div><!–end post footer–>
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<div class=”navigation index”>
<div class=”alignleft”><?php next_posts_link( ‘Older Entries’ ); ?></div>
<div class=”alignright”><?php previous_posts_link( ‘Newer Entries’ ); ?></div>
<?php else : ?>
<?php endif; ?>
<!– END LOOP
<?php get_sidebar(); ?>
<?php get_footer(); ?>
You’re really done here. For me this is now my “theme development” stage. I translated the basics of my html concept and now I need to go into the category pages and single blog posts and decide how to customize them. That’s the exciting and overwhelming thing about WordPress. You can modify everything. But also, dear god, you could modify EVERYTHING.
If you enjoy the Develop(her) series, check out this post on my web developer portfolio.
While I’m on this roll of clarity making my portfolio site, I thought I would write it down. I’m always emailing myself ideas or creating word documents with my ideas, and that means that I can easily lose track of my thoughts and ideas. So here goes.
For whatever reason I want my portfolio to be loosely “mermaid” themed. I had the desire to actually create an underwater sequence in Photoshop with myself as a mermaid. But just completing that on task was keeping me from getting anything accomplished. So I’ll just keep that on a wishlist.
This is the color palette I’ve been following. The orangey-pink is the closest I have to something mermaidy, since it’s like a playful version of coral.
Seriously just changing the font for the portfolio site has done wonders for everything! It just looks so much more professional with a well selected font. I decided to go with a popular sans-serif font, Montserrat. For other projects I’ve used Raleway and Open Sans (client’s choice).
font-family: ‘Montserrat’, sans-serif;
Since I decided that I couldn’t let myself hold up my portfolio venture just because I hadn’t created my perfect “mermaid” picture, I just added a stock photo that I really enjoyed. Originally it was truly a placeholder, and I was going to stage and take a photo related to a programmer’s life (the standard Macbook flat lay with coffee, etc). But now that I’ve used this stock photo, well, I’ve kind of fallen in love with it. I can’t say enough about it. I love it. I have railroad tracks nearby, so we’ll see if I can recreate this photo sooner than later!
I want a cool logo so hard. But it’s another one of those things that’s tripping me up. It’s way more important for me to just create something! I can always create a new thing later.
Perfect is the enemy of done.
Want more develop(her)? Check out this post on responsive design.
I’ve been working on a portfolio forever, in that distant, out-there, “this-concept-may-or-may-not-work” kind of way. But today I had some clarity and excitement and decided to just make something that worked and that I could create and create well. And during this process, I ended up making something that is actually responsive. In very simple terms, this just means that when I pull up this portfolio website on my cellphone the design will look scaled and pretty and not like I need to look at it on a desktop at a later date.
Here’s a link to the codepen I’ve been working in. The part I was making responsive was the “landing page,” so the main image and the text (“Hi. I’m julie…”).
Anyways! I just want to really quickly type out what I did, so I do not forget.
This was the easiest bit, and it inspired me to learn how to do it with text.
<img style=”width: 100%;” src=”IMG_URL.JPG”>
For my purposes my image was basically my landing/header page, so I just wanted it to fill the entire area, no matter how big the browser was.
It really was that easy.
Here’s where things get a bit more tedious; however, the execution is still quite simple.
You’re going to add a some directions to your CSS code which tells your design, “Hey, when the user’s browser gets to XYZ size, this part of the CSS is going to change.”
It looks like this.
@media only screen and (max-width: 950px)
For my portfolio site I used this line of code 4 times, for 4 different max-width’s (950px, 770px, 690px, and 480px). If these amounts seem random, they basically are. I just played around with my design by resizing my browser to see when my text needed to be adjusted.
Since font-size is a fixed value and not something variable, I used ems for the font size. I don’t completely understand them yet… And I am realizing now that I could have changed the font size every time to a specific value and the design would still be as responsive as I had intended.
If you understand ems and want to let me know when I should use them or if I just not even bother, please let me know!
The only other thing I want to note is that 480px is usually the max-width for cellphones.
I have been toying around with the idea of starting a “Web Development Blog” to document and leave like breadcrumbs of the things I’m learning on my journey to becoming a real web developer or computer scientist or all around bad ass web person. I haven’t decided yet. But I’ve been doing some soul searching, and I just know that I have a passion for this. I have a passion for websites. I have a passion for making things work through code. I have a passion for solving problems. I have a passion for being able to create whatever I want. And I have put in too much time at this point to turn away.
What have I been doing you ask? Well, I’ve been studying up on WordPress, SEO, and best web practices. I have completed several tracks on Codecademy and started a few more. I’ve started theOdinProject (I’m still so proud of my etchasketch project!). Right now all my attention is going into CS50, which is actually a Harvard class that you can take online for free! It’s less about turning you into a marketable working web developer and more about making you think like a computer science. I absolutely love the set up of the class. I’m already in the fourth week of classes (Week 3), and I have put a lot of hours into the problem sets, but I find them so rewarding that I’m definitely not mad about it!
To recap some of the things I’m doing and kind of want to do:
theOdinProject: Great curriculum, even better community
Codecademy: Great way to get started in a particular language
CS50x: I can’t say enough good things about this class.
Open Source Society University: I think this is so cool. Basically there are so many resources out there for programming, that you could complete the equivalent of a 4 year computer science degree online for free!
Also if you want to connect on projects or anything, let me know! I’m thebarbieshoe on most social media and GitHub, codepen, etc.
Somehow my engagement photo shoot caused so much anxiety going into it, but the results were so rewarding! I would definitely suggest an engagement photo shoot with your wedding photographer. I think it’s so important that the you, your significant other, and your photographer have a chance to build a rapport. Also you’ll find out for sure if you have the same vision or can communicate your vision to your photographer. Even more important you’ll know for sure that you like their photography style!
I was so lucky to just kind of fall in to selecting my wedding photographer. She’s actually a family friend/went to the same church/small grade school as me and couldn’t be more perfect for my vision and just everything. And I legitimately love her photography style. I toyed around with having a low key second engagement shoot on campus at the university where I met my fiancé, so I was shopping through different photographers in the area. I just didn’t like what I saw, so I know I really did luck out.
I wanted to quickly talk about my save-the-dates. I went with a postcard size card using Vistaprint, and it couldn’t have gone any smoother. I was toying around with doing something photo-shopped to make Dann and I look like we were in a old movie scene or make it movie poster, but I just didn’t have the time! Wedding planning is really time consuming to begin with! I ended up looking up Vistaprint, finding a simple black and gold design that I actually liked, and then just doing it!
I already had the great photos to choose from from our engagement shoot, so all the other design elements were just icing on the cake. When you’re designing your save-the-date cards I think the essential elements to remember are:
To me that’s really all you need! I also included a link to our wedding website. Our wedding website has links to all of our registries, since that’s often people’s next question. Pointing out the website was a simple way to include registry information tactfully because those that are really interested can pursue it. And those that don’t want to hear about it, don’t.